DOM--页面渲染流程
文章目录
- 6、页面渲染流程
- 1.页面呈现过程
- 2.回流与重绘
- 3.常见的回流和重绘操作
6、页面渲染流程
用户从地址栏输入网址按下回车后到页面渲染出来，发生了什么？
浏览器加载一份html文档过程：
1、把标签，文本，注释等 解析为节点数
2、解析节点数中的节点遇到了不同的元素会有不同的操作：
- style 标签或者link-css遇到css 代码，就会把css代码解析为结构体
- 遇到了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能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。但是visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局，会占有位置。
④一旦render tree构建完毕后，浏览器就根据render tree来绘制页面。
呈现树中绘制的节点文档树中一定有，没有的也可能有！！！
2.回流与重绘
① 当render tree中因为元素的数量,尺寸，布局，隐藏等改变而需要重新构建。这就称为回流或者回档(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
②当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
回流必将引起重绘，而重绘不一定会引起回流。
3.常见的回流和重绘操作
任何对render tree中元素的操作都会引起回流或者重绘
①添加、删除元素(回流+重绘)
② 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
③ 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)
④ 对style的操作(对不同的属性操作，影响不一样)
⑤ 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
④重绘与回流操作的注意点
//重绘与回流操作的次数越多,计算机的性能消耗越大
进行dom操作的时候,就要考虑
综上：
程序执行时，常常会操作页面，会引起重绘或者回流，频繁的操作会造成页面性能降低，如：页面卡顿，迟钝，手机发烫等，因此操作页面时，尽量避免高频重绘，或者使用框架（MVVM）。