DOM--页面渲染流程

6、页面渲染流程

用户从地址栏输入网址按下回车后到页面渲染出来，发生了什么？

浏览器加载一份html文档过程：

1、把标签，文本，注释等 解析为节点数

2、解析节点数中的节点遇到了不同的元素会有不同的操作：

1. style 标签或者link-css遇到css 代码，就会把css代码解析为结构体
2. 遇到了src会去加载（网络请求）资源

3、会把2.1中的css样式结构体和1中的节点数结合变成呈现树/渲染树

4、按照Rander Tree（呈现树）绘制页面。（高薪：自行研究怎么绘制的……）

更详细的解释：

1.页面呈现过程

不同的浏览器略微会有些不同。但基本上都是类似的

①.浏览器把html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树就是html结构，里面包含了所有的html tag，包括用JS添加的元素。

②浏览器把所有样式(主要包括css和浏览器自带的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式。

③dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但有区别，render tree能