解析HTML标签, 构建DOM树
首先,浏览器在请求得到HTML文档后,会把HTML文档解析成DOM树,对于css和图片浏览器会并行加载,这个请求是异步的,并不会影响html文件。但是加载的过程中要是遇到js文件,html的渲染进程会被挂起,等待js加载完之后再继续渲染html文件;由于js可能会修改DOM结构,所以可能导致后面加载的html还要重新渲染,这样就浪费了前面加载的时间,所以js文件一般都放在页面的底部;
生成DOM树的过程中浏览器会从上到下遍历每个节点,包括元素节点、属性节点、文本节点;
解析CSS标签, 构建CSSOM树
加载完CSS文件之后,就开始构建CSSOM
把DOM和CSSOM组合成渲染树(render tree)
等CSSOM构件完成之后,会把它和DOM结合起来,一起生成render tree
Layout:在渲染树的基础上进行布局, 计算每个节点的几何结构
生成render tree之后,浏览器就知道了页面中有哪些节点,节点的从属关系,以及相应节点的CSS样式;这个时候浏览器就会计算每个节点几何结构也就是节点的位置;
Painting:把每个节点绘制到屏幕上
在计算完每个节点的几何结构之后,浏览器就知道哪些节点需要显示或隐藏,每个节点摆放的位置以及每个节点的css样式;这个时候就把每个节点按照计算出来的规则绘制到屏幕上