为什么First Paint在DOMContentLoaded之前发生

问题描述

我正在努力探索性能改进技术，并深入Google Chrome附带的性能工具。我在玩Timeline选项卡，并发现在我的页面 First Paint 事件发生在 DOMContentLoaded 事件之前。我阅读了一些文章，据说浏览器可以开始向用户显示内容的第一时间必须在 DOMContentLoaded 之后。有人请解释这是真的吗？解决方案DOMContentLoaded意味着解析器已经完成将HTML转换为DOM节点并执行任何操作同步脚本。

这并不妨碍浏览器呈现不完整的DOM / CSSOM树。事实上，它必须能够执行重排，以防JavaScript查询计算出CSS属性。如果它可以在不完整的树上进行回流，它也可以渲染它们。

这对于从服务器传输的大型文档也很重要。用户可以在完成加载之前开始阅读它。

理解整个分析/评估/渲染过程是一个流处理管道，其中有一些部分甚至以并行/投机方式进行。管道的后期阶段不会等待早期阶段完成，而是在产出到达时处理它们，并在有足够信息进行下一次增量时立即处理它们。

例如解析器在处理其所有属性之前显然不能发出Element节点，但它可以在仍处理其子树的同时发出节点。渲染器可以呈现没有子节点的节点。并且它可能以不完整的样式呈现，以便稍后进行回流，例如，当JavaScript插入另一个样式表或者仅仅因为尚未被插入的子节点会影响它将被呈现的方式。

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow

这篇关于为什么First Paint在DOMContentLoaded之前发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！