DOMContentLoaded块页面加载
DOMContentLoaded块页面加载
提问于 2015-09-18 16:12:20
请参阅代码：
<!-- ... -->
<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足以呈现内容(尽管没有IMGs，但是良好的布局块并不取决于imgs的大小)。一般的页面布局应该立即显示，就像它总是想要的那样。而且，只有在呈现(或者至少开始绘制它)之后，Javsacript才应该运行，不管它只是控制单击绑定或无穷无尽的循环，就像这里的例子。
如何在静态页面布局实际呈现或至少开始出现之后运行JS？
(“就绪”事件在这里不合适，因为它不能保证在任何合理的时间内发射)
- 正如您从示例中看到的，我没有使用文档写入或计划。
- 我还将脚本放置在正文结束标记之前。
- 我没有做任何实际的工作，在脚本标签-我从属于事件。
为什么浏览器阻止(阻止)用户看到静态定义的内容？至少现代浏览器能阻止这种胡说八道吗？
UPD。clarification
如果您将DOMContentLoaded用于常规的、看似无害的任务(对按钮事件进行子操作、初始化其他代码的异步加载等)实际上，您确实会延迟用户查看内容，这是DOMContentLoaded的真正问题。这里的循环阻塞是有意的，只是为了证明它真的阻塞，对于那些错误地认为DOMContentLoaded是“异步”/“非阻塞”安全的东西(不是)的人来说。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-09-18 17:03:50
有趣而且出乎意料。我用requestAnimationFrame(回调)解决了这个问题，如下所示：
function foo() {
window.requestAnimationFrame(function() {
window.requestAnimationFrame(function() {
var timestamp = Date.now() + 5000; while (Date.now() < timestamp){};
alert('now');
});
});
}
document.addEventListener('DOMContentLoaded', foo);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32656594
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号