DOMContentLoaded阻止页面加载 [英] DOMContentLoaded blocks page loading
问题描述
请参见代码：
<!-- ... -->
<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才应运行，无论它是仅控制单击绑定还是无限循环（如此处的示例）。
Static html+css is more than sufficient to render content (though without IMGs, and but good layout's blocks does not depend on imgs sizes). General page layout should be shown immediately like it was always intended to. And only after rendering (or at least starting to draw it) Javsacript should run, no matter be it just controls click bindings or endless loop as in example here.
在实际呈现静态页面布局或至少开始出现静态页面布局之后，如何运行JS？
（和就绪事件不适合在这里使用，因为不能保证在任何合理的时间触发）
(and "ready" event is not suitable here, because it is not guaranteed to fire in any reasonable time)
- 从示例中可以看出，我没有使用文档写操作
- 我也将脚本放置在主体关闭标签之前
- 我没有在脚本标签中进行任何实际工作-我订阅了事件。
为什么浏览器阻止（阻止）用户看到静态定义的内容？至少现代的浏览器可以阻止这种废话吗？
Why browser prevents (blocks) user from seeing statically defined content? Does at least modern browsers can stop that nonsense?
UPD。 说明
如果您将DOMContentLoaded用于看似无害的常规任务（订阅按钮事件，初始化其他代码的异步加载等），事实确实会使用户看不到内容，而这是DOMContentLoaded的真正问题。例如，这里的循环阻塞是有意的，只是为了证明它确实阻塞了，对于那些错误地认为DOMContentLoaded是异步 /非阻塞安全对象（不是）的人。
If you use DOMContentLoaded for regular seemingly harmless tasks (subsribing to buttons events, initialising async load of other code, etc.) you in fact DO delaying user from seeing contents and that IS the real problem with DOMContentLoaded. Loop blocking here is intentional in example, just to prove that it really blocks, for those who erroneously believes DOMContentLoaded is "async"/"non-blocking" safe thing (which is not).
推荐答案
有趣和意外。我用requestAnimationFrame（callback）解决了这个问题，像这样：
Interesting and unexpected. I solved it with requestAnimationFrame(callback), like so:
function foo() {
window.requestAnimationFrame(function() {
window.requestAnimationFrame(function() {
var timestamp = Date.now() + 5000; while (Date.now() < timestamp){};
alert('now');
});
});
}
document.addEventListener('DOMContentLoaded', foo);
这篇关于DOMContentLoaded阻止页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
