html页面解析渲染过程详述

俺把俺的学习笔记都以文章的形式分享出来啦，点开主页查看更多文章哦~

若有问题请留言或私信！

1、使用html解析器解析标签成token，并构建dom树

2、遇到link标签创建新线程发送http异步请求获取css文件，页面继续解析

3、若获取到css文件，使用css解析器解析css，页面继续解析

4、遇到style标签，使用html解析器异步解析样式，页面继续解析（可能会出现闪屏）

5、遇到script标签，若没有defer和async，阻塞页面解析，去发送请求获取js文件，获取后立即执行

6、遇到defer或async，异步请求js文件，async获取到会立即执行，defer获取后等dom解析完毕后执行

7、遇到图片等资源，异步请求资源，页面继续解析（也不会阻塞页面渲染）

8、dom和css解析完成以及js执行完成之后将dom树和css树结合生成render树

9、进行layout，计算节点几何信息（位置，大小）

10、进行paint，根据生成的几何信息，计算节点的具体像素

11、进行display，将像素发给GPU，进行页面绘制