浏览器渲染的过程主要包括以下五步
-
构建DOM树,浏览器将获取的HTML文档解析成DOM树。
-
构建CSSOM树,处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。
-
样式,将DOM和CSSOM生成一颗渲染树
(REndering tree)
。 -
布局,在渲染树上运行布局
layout
计算每个节点的几何体和每个元素包含的内容。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为回流。 -
绘制,将渲染树的各个节点绘制到屏幕上,称为绘制
painting
。
预加载分析器