当单体前端膨胀到几十万行、十几个团队共用一个仓库时，技术栈升级、独立部署、故障隔离都成了奢望。微前端把"巨石应用"拆成可独立开发、独立部署、运行时集成的子应用。本文先把微前端要解决的四件大事讲清——技术栈无关、独立部署、运行时集成、样式与 JS 隔离；再横向对比 iframe、Web Components、Module Federation、qiankun 四类集成方案的取舍。重点拆开微前端的命门：CSS 隔离（Shadow DOM / 运行时样式改写 / 约定式）与 JS 沙箱（快照沙箱、Proxy 沙箱的单例与多例、with+Proxy 拦截全局对象的原理），并给出 qiankun 注册子
发布于 2026-10-26
React 与 Vue 走的是两条不同的路：Vue 用 Proxy 做响应式，React 则靠虚拟 DOM 与可中断的 Fiber 调度。本文先把 JSX 编译与 createElement 讲清，再拆解虚拟 DOM 的协调（Reconciliation）与 Diff 算法（同层比较、key 的作用、双端对比思路）；核心是一节 Fiber 架构——为什么 Stack Reconciler 会卡顿、Fiber 节点如何可中断可恢复、双缓存树与 workInProgress 如何避免白屏闪烁。随后深入 Hooks 心智模型：闭包陷阱、useState 的批量更新、useEffect 的依赖与清理、
发布于 2026-10-19
前端是攻击者最常触碰的门面，一次 innerHTML 用错就可能交出去整个账号。本文从浏览器同源策略讲起，把 XSS（存储型/反射型/DOM 型）、CSRF、点击劫持三大高危漏洞的成因、利用链与防御方案一次讲透：输出编码与上下文、DOMPurify 白名单、Trusted Types、Cookie 的 HttpOnly 与 SameSite、CSRF Token 与 Origin 校验、X-Frame-Options 与 CSP frame-ancestors；再补充开放重定向、postMessage 未校验 origin、依赖供应链与原型污染等易忽视风险，最后给出一份可直接落地的 CSP 配
发布于 2026-10-14
前面写过浏览器渲染与 JS 事件循环，讲的是"资源到手后怎么跑得快"；这篇补上另一半：资源怎么被高效地造出来。本文拆解 Vite 快的三根支柱——esbuild 依赖预构建、按需编译 + HMR、生产期 Rollup 打包，逐层讲清冷启动为什么从分钟级降到秒级、HMR 边界如何工作又为什么会失效、代码分割与 Tree Shaking 怎么落地，最后给出从启动到产物体积的完整优化清单与生产避坑指南，与已有的渲染性能篇形成"构建期 + 运行期"的完整闭环。
发布于 2026-10-09
从浏览器输入 URL 到首屏呈现，页面到底经历了什么？本文系统拆解关键渲染路径（CRP）：DOM 与 CSSOM 如何构建、渲染树如何合并、Layout/Paint/Composite 各自做什么，为什么 CSS 会阻塞渲染、JS 会阻塞解析，defer 与 async 该如何选。随后讲清重排（Reflow）与重绘（Repaint）的区别与触发条件、什么是"强制同步布局"（layout thrashing）以及如何用先读后写规避，并深入合成层与 GPU 加速，解释为什么 transform/opacity 动画比 top/left 更流畅、will-change 为什么不能滥用。最后给出强缓存
发布于 2026-10-05
从 JavaScript 单线程与非阻塞 I/O 的设计出发，系统拆解事件循环（Event Loop）的完整模型：调用栈、宏任务队列与微任务队列如何协作，为什么微任务总在下一个宏任务之前清空；用一份份可运行的代码推演输出顺序，彻底讲清 setTimeout、Promise.then、queueMicrotask 的优先级关系。随后回溯回调地狱的痛点与 Promise 的三种状态、链式调用与错误穿透，对比 all/allSettled/race/any 的适用场景；再剖析 async/await 的语法糖本质、await 的串行陷阱与并行优化、try/catch 的捕获边界，并对比浏览器与 No
发布于 2026-10-02
从 Vue 2 的 Object.defineProperty 局限出发，系统拆解 Vue 3 基于 Proxy + Reflect 的响应式实现：reactive 如何拦截读写、effect/track/trigger 如何完成依赖收集与派发更新；对比 ref 与 reactive 的适用场景与模板自动解包，讲清解构丢失响应性的根因与 toRefs 解法；进一步剖析 computed 的 lazy + dirty 机制、watch 与 watchEffect 的差异，以及 Composition API 组合函数与生命周期实战。最后结合编译期 PatchFlag、静态提升、Block Tre
发布于 2026-09-15
