标签：浏览器 render 渲染 tree JS 回流 重绘 页面
页面渲染流程
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。