google-chrome - 为什么First Paint在DOMContentLoaded之前发生

Question

我正尝试使用Google Chrome浏览器随附的性能工具，以尽我所能来了解性能改进技术。我在玩“时间轴”选项卡，发现页面上的“第一次绘制”事件在DOMContentLoaded事件之前发生。我阅读了几篇文章，据报道，浏览器可以开始向用户显示内容的第一时间必须在DOMContentLoaded之后。可以请人解释这是真的吗？

Answer 1

DOMContentLoaded表示解析器已完成将HTML转换为DOM节点并执行任何同步脚本的过程。

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

这也与从服务器流式传输的大型文档有关。用户可以在完成加载之前开始阅读它。

重要的是要理解，整个解析/评估/渲染过程是一个流处理管道，其中某些部分甚至是并行/推测性地完成的。流水线的后期阶段不等待较早的阶段完成，而是在到达时取走输出，并在有足够的信息可用于下一个增量时立即对其进行处理。

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

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


重要的是要了解这是一个循序渐进的过程。对于
更好的用户体验，渲染引擎将尝试显示
尽快在屏幕上显示内容。它不会等到所有
在开始构建和布局渲染树之前，先分析HTML。
部分内容将被解析和显示，而过程
继续从其他内容继续
网络。