- 博客(24)
- 收藏
- 关注
RSS订阅原创 性能优化 - 构建体积优化
核心优化策略：基于 ESM 的静态结构特性，在编译阶段通过静态分析识别并剔除未使用的代码。代码分割：通过多入口和 SplitChunksPlugin 将不同业务模块拆分为独立的 chunk，提取公共依赖，提升资源利用率。代码压缩混淆：使用 TerserPlugin 删除多余空格、换行、注释，结合 Tree-Shaking 删除死代码，混淆变量名。CSS 优化。
2026-01-03 20:57:28
732
原创 性能优化 - 渲染优化
核心概念：回流会重新计算布局，重绘只重新绘制外观。回流一定会触发重绘，但重绘不一定触发回流。优化策略DOM 操作优化：在低层级节点操作、使用类名切换、脱离文档流、批量操作。使用 DocumentFragment：批量 DOM 操作时使用，减少回流和重绘次数。渲染队列机制：批量读写操作，避免读写穿插。动画优化：使用transform和opacity进行动画，利用 GPU 合成层。注意事项避免使用 table 布局和 CSS 表达式。合理使用，避免创建过多合成层。
2026-01-02 21:32:42
698
原创 内存堆栈分析笔记
WeakMap 的 key / WeakSet 的值 是弱引用对象，当对象没有被其他强引用持有的时候，会被在适当的时候被垃圾回收器回收，避免强引用导致的内存泄漏。并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。**关键点：**内存无法被正常释放，如果是正常/合理的内存占用，或者后续能正常释放内存，不算内存泄漏。这个方案可以快速确认内存来源，但不一定准确，更多的是确认可能存在内存占用过多的情况。程序的运行需要内存。
2025-12-31 23:55:09
797
原创 Vue 2 - 模板编译源码理解
核心流程：模板解析（Parse）→ 静态节点优化（Optimize）→ 代码生成（Generate）→ 函数创建。AST 节点类型：元素节点（type: 1）、表达式节点（type: 2）、文本节点（type: 3）。静态节点优化：通过标记静态节点，在 patch 时跳过 diff，提升渲染性能。代码生成：根据 AST 节点类型和指令，使用对应的渲染辅助函数_c_v_s_l_m_e包裹。静态节点优化减少不必要的 diff 操作。编译结果缓存避免重复编译。
2025-12-30 23:15:28
557
原创 HTTP 协议发展整理
HTTP/0.9：最初版本，只支持 GET 请求，只能传输 HTML。HTTP/1.0：引入多种内容类型、缓存、状态码，但存在频繁建立连接的问题。HTTP/1.1：支持持久连接、管道机制、断点续传、Cookie，但仍存在队头阻塞问题。HTTP/2：二进制分帧、多路复用、头部压缩，解决了应用层队头阻塞问题。HTTP/3：基于 QUIC 协议，解决传输层队头阻塞问题，支持连接迁移、前向纠错。演进方向性能优化：从单次连接到持久连接，从串行到并行传输。
2025-12-27 22:59:17
625
原创 Vue2 - Watch 侦听器源码理解
初始化阶段完成 watch 创建，收集依赖。依赖变化阶段：依赖数据变化时触发update()，执行回调函数。清理阶段：组件销毁时清理 Watcher 实例。下文中的术语说明：watch 创建的 Watcher 实例对象，负责监听数据变化并执行回调，为何叫 UserWatcher，因为源码里使用来代表由用户显式创建的 Watcher，通常指代的就是 watch 对象：视图更新 Watcher核心机制：通过 Watcher 实现响应式监听，依赖数据变化时执行回调函数。初始化流程initWatch→。
2025-12-26 22:41:12
785
原创 Vue2 - Computed 计算属性源码理解
这里主要通过视图渲染来理解 Computed 的执行流程，在视图内使用 Computed 属性是比较常见的场景。下文中的术语说明：Computed 创建的 Watcher 实例对象，负责计算 computed 属性：渲染视图的 Watcher 实例，视图中使用到 computed 属性时，会去读取 computed 属性的实际值初始化阶段创建 ComputedWatcher，定义响应式属性拦截器首次访问阶段：触发计算，收集依赖，建立响应式关系依赖更新阶段：依赖变化时标记为脏数据，下次访问时重新计算。
2025-12-25 17:41:24
652
原创 Vue 错误处理机制源码理解
看 Vue 源码实现，可以发现触发错误钩子都是先获取parent实例，然后再逐层向上查找错误钩子，而不是获取组件自身的钩子。主要原因是子组件在出错时，组件状态可能已经不可靠。如果这时候有依赖 UI 渲染的场景，组件即使捕获了错误，也没法做 UI 降级的处理机制。如果是在稳定的父组件中捕获错误，可以由父组件去兜底组件异常问题的处理流程。通过钩子和全局处理组件树中的错误。采用向上冒泡的传播机制，优先级为：组件树向上传播 → 全局错误处理 → 最终。API 差异：Vue 2 使用选项式 API 的。
2025-12-24 11:26:39
982
原创 Puppeteer 实践笔记
Puppeteer 核心概念：通过 Browser、Page、ElementHandle 等对象实现对浏览器的控制，使用 CDP 协议与浏览器通信。基础操作：创建浏览器实例、新建页面、页面跳转、元素操作（选中、输入、点击）是 Puppeteer 的基础功能。等待机制：提供了多种等待函数（等）来确保页面或元素已加载完成。高级技巧：文件上传、函数注入、性能优化、分支流程处理解决复杂场景下的问题。注意事项：需要注意页面上下文环境的变化、无头浏览器可能触发反爬机制、等待超时等问题。
2025-12-22 09:57:30
1249
原创 React 学习笔记
自定义 Hook 就是封装逻辑的函数，类似 Vue 的 composable。通常把重复的逻辑提取出来，不包含业务代码。规则名字必须以use开头可以在组件间共享逻辑共享的是逻辑，不是状态本身Hook 之间可以传值，会保持最新每次渲染都会重新运行必须是纯函数事件处理函数用 useEffectEvent 包裹不要写太通用的 Hook（如useMount），保持具体使用：把 useEffect 里的逻辑提取成自定义 Hook，让组件更简洁。组件。
2025-12-20 11:31:34
965
原创 npm 发包流程整理
发布前检查：确保配置正确、构建产物完整、包名可用发布流程：登录账号 → 执行发布命令 → 首次 scoped package 需要异常回退：优先使用 dist-tag 回退，避免删除已发布的版本2FA 认证：使用 Access Token 解决 2FA 认证问题，要注意 Token 安全自动化发布：通过 Git Tag、semantic-release 或手动 workflow 实现自动化发布流程，推荐 semantic-release 流程。
2025-12-19 11:03:27
912
原创 Electron 插件重编译方案整理
优先使用，省心且更贴近 Electron 场景手动方案node-gyp可以作为备用重建方案注意保持 Python 环境、VS C++ Build Tool 和 目标架构一致。
2025-12-18 11:59:13
642
原创 Corepack 包管理器管理工具
Corepack 是Node.js 官方提供的包管理器管理工具，用于统一和管理不同版本的包管理器。启用方式：从 Node.js 16.9.0 开始内置，通过命令启用。项目配置：通过中的字段指定包管理器版本，确保团队一致性。优势：自动安装和切换包管理器版本，简化工作流程，提高团队协作效率。适用场景：适合团队协作项目，特别是需要确保构建一致性的生产环境。
2025-12-17 11:23:57
773
原创 Vue3 - 快速 Diff 算法理解
Diff 算法流程：Vue 3 的 diff 算法分为五个步骤：同步头部节点、同步尾部节点、处理新增节点、处理删除节点、处理乱序节点。通过预处理快速缩小范围，然后通过 key 映射和 LIS 算法处理复杂的节点移动场景。最长递增子序列算法：使用贪心算法 + 二分查找 + 回溯列表的方式，找出不需要移动的节点序列。通过贪心策略和二分查找找到局部最优解，然后通过回溯指针数组还原出真正的递增子序列，最小化 DOM 操作次数。关键优化。
2025-12-16 11:26:56
940
原创 Vue2 - VDOM 和双端 Diff 算法
VDOM 的核心价值：通过维护虚拟 DOM 树，减少直接操作真实 DOM 的性能开销，提供声明式编程模型，支持跨平台渲染。Diff 算法流程：数据变化触发，通过双端 diff 算法高效比较和更新节点。双端 diff 算法：使用四个指针（新旧节点的起始和结束位置）进行比较，通过四种匹配规则优先处理无需移动的节点，用最少移动解决顺序调整，时间复杂度从 O(n²) 优化为 O(n)。关键优化点：key 值帮助识别节点复用，避免不必要的重建；同层节点比较避免跨层级遍历；双端比较减少遍历范围。
2025-12-15 10:27:59
754
原创 浏览器跨标签页通信方案
MessageChannel 本质也是依赖 MessagePort 来实现的通信机制，本质和 SharedWorker 一样。如果实现跨标签页通讯，需要有中间人且支持结构化克隆算法来协助传递 port 端口信息。通过 websocket ，以服务端做中转，实现跨域通信方案。这个方案还是比较常用在 iframe 跨域通信机制中，仅记录。基于共享线程来完成通信，是独立于主线程的后台共享线程。支持同源下跨标签页通信方案，适用于广播消息方案。打开窗口，可以通过父子窗口执行通信。
2025-12-14 09:24:30
590
原创 浏览器帧渲染流程理解
浏览器以事件循环为驱动，每帧中先处理任务与微任务，如果到达 VSync 时机，则根据是否需要更新内容，执行 RAF 和 渲染管线（样式、布局、绘制、光栅化、合成），在下一次垂直同步时由 GPU 将结果显示到屏幕，后续根据是否有剩余时间进入空闲回调阶段。Vsync 的周期决定了 RAF 的执行周期重绘阶段其实不会执行绘制操作，只是对构建了绘图指令的数据结构并提交给合成器线程，真正绘制是在 Vsync 信号发出后的合成阶段（第9步）。
2025-12-13 22:09:02
1576
原创 浏览器事件循环和Node事件循环理解
浏览器事件循环：基于 messagepump 实现，执行顺序为宏任务 → 微任务 → 渲染（可选）→ 下个周期。同步代码在宏任务内部执行，微任务在单个循环周期内会全部执行完毕，宏任务每个周期只执行一个。Node.js 事件循环：基于 libuv 实现，分为多个阶段（timers、I/O callbacks、poll、check、close callbacks），每个阶段执行完毕后会执行微任务队列（nextTick 优先级最高），然后进入下一个阶段。关键区别。
2025-12-12 11:06:32
782
原创 如何给 IP 地址部署 HTTPS
以上是关于 IP 地址申请 HTTPS 的流程。虽然最后项目部署出了点问题，但总算把如何给 IP 地址部署 HTTPS 的疑问给解决了。整体流程比较顺畅，不会有太多的卡点。
2025-12-10 09:27:11
1232
1
原创 Service Worker离线缓存理解
Service Worker 生命周期：注册→ install（预缓存）→ waiting（待旧 SW 退出）→activate（接管页面）→running（处理 fetch/push/sync 事件）→ idle/terminated（空闲终止）。Service Woker 离线缓存使用流程：定义 SW 文件 → 监听 install 添加缓存 、 activate 中处理旧缓存 、fetch 中匹配网络缓存 → 注册 SW。
2025-12-09 07:24:09
875
原创 SSE 实现方案实践
本文介绍了SSE(Server-Sent Events)技术及其在前端开发中的应用。SSE是一种基于HTTP的轻量级服务器推送方案，支持单向实时消息流，适合日志推送、AI流式生成等场景。文章重点讨论了原生SSE的局限性(仅支持GET请求)及两种POST请求实现方案：基于axios的onDownloadProgress监听和微软开发的fetch-event-source库。后者通过fetch API实现SSE功能，内置窗口恢复重连、错误捕获等特性，支持自定义请求头和中断控制。
2025-12-08 11:00:52
372
原创 JavaScript - 结构化克隆算法概要整理
结构化克隆算法（Structured Cloning Algorithm）是用于复制复杂 JavaScript 对象的算法，广泛应用于postMessage()、IndexedDB、Worker数据传递等场景。与 JSON 序列化的区别：比JSON.stringify()支持更多类型（如 Date、Map、二进制数据等），但仍有局限性（如不支持函数）。错误对象（Error 及其子类，如 TypeError、RangeError 等）：部分环境支持，复制时会保留错误消息和堆栈信息。对象字面量（Object）
2025-12-08 10:53:18
164
原创 简单实现Vuepress博客首页
Vuepress简介VuePress 是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。官方中文文档环境搭建在此之前要先安装好 node.js 和 webpacknode.js 安装 : node.js官网webpack 安装 ：npm install webpack -g本文主要针对 Vuepress首先打开控制台( win+R 输入 CMD )输入以下命令#win安装vuepress,-g代表全局安装
2020-05-11 18:00:27
2957
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人