解析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样式；这个时候就把每个节点按照计算出来的规则绘制到屏幕上
网友评论