浏览器八股

哪一步只触发重绘：改动只影响外观，如 color/background/visibility/box-shadow/outline。

哪些连重绘都不需要：transform、opacity、filter 由合成线程处理，改的是图层变换矩阵或透明度，主线程完全不参与。

三、重排、重绘与合成优化

一句话：优化的本质是减少主线程参与，把变化交给合成线程。

• transform/opacity 能走合成，是因为它们只改变图层的变换和混合参数，已有位图可以直接复用；改 left/top 则要重新布局、重新绘制整层。
• 代价：提升为独立图层会占用显存，层数过多导致"图层爆炸"，合成与内存开销反而更大。
• will-change 是提前告知浏览器"这个属性要变"，让它预先分层；滥用等于常驻图层，只在动画开始前加、结束后移除。
• 其他手段：批量读写 DOM 避免布局抖动，用 DocumentFragment 或 innerHTML 一次插入，动画用 requestAnimationFrame，列表虚拟化，离屏元素 content-visibility: auto。

追问：transform 一定不回流吗——改变的是布局无关属性才对；同时改 width 依然回流。

四、事件循环

一句话：每轮取一个宏任务执行完，清空所有微任务，需要时渲染一帧，再进入下一轮。

宏任务 → 清空微任务 → [rAF → Style/Layout/Paint] → 空闲回调 → 下一个宏任务

Promise.then 为什么比 setTimeout(0) 先执行

then 的回调进微任务队列，当前宏任务结束后立刻被清空；setTimeout 的回调是下一个宏任务，还要排队，嵌套调用还有 4ms 最小延迟钳制。

浏览器与 Node 的差异

• 浏览器只有"宏任务/微任务"两层，渲染穿插在轮次之间。
• Node 的宏任务分六个阶段：timers → pending callbacks → idle/prepare → poll → check（setImmediate）→ close。每个阶段结束清空 process.nextTick 队列，再清空微任务队列；nextTick 优先于 Promise。
• Node 11 之后每个宏任务回调后都会清微任务，和浏览器行为基本对齐；setTimeout(0) 与 setImmediate 在 I/O 回调内的顺序仍不固定。

requestAnimationFrame 在哪：在样式计算与布局之前、下一帧绘制之前执行，回调参数是帧时间戳；同一帧多次调用只执行一次，后台标签页暂停。适合动画，不适合做数据计算。

五、存储方案

一句话：按"容量、生命周期、是否随请求发送、是否同步"四个维度选型。

• Cookie 还要关注 HttpOnly（JS 读不到）、Secure（仅 https）、SameSite（CSRF 防护）。
• sessionStorage 在"复制标签页"时会复制一份，新标签页打开同 URL 则是空的。
• IndexedDB 能存结构化克隆对象与 Blob，适合离线缓存、大列表草稿。

跨标签页通信

• storage 事件：同源的其他标签页触发，当前页自己不触发；event.key/newValue 可用，但删改频繁时建议只当信号再读一次 localStorage。
• BroadcastChannel：同源任意标签页广播，API 简单，推荐首选。
• SharedWorker、Service Worker 做消息中转。
• window.postMessage：跨源 iframe 或 window.open 场景，必须校验 origin。

六、垃圾回收与内存泄漏

一句话：V8 分代回收，新生代复制、老生代标记清除并整理；泄漏的本质是"还有引用可达但业务上已经不用"。

• 新生代 Scavenge：From/To 两个半区，存活对象复制到 To 区，两次存活后晋升老生代。
• 老生代 Mark-Sweep 标记清除，碎片多时 Mark-Compact 整理；配合增量标记与并发标记减少停顿。
• 引用计数无法处理循环引用，现代引擎不用它做主策略。

常见泄漏场景

排查：Performance Monitor 看内存曲线是否锯齿上行，Heap Snapshot 采三次对比"只增不减"的对象，Allocation Timeline 定位分配来源。

七、首屏指标 LCP / INP / CLS

一句话：三项 Core Web Vitals 分别衡量"看到主要内容快不快、点了之后响应快不快、页面稳不稳"。

• LCP 的子部分是 TTFB、资源加载延迟、资源加载时长、元素渲染延迟，先定位是哪一段。
• INP 只统计有交互的页面，替代了 FID；FID 只测首次输入延迟，不反映后续绘制。
• CLS 只统计"非预期"偏移，用户主动交互引起的偏移不计入。

关联阅读

• 浏览器是如何渲染页面的
• 作业队列与事件循环
• JS 面试