主 题
一句话：把「背题」变成「能画图讲清楚」——每题附精简参考答案，适合面试前速览。
写在前面
本文整理自 渡一前端 八股文课程笔记，覆盖 JS 运行时、浏览器渲染、性能优化等高频考点。答案偏「口述版」，面试时可先给结论再展开。
一、JavaScript 运行时
1. 如何理解 JS 的异步？
结论：JS 是单线程（运行在浏览器渲染主线程），异步是为了不阻塞 UI。
展开：
- 渲染主线程同时负责：解析 HTML、执行 JS、布局绘制……若全部同步，一旦 JS 长时间占用，页面无法更新，用户感知为「卡死」。
- 浏览器把计时器、网络、DOM 事件等交给其他线程，主线程继续执行后续代码。
- 异步任务完成后，回调被包装成任务放入消息队列，等待主线程空闲时取出执行。
2. 阐述 JS 的事件循环
结论：事件循环 = 渲染主线程不断从队列取任务执行的机制。
展开：
- Chrome 源码中可理解为「不会结束的 for 循环」，每次取队列头部任务执行。
- 旧说法「宏任务 / 微任务两个队列」已过于简化；W3C 模型是多种任务队列、不同优先级。
- 浏览器必须有一个微任务队列，且微任务优先级最高，在当前任务结束后、下一宏任务之前清空。
常考延伸：Promise.then → 微任务；setTimeout → 宏任务；async/await 中 await 之后相当于微任务。
3. JS 计时器能精确计时吗？
不能，原因：
- 硬件无原子钟，OS 计时本身有误差
- JS 计时器底层调用 OS API，继承误差
- W3C：定时器嵌套超过 5 层，最小间隔 4ms
- 回调需等主线程空闲，事件循环带来额外延迟
二、浏览器渲染
4. 浏览器如何渲染页面？
网络线程收到 HTML → 生成渲染任务 → 渲染主线程执行流水线：
flowchart LR
A[HTML 解析] --> B[样式计算]
B --> C[布局 Layout]
C --> D[分层 Layer]
D --> E[绘制 Paint]
E --> F[分块 Tiling]
F --> G[光栅化 Raster]
G --> H[合成 Composite]
HTML 解析要点：
| 资源 | 是否阻塞 HTML 解析 | 原因 |
|---|---|---|
| CSS | 否（预解析线程下载） | 不阻塞 DOM 构建，但阻塞渲染 |
| JS（无 defer/async） | 是 | 可能改 DOM，必须暂停解析执行 |
产出：DOM 树 + CSSOM 树 → 合并为带样式的 DOM → 布局树（不含 display:none、含伪元素等）。
后续阶段：
- 分层：
transform、opacity、will-change等影响层 - 绘制：每层的绘制指令集
- 合成线程：分块 → GPU 光栅化 → quad 提交 GPU 上屏
5. 什么是 reflow（回流）？
重新计算 layout 树（几何信息）。触发：改 width、margin、读 offsetTop 等布局属性。
- 浏览器会合并多次 DOM 改动，在 JS 执行间隙批量 layout
- 若在改样式后立即读布局属性，会强制同步 layout（layout thrashing）
6. 什么是 repaint（重绘）？
重新生成绘制指令（可见样式变化）。reflow 一定触发 repaint，但 repaint 不一定 reflow（如改 color）。
7. 为什么 transform 性能高？
transform 不影响 layout / paint 指令，只影响合成阶段 draw。合成在合成线程，与渲染主线程 busy 程度解耦——故动画优先用 transform + opacity。
三、框架原理（简答）
8. 什么是响应式原理？
数据变化 → 依赖该数据的副作用重新执行。Vue 3 用 Proxy 收集依赖；React 用 setState 触发 re-render（本质不同，面试分开答）。
小结
| 主题 | 面试一句话 |
|---|---|
| 异步 | 单线程 + 多线程协作 + 任务队列 |
| 事件循环 | 取任务执行；微任务优先 |
| 渲染 | DOM/CSSOM → layout → layer → paint → composite |
| 性能 | 少 reflow；动画用 transform |
| 计时器 | 不精确，别用来做强实时 |
全部评论(0)