domReady和firstPaint

最新推荐文章于 2024-06-13 17:12:14 发布

Mr.Groooooooot

最新推荐文章于 2024-06-13 17:12:14 发布

阅读量448

点赞数

本文链接：https://blog.csdn.net/wdhxs/article/details/111378573

版权

domReady和firstPaint

前言

domReady是名为DOMContentLoaded事件的别称，当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和JS异步请求的完全加载。

一、浏览器渲染引擎基本流程

在这里插入图片描述

浏览器开始解析HTML文档
碰到CSS链接开始并行解析CSS文件
当碰到<script>脚本就开始加载解析<script>脚本，并阻塞html的解析
当DOM树和CSSOM解析完成后，生成renderTree
进行布局
绘制在浏览器上

CSS加载解析时不会阻塞DOM树的解析过程，这两个解析过程是可以并行的，但是CSS加载过程中是不能进行JavaScript的解析的，也就是说CSS加载过程中是会阻塞JavaScript的解析，此外因为生成Render Tree时需要CSSOM，所以在DOM Tree解析完成而CSSOM未完成时不会继续生成Render Tree。

使用异步加载的<script>标签是不会阻塞DOM解析的，当然其就不会阻塞DOMContentLoaded事件的触发，但是依旧会阻塞load事件的触发。

<script>标签本身也属于DOM结构，必须等待其加载完成之后才能触发DomContentLoaded事件（执行完同步代码就触发）。

二、First Paint 与 domReady

1.First Paint

浏览器第一次绘制页面

2.先后顺序

First Paint和DOMContentLoaded、load事件的触发没有绝对的关系，FP可能在他们之前，也可能在他们之后，这取决于影响他们触发的因素的各自时间。

为了获得更好的用户体验，渲染引擎将尝试尽快在屏幕上显示内容。它不会等到所有HTML解析完毕后才开始构建和布局渲染树。部分内容将被解析和显示，而该过程将继续处理其余部分内容，这些其余内容始终来自网络。（即html内容很多时，会先绘制一部分，然后继续解析。当html内容很少时，会等DOM和CSSOM解析完成后生成RENDER TREE 进行绘制）。

参考博文：
https://www.cnblogs.com/hongrunhui/p/8929001.html
https://www.cnblogs.com/WindrunnerMax/p/13706499.html
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow