为什么First Paint在DOMContentLoaded之前发生 [英] Why First Paint is happening before 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
理解这是一个渐进的过程是很重要的。为了
更好的用户体验，渲染引擎会尽快在屏幕上显示
的内容。在开始构建和布置渲染树之前，它不会等到所有
HTML被解析。
部分内容将被解析并显示，而
过程继续保留来自
网络的其余内容。
I'm diving into performance tools that are shipped with Google Chrome as I'm trying to get my head around performance improvements techniques. I'm playing around with Timeline tab, and I found that on my page First Paint event is happening before DOMContentLoaded event. I read a few articles and reportedly the first moment when browser can start displaying stuff to the user must be after DOMContentLoaded. Could somebody please explain it this is true?
DOMContentLoaded means that the parser has completed converting the HTML into DOM nodes and executed any synchronous scripts.
That does not preclude the browser from rendering an incomplete DOM/CSSOM tree. In fact it has to be able to perform reflows anyway in case javascript queries computed CSS properties. And if it can do reflows on incomplete trees it may as well render them.
This is also relevant for large documents streamed from a server. The user can already start reading it before it has completed loading.
It is important to understand that the whole parsing / evaluation / rendering process is a stream processing pipeline with some parts even done in parallel / speculatively. The later stages of the pipeline do not wait for the earlier stages to finish, instead they take the outputs as they arrive and process them as soon as enough information is available to do the next increment.
E.g. the parser obviously cannot emit Element nodes before processing all of its attributes, but it can emit the node while still processing its child tree. And the renderer may render the node without its children. And it may be rendered with incomplete styles only to undergo a reflow later, e.g. when javascript inserts another style sheet or simply because the child nodes which have yet to be inserted affect how it will be rendered.
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow
It's important to understand that this is a gradual process. For better user experience, the rendering engine will try to display contents on the screen as soon as possible. It will not wait until all HTML is parsed before starting to build and layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.
这篇关于为什么First Paint在DOMContentLoaded之前发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
