引言

当你打开一个网页，背后是复杂的渲染过程，其中 JavaScript 和渲染引擎如同赛车手和赛道，协同作战，共同打造出你的视觉盛宴。但你知道吗？这两者之间有一个微妙的“恩怨”关系，让我们一探究竟。

浏览器渲染流程大揭秘

首先，让我们从浏览器的渲染流程开始。当你输入一个网址，浏览器会启动一系列步骤来构建出你眼中的完整网页。

1. 解析 HTML/CSS：浏览器像一个聪明的侦探，逐行解读网页的指令。
2. 构建 DOM 树和 CSSOM 树：HTML 和 CSS 被转换成计算机能理解的树状结构。
3. 合并渲染树：DOM 和 CSSOM 树融合在一起，形成一棵完整的渲染树。
4. 布局与绘制：浏览器根据渲染树中的元素计算位置、尺寸并进行绘制。
5. 合成：最后，各个图层合并到一起，形成我们看到的最终画面。

JS执行与渲染的“博弈”

接下来，让我们谈谈 JavaScript 和渲染的关系。

由于 JavaScript 是单线程的，它必须等待当前任务完成后才能继续执行。这就意味着，如果一段 JavaScript 代码运行时间过长，渲染过程就会被“冻结”，导致页面卡顿。

案例1：同步 JS 阻塞渲染

document.body.style.background = "red";
alert("阻塞渲染");

在这个例子中，当你尝试修改背景颜色并弹出一个警告框时，页面会“冻结”，直到你关闭弹框。这是因为 JavaScript 执行阻塞了渲染进程。

事件循环中的渲染“定时器”

为了平衡 JS 和渲染的关系，浏览器引入了事件循环机制。

每当有新的宏任务（如脚本执行）或微任务（如 Promise 回调）需要处理时，事件循环都会检查是否需要进行渲染。如果距离上次渲染超过 16.6ms（约等于屏幕刷新率），浏览器就会启动渲染流程。

案例2：异步 JS 允许渲染穿插

requestAnimationFrame(() => {
  document.body.style.background = "blue";
});

在这个例子中，我们使用 requestAnimationFrame 将 JavaScript 动画与渲染帧同步。这意味着，当浏览器准备绘制下一帧时，JavaScript 弹窗会被延迟执行，从而避免了渲染阻塞。

JS 如何触发渲染？

JS 可以通过修改 DOM 或样式来触发渲染流程。但并非所有的修改都会立即引起渲染。

优化策略

• 合并多次 DOM 操作：减少不必要的重排和重绘。
• 使用 requestAnimationFrame：将动画与渲染帧同步，提升性能。

关键结论

总的来说，JS 执行优先于渲染，但渲染并非紧随 JS 结束。浏览器根据屏幕刷新率决定是否渲染，通常每秒 60 次（16.6ms/帧）。长任务会导致卡顿，因此应尽量避免。

性能优化建议

• 避免长任务：将复杂计算拆分，或将任务放入 Web Worker 中。
• 减少强制同步布局：避免在 JS 中连续读取布局属性。
• 使用 CSS 动画替代 JS 动画：利用浏览器的合成阶段优化。

通过理解 JS 与渲染的协作机制，我们可以显著提升页面性能与用户体验。这就像是在赛车比赛中，了解对手的节奏和策略，才能更好地掌控自己的速度。