FRONTEND ENGINEERING · VISUAL LAB
前端工程可视化实验室
通过 8 个可交互的 SVG 可视化模块,直观理解浏览器渲染流水线、事件循环、JIT 编译、虚拟 DOM Diff、CSS 布局、打包工具、Service Worker 与 WebAssembly 等前端核心原理。纯单文件 HTML/CSS/JS,零外部依赖。
8 Modules
SVG + Vanilla JS
Zero Dependencies
Single File
01CRITICAL RENDERING PATH
浏览器渲染流水线
可视化浏览器关键渲染路径:HTML 解析为 DOM,CSS 解析为 CSSOM,二者合并为渲染树,随后经过布局、绘制、合成最终呈现到屏幕。
渲染管线可视化
流水线HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite。布局(Layout)会计算几何位置,触发回流;绘制(Paint)生成图层;合成(Composite)交给 GPU 合成最终帧。反复读写布局属性会造成布局抖动(Layout Thrashing)。
02JS EVENT LOOP
Event Loop 事件循环
可视化 JavaScript 事件循环:调用栈执行同步代码,异步 API 移交 Web API,回调进入任务队列与微任务队列,每次轮询后先清空微任务再取下一个宏任务。
事件循环可视化
规则每次取出一个宏任务执行完毕后,会清空所有微任务(Promise.then),再进入下一轮渲染。微任务优先级高于宏任务。setTimeout 属于宏任务,Promise 回调属于微任务。
03V8 JIT COMPILATION
V8 引擎与 JIT
可视化 V8 引擎的分层编译:源码解析为 AST,Ignition 解释器生成字节码快速启动,TurboFan 对热点函数进行 JIT 优化,类型变化时触发反优化(Deopt)回到解释执行。
V8 编译管线
分层Ignition 负责解释执行字节码并收集反馈类型;TurboFan 基于类型反馈生成优化机器码。当传入类型与反馈不符(如整数变字符串)时触发 Deopt,性能短暂回退后重新升温。
04VIRTUAL DOM DIFFING
虚拟 DOM Diff
可视化 React 风格的虚拟 DOM Diff 算法:逐层比较新旧两棵树,生成插入、更新、删除、移动补丁,再批量应用到真实 DOM,减少直接操作 DOM 的开销。
新旧树 Diff 可视化
同层比较Diff 默认只对比同层级节点,借助 key 识别列表项身份以支持移动。补丁类型:INSERT(绿)、UPDATE(黄)、DELETE(红)、MOVE(蓝)。
05CSS LAYOUT ENGINE
CSS 布局引擎
可视化 CSS 布局模式:Flexbox、Grid、Block、Float,以及盒模型(margin / border / padding / content)。调整属性可实时观察元素重新排列的过程。
布局模式可视化
盒模型每个元素由 content → padding → border → margin 四层构成。Flexbox 沿主轴排列,Grid 以行列网格定位。修改 justify-content / align-items 会触发布局重算。
06BUNDLERS & TREE SHAKING
打包工具
可视化前端打包工具(webpack / rollup / esbuild / Vite):从入口扫描 import 构建依赖图,Tree Shaking 移除未使用导出,Code Splitting 拆分按需加载的 chunk。
依赖图与打包
ESM基于 ES Module 的静态分析使 Tree Shaking 成为可能(rollup / esbuild 表现最佳)。Vite 利用浏览器原生 ESM 做开发期按需编译,生产构建仍打包。dead code 以灰色显示。
07SERVICE WORKER & PWA
Service Worker 与 PWA
可视化 Service Worker 生命周期(install → activate → fetch)与缓存策略(cache-first / network-first / stale-while-revalidate),以及离线场景下的网络回退。
SW 拦截与缓存
策略cache-first 优先缓存,无则联网;network-first 优先联网,失败回退缓存;stale-while-revalidate 立即返回缓存同时后台更新。离线时网络路径被阻断。
08WEBASSEMBLY PIPELINE
WebAssembly
可视化 WASM 编译流水线:C/C++/Rust 源码经 LLVM 编译为 .wasm 字节码,浏览器加载并编译后以接近原生的速度执行,可与 JavaScript 协同并对比性能。
WASM 编译与执行
流水线Source → LLVM IR → .wasm → 浏览器编译 → 执行。WASM 模块由 Section(Type/Import/Function/Memory/Export)组成,按页(64KB)管理线性内存,执行速度通常快于解释执行的 JS。