本文详解浏览器中脚本执行与渲染的时序关系，阐明为何 requestAnimationFrame 可能早于 <script> 执行触发，并提供通过 blocking="render"、脚本位置控制及现代加载策略实现渲染阻塞的可靠方案。
本文详解浏览器中脚本执行与渲染的时序关系，阐明为何 `requestanimationframe` 可能早于 `<script>` 执行触发，并提供通过 `blocking="render"`、脚本位置控制及现代加载策略实现渲染阻塞的可靠方案。</script>
在构建高性能、无闪烁的 Web 应用时，一个常被忽视却至关重要的细节是：脚本执行与页面渲染的执行顺序并非绝对确定。尽管 JavaScript 是单线程的，但浏览器的渲染流程（包括样式计算、布局、绘制）与 JS 执行共享事件循环，而 requestAnimationFrame（RAF）回调被调度在「下一个帧的渲染前」——这恰恰发生在浏览器决定是否需要重绘的临界点。若脚本尚未执行完毕，DOM 状态可能未就绪，此时 RAF 触发便可能导致读取未挂载元素、样式未生效或 UI 闪动。
? 根本原因：Parser-blocking ≠ Render-blocking
-
Parser-blocking（解析阻塞）：默认 <script>（尤其外部脚本）会暂停 HTML 解析器，确保 DOM 构建按序进行。例如：
<script src="data:text/javascript,console.log(document.body.children.length);"></script> <div>content</div>
此处 console.log 输出为 0，因为 <div> 尚未被解析——这是 parser-blocking 的典型表现。
Render-blocking（渲染阻塞）：但 parser-blocking 并不自动等同于 render-blocking。只有当脚本位于 <head> 中时，主流浏览器（Chrome、Safari）才会将其视为 render-blocking —— 即强制延迟首次渲染（paint），直到该脚本执行完毕。而放在 <body> 底部的脚本，虽阻塞解析，却不阻塞渲染队列，因此 RAF 可能抢在脚本执行前被调用。
可通过 iframe 演示验证（规避 StackBlitz 环境限制）：
<iframe srcdoc="
<html><head>
<script>requestAnimationFrame(() => parent.postMessage(['RAF'], '*'));</script>
<script>parent.postMessage(['SCRIPT EXECUTED'], '*');</script>
</head><body><h1>HELLO</h1></body>
</html>">
</iframe>在 Chrome 中，控制台稳定输出：
SCRIPT EXECUTED RAF
证明 <head> 内脚本实现了 render-blocking；若将第二个 <script> 移至 <body>，则 RAF 可能先触发。
✅ 可靠解决方案
1. 使用 blocking="render"（推荐，现代标准）
为外部脚本显式声明渲染阻塞行为（需配合 defer 或 async 避免 parser-blocking）：
<script defer blocking="render" src="./init.js"></script>
✅ 优势：语义清晰、无需调整脚本位置、兼容未来规范演进（HTML Issue #10034 已计划扩展支持内联脚本）。
⚠️ 注意：目前仅 Chromium 125+ 和 Safari 17.4+ 支持，Firefox 尚未实现。
2. 脚本置于 <head> + 同步执行（兼容性最佳）
<head>
<script>
// 关键初始化逻辑（如主题、字体预加载、CSS-in-JS 注入）
document.documentElement.classList.add('js-ready');
</script>
<script src="./vendor.js"></script>
</head>确保所有影响首次渲染的逻辑在 <head> 中同步执行，从源头规避 RAF 提前触发。
3. 延迟 RAF 直到 DOM 就绪（防御性编程）
若无法控制脚本加载时机，可主动等待：
// script.js
function safeRAF(callback) {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => requestAnimationFrame(callback));
} else {
requestAnimationFrame(callback);
}
}
safeRAF(() => {
console.log('RAF after DOM ready & script executed');
});? 总结与建议
| 方案 | 兼容性 | 控制粒度 | 推荐场景 |
|---|---|---|---|
| <head> 同步脚本 | ✅ 所有浏览器 | 粗粒度（整个 head） | 传统项目、关键首屏逻辑 |
| blocking="render" | ⚠️ Chromium/Safari | 细粒度（单个 script） | 新项目、渐进增强 |
| DOMContentLoaded + RAF | ✅ 所有浏览器 | 灵活可控 | 第三方脚本、动态加载场景 |
最终原则：不要依赖“脚本一定在渲染前执行”的假设。始终将渲染敏感操作（如测量 DOM、触发动画、读取 computedStyle）显式绑定到 DOM 就绪或脚本执行完成之后。使用 blocking="render" 是迈向标准化、可维护渲染时序管理的关键一步。
