请看代码：
<!-- ... -->
<head>
<style type="text/css"> body { background: gray; } </style>
</head>
<body>
<p>
Firefox does not even shows blank page.
Tab is stuck in "suggested sites" for 5 seconds.
</p>
<p>
Chrome show just blank white. No text, no background. For 5 seconds.
</p>
<p>
DOMContentLoaded event handler blocks page
loading and rendering. Browser does not start
rendering page until DOMContentLoaded
handler function return.
</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
var timestamp = Date.now() + 5000; while (Date.now() < timestamp);
// or synchronous 5 seconds XHR as an equivalent of loop
});
</script>
</body>
<!-- ... -->
静态 html+css 足以渲染内容（尽管没有 IMG，但良好的布局块不依赖于 imgs 大小）。一般页面布局应该像预期的那样立即显示。
并且只有在渲染（或至少开始绘制它）之后，Javsacript 才应该运行，无论它只是控制单击绑定还是无限循环，如此处的示例。
在静态页面布局实际呈现或至少开始出现后，如何运行 JS？
（“就绪”事件不适合这里，因为不能保证它在任何合理的时间内触发）
- 正如您从示例中看到的，我没有使用文档写入，也没有计划使用。
- 我还将脚本放在正文结束标记之前
- 我没有在脚本标签中做任何实际工作 - 我订阅了该事件。
为什么浏览器阻止（阻止）用户查看静态定义的内容？至少现代浏览器可以阻止这种废话吗？
UPD. 澄清
如果您使用 DOMContentLoaded 来执行看似无害的常规任务（订阅按钮事件、初始化其他代码的异步加载等），那么您实际上会延迟用户查看内容，这才是 DOMContentLoaded 的真正问题。在示例中，这里的循环阻塞是故意的，只是为了证明它确实阻塞，对于那些错误地认为 DOMContentLoaded 是“异步”/“非阻塞”安全的人（事实并非如此）。
有趣且出乎意料。我用 requestAnimationFrame(callback) 解决了这个问题，如下所示：
function foo() {
window.requestAnimationFrame(function() {
window.requestAnimationFrame(function() {
var timestamp = Date.now() + 5000; while (Date.now() < timestamp){};
alert('now');
});
});
}
document.addEventListener('DOMContentLoaded', foo);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
