浏览器是这么解析文档资源并渲染页面的流程是咋样?

1.浏览器通过HTMLParser(HTML解析器)根据深度遍历的原则把HTML解析成DOM Tree(dom树) || 将HTML解析出DOM Tree

2.浏览器通过CSS Parser(CSS解析器)将CSS解析成CSS Rule Tree(CSSOM Tree --- css规则树) || 将CSS解析出CSS Tree

3.浏览器将JavaScript通过DOM API或者CSSOM API 将JS代码解析并应用到布局中,按要求呈现响应的结果。|| js引擎专门处理js脚本的虚拟机,解析js代码 并把 操作 DOM Api、CSSOM Api的解析到布局中,从而按程序要的要求呈现相应的结果

4.根据DOM Tree(dom树)和CSSOM Tree(cssom 树)来构造render Tree || 生成渲染树

5.layout || reflow: 重排(别名回流),当render tree 中任意一节点的几何尺寸发送变化,render tree就会重新布局,重新来计算所有节点在屏幕的位置 || 渲染中的一种行为。当rendertree中任一节点的几何尺寸发生改变了,render tree都会重新布局。

6.repaint(重绘):当render tree 中任一元素样式属性(几何尺寸没有改变)发送改变时,render tree 都会重新画,比如字体颜色,背景颜色等变化 || 渲染中的一种行为。render tree中任一元素样式属性(几何尺寸没改变)发生改变了,render tree都会重新画,比如字体颜色、背景等变化。

7.paint(遍历):遍历render tree ,并调动硬件图形API来绘制每个节点

浏览器解析文档资源并渲染_javascript

参考:

浏览器渲染页面过程剖析(​​https://www.jianshu.com/p/32ca5f1c0768​​)