页面渲染流程 

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，VUE，微信小程序框架...）

 

 

面试题：

用户在浏览器地址栏输入了url之后，到页面渲染出来，背后发生了什么

（请求网址对应的资源 得到资源，然后运行文档）

 

浏览器加载一份html文档时怎样加载的？

1、把标签 文本 注释 属性等等 解析为节点数（DOM Tree）

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

style标签或者link-css遇到css代码 就会把css代码解析为CSS央视结构体

遇到了src 回去加载（网络请求）资源

把上面CSS央视结构体和DOMTree 结合变成呈现树、渲染树（render Tree）

按照render tree绘制页面

 

标签：浏览器,render,渲染,tree,JS,回流,重绘,页面
来源： https://www.cnblogs.com/LIXI-/p/16498034.html