我正在深入研究随谷歌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.将解析和显示部分内容,同时继续处理来自网络的其余内容.
京公网安备 11010802040832号 | 京ICP备19059560号-6 