不懂DOM渲染机制,确定能写出优质代码?

---

前言: 为什么要明白浏览器渲染机制

• 知道浏览器的加载，可以在引用外部样式文件，JS时，可以放在合适的位置,最快加载完毕。
• 明白浏览器如何进行解析,可以在构建DOM结构，组织CSS选择器的时候，以最优的写法，提高浏览器的解析速率。
• 了解浏览器如何进行渲染及渲染的过程,可在编写JS时，可以减少“重绘”，“重新布局”的消耗。

---

一、几种DOM的认识

1 DOM是什么

• DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。
• CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。
• Render Tree: DOM和CSSOM合并后生成Render Tree，如下图：
  
• Layout: 计算出Render Tree每个节点的具体位置。
• Painting：通过显卡，将Layout后的节点内容分别呈现到屏幕上.

2 加载过程

• 浏览器获取html文件后,会自上而下的加载,并进行解析和渲染.
• 加载就是获取文件的过程,遇到css和img则会发送异步请求,该请求不会影响HTML文件的加载.
• 如果遇到Javascript文件，HTML文件会挂起渲染的进程，等Js文件加载完毕后，再继续进行渲染。
• JavaScript可能会修改DOM，所以必须等待,否则可能导致后续HTML资源加载的浪费.
• js文件加载完毕后，HTML才会再继续渲染，这也是将js文件写在底部原因。ES6中async和await可实现js的异步加载.

二、浏览器渲染流程

1.浏览器的请求渲染过程

1. 当用户输入URL时，浏览器就会向服务器发送请求.
2. 收到服务器响应内容后，浏览器的HTML解析器，会将HTML文件解析成DOM树，DOM树的构建是深度遍历的过程，当前节点的子节点都构建完成后，才会去构建当前节点的下一个兄弟节点。
3. 将CSS解析成CSSOM树（CSS Rule Tree）
4. 根据DOM树和CSSOM树，来构建Render Tree（渲染树），其并不等于DOM树，像hidden或display:none的东西，就没必要放在渲染树中了。
5. Render Tree告诉浏览器网页中有哪些节点，以及节点的CSS定义和它们的从属关系，下一步操作就是Layout,就是计算出每个节点在屏幕中的位置。
6. Layout后，浏览器已经知道哪些节点要显示，及节点的CSS属性是什么，每个节点在屏幕中的位置是哪里，就进入了最后一步painting,按照算出来的规则，通过显卡，把内容画到屏幕上。

2 回流和重绘,影响页面渲染速率

1. 回流（reflow）

当浏览器发现页面某个部分发生了变化影响了布局，需要倒回去重新渲染，该过程称为回流。

2. 重绘（repaint）

如果只是改变了某个元素的边框颜色、字体颜色、背景色等不影响它周围或内部布局的属性，将只会影响浏览器的重绘。

3. 变化

• 当元素的几何属性(宽或高)发生变化，浏览器需要重新计算元素的几何属性，同时其他元素的几何属性和位置也会受到影响。
• 浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树，这个过程称为重排。完成重排后，浏览器会重新绘制受到影响的部分到屏幕，这个过程称为重绘。

三、高性能Javascript DOM编程

1 这里好有一比

用js进行DOM操作的代价很昂贵,所以要尽量少的用js操作DOM.

• 把DOM和ECMAScript各自想象为一个岛屿，它们之间用收费桥梁链接，ECMAScript每次访问DOM，都要经过这座桥，并交纳“过桥费”，访问DOM的次数越多，费用也就越高。
• 因此，推荐的做法是尽量减少过桥的次数，努力呆在ECMAScript岛上。那么怎样才能少出岛,实现高效呢?