1、页面解析过程

image.png

文档解析从上至下，从左至右
（1）首先浏览器创建一块栈内存用于执行html代码，创建document对象，开始解析，创建HtmlElement对象，此时，document的readyState=“loading”

（2）从上至下解析html->head等元素
（3）解析head时会遇到link，script等外部标签
遇到link：创建线程加载css文件
遇到script（无async（异步加载）、defer（延迟加载））：创建线程加载js文件，阻塞解析进程，资源加载完后，执行脚本，继续解析文档
遇到script（async（异步加载））：创建线程加载js文件，解析文档，资源加载完后，执行脚本（同时解析文档）
遇到script（defer（延迟加载））：创建线程加载js文件，资源加载完后，解析文档完成，执行脚本
（4）继续解析文档：遇到img创建线程加载资源，文档继续解析
（5）文档解析完毕，Dom树生成，readyState=“interactive”，进入事件驱动阶段，此时开始执行DOMContentLoaded事件（$(document).ready(function(){})）
（6）等待CSS解析完生成CSSOM，结合DOM树生成render-tree
（7）回流（Layout）：浏览器根据render-tree计算节点几何信息（位置、大小）（可能是百分比）虚拟布局
（8）重绘：浏览器根据计算出的几何信息，将节点几何信息转换为相对于屏幕的绝对像素（将百分比转换为相对于屏幕的绝对像素，如屏幕1080px，元素width：50%，则元素在屏幕上大小为540px）真是布局
（9）放入GPU显示出来
（10）async资源加载执行完，img加载完，readyStae=“complete”，执行load事件

回流：根据render-tree计算节点的位置、大小，因此当位置大小发生变化后，一定会触发回流，进而重绘
如：
盒子模型相关属性
width
height
padding
margin
display
border-width
border
min-height
定位属性以及浮动
top
bottom
left
right
position
float
clear
改变节点内部文字结构
text-align
overflow-y
overflow
font-weight
font-family
font-size
line-height
vertical-align
white-space
重绘：主布局不变，属性值发生变化，如：
color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline
outline-color
outline-style
outline-width
box-shadow
参考自：https://www.cnblogs.com/qqinhappyhappy/p/11872670.html
https://segmentfault.com/a/1190000017329980