浏览器渲染机制

1. 浏览器应用HTML解析器对HTML文档进行解析生成 DOM 树
    应用CSS解析器对CSS代码进行解析生成 CSSOM 树
    两者合并生成  render tree

2. 生成render tree之后，会去执行js代码,如果js代码有操作dom,就会立即挂起js，然后去更新DOM，更新完毕之后再执行js，再挂起...直至js不再涉及DOM操作，只要js操作了DOM，就会触发render tree的修改， render tree修改会导致layout tree 的修改，这一过程是非常耗时的，其中就涉及到了重排、重绘。layout tree不再变化之后就会通知UI线程，进行paint。这就是整个渲染机制的流程。

3. 重排：当render tree中一部分，因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这一过程就叫做重排，重排之后必定会导致浏览器重新绘制页面，导致重绘。

4. 重绘：例如当元素内文字或者颜色变化，就会进行重新渲染，这个过程称为重绘。

5. 因为重排必定导致重绘，所以我们的日常开发应尽量追求，避免重排，减少重绘。

6. MDN官方文档上记录到UI线程和JS线程是同属一个线程叫做主线程，网上很多人又说是不同的线程，鱼龙混杂，但是肯定是相信官方文档。其实也不重要，大家全都认同UI线程和JS线程是互斥的，因此我们前端人员在开发中才要求我们尽量减少dom操作，DOM操作时会挂起js，如果js挂起过久，js执行时间过长，就会造成页面卡顿，给用户带来非常不好的体验。

7. 浏览器渲染机制总结

        （1）解析生成DOM 树、CSSOM树

        （2）结合生成 渲染树 render tree

          (3)  结合js生成布局树 layout tree 

          (4)  最后进行绘制 paint