Javascript DOMContentLoaded阻止页面加载
请参见代码：Javascript DOMContentLoaded阻止页面加载,javascript,dom,Javascript,Dom,请参见代码： <!-- ... --> <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
<!-- ... -->
<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>
<!-- ... -->
正文{背景：灰色；}
Firefox甚至不显示空白页面。
标签卡在“建议站点”中5秒钟。
铬显示为空白白色。没有文字，没有背景。5秒钟。
DOMContentLoaded事件处理程序块页面
加载和渲染。浏览器无法启动
在加载DOMContentLoaded之前呈现页面
处理函数返回。
document.addEventListener（'DOMContentLoaded'，function（）{
var timestamp=Date.now（）+5000；而（Date.now（）- 正如您从示例中看到的，我既不使用文档编写，也不打算使用
- 我还将脚本放在正文结束标记的前面
- 我没有在脚本标签中做任何实际工作-我订阅了事件
如果将DOMContentLoaded用于看似无害的常规任务（订阅按钮事件、初始化其他代码的异步加载等），实际上会延迟用户查看内容，这就是DOMContentLoaded的真正问题。在这个例子中，循环阻塞是故意的，只是为了证明它确实阻塞了，对于那些错误地认为DOMContentLoaded是“异步”/“非阻塞”安全的东西的人来说（事实并非如此）。有趣且出乎意料。我用requestAnimationFrame（回调）解决了这个问题，如下所示：
function foo() {
window.requestAnimationFrame(function() {
window.requestAnimationFrame(function() {
var timestamp = Date.now() + 5000; while (Date.now() < timestamp){};
alert('now');
});
});
}
document.addEventListener('DOMContentLoaded', foo);
函数foo（）{
window.requestAnimationFrame（函数（）{
window.requestAnimationFrame（函数（）{
var timestamp=Date.now（）+5000；而（Date.now（）