浏览器渲染页面的流程

1、浏览器的功能

• 浏览器的主要功能就是将用户所选择的web资源在浏览器页面上呈现出来，它需要从服务器上请求资源，并将其显示在浏览器窗口中。

• 用户用URI（Uniform Resource Identity 统一资源标识符）来指定所请求的资源的位置，通过DNS查询，将网址转换为IP地址。

2、浏览器渲染流程

• 浏览器的渲染大致分为四个步骤

1. 解析HTML代码，创建出对应的DOM Tree

浏览器的HTML解释器会将HTML文本解析成一个DOM树，构建的过程是一个深度遍历过程，它会把当前节点的所有子节点都构建好之后，才会去构建当前节点的下一个兄弟节点，直到将所有的标签都遍历完成。

1. 解析CSS代码，计算出最终的样式结果，构建CSSOM Tree

​ 给各个元素对象加上对应的样式信息，计算其在浏览器中占据的空间大小，这样就可以为接下来的布局提供依据。

1. 结合DOM树和CSSOM树===>生成渲染树Rendering Tree

   ​ 渲染树类似于DOM树，但是也有差别，DOM树完全和html标签一一对应，而RenderingTree会忽略掉不需要渲染的元素，比如head、display：none的元素等。而且一大段的文本中的每一行在渲染树中都是一个独立的节点，渲染树中的每一个节点都对着它的css属性。

2. 绘制页面，浏览器依据须渲染树直接把页面绘制到浏览器窗口屏幕上。

   ​ 这个时候浏览器已经知道了那些节点需要你去渲染，节点之间的从属关系也很明朗，浏览器根据渲染树来绘制页面。

3、阻止渲染

​ 1. 浏览器主要由JS引擎和渲染引擎这两部分组成，渲染引擎会先加载页面，逐步完成以上步骤，但是当遇到link标签或者script标签时，渲染就会被中断，转去执行导入、加载或者DOM操作（JavaScript代码）。

• 默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。

• 在渲染过程中，当遇到JavaScript时，就会阻塞DOM的构建，它会去请求js脚本执行完成后才继续渲染。

  ​ 因为JavaScript不仅可以读取或者修改DOM属性，还可以读取和修改CSSOM属性，存在阻塞的CSS资源时，浏览器会延迟JavaScript的执行和DOM的构建

  当浏览器遇到script标签时，就会先停止DOM的构建，直到js脚本执行完毕
• JavaScript可以查询和修改DOM与CSSOM
• CSSOM构建时，JavaScript执行将暂停，直到CSSOM就绪

4、重绘（repaint）和回流（reflow）

1. 重绘

   部分节点需要更新，比如颜色背景的改变，就会发生重绘，它仅改变不影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器会根据元素的新属性重新绘制一次
   • 所以重绘不会回流，

2. 回流

   渲染树的一部分必须要更新，并且节点的尺寸发生了变化，这就需要触发回流，重新进行布局。
   • 当进行回流重新布局，就一定会重新渲染元素，所以回流必定会导致重绘

下面任何操作都会触发重绘或者重排：

• 增加或删除DOM节点设置 display: none;（重排并重绘） 或visibility: hidden（只有重排）
• 移动页面中的元素
• 增加或者修改样式用户
• 改变窗口大小
• 滚动页面等

5、减少重绘和重排

1. 不要一个一个地单独修改属性，最好通过一个classname来定义这些修改
2. 把对节点的大量修改操作放在页面之外用 documentFragment来做修改clone 节点，在clone之后的节点中做修改，然后直接替换掉以前的节点通过 display: none 来隐藏节点（直接导致一次重排和重绘），做大量的修改，然后显示节点（又一次重排和重绘），总共只会有两次重排。
3. 不要频繁获取计算后的样式。如果你需要使用计算后的样式，最好暂存起来而不是直接从DOM上读取。
4. 总的来说，总是考虑到渲染树的存在，考虑到你的一次修改会导致多大的绘制操作。比如绝对定位元素的动画就不会影响其他大部分元素

• 点赞
• 收藏
• 分享
• 文章举报