重绘和回流

1，浏览器的渲染机制

    1、处理HTML形成一个dom树

    2，处理css形成一个css渲染树

    3，html和css形成一个dom渲染树

    4，根据渲染树进行布局，计算每个节点的属性 

    5，调用GPU绘制，合成一个图层，显示在屏幕上。

  2，重绘和回流的定义

      重绘的是外观改变、布局不变，例如color的属性等

      回流是布局有所改变或者几何属性需要改变称作回流

      重绘不会引起回流，回流会引起重绘

      有几下种情形引起性能的问题

         1,当window改变的时候 

         2，当字体变化的时候

         3，改变和删除样式

         4，文字改变

         5，定位和浮动改变

         6，盒模型 

     1，重绘和回流跟evenloop有一定的关系

       当事件轮询的微任务执行完成之后，会判断document是否需要更新，浏览器的刷新频率的60hz,代表16ms才更新一次

       1，然后判断是否有resize 和sroll的操作，它是16ms才执行一次， 自带节流额功能

       2，然后判断是否有media  事件

       3， 更新动画，发送事件

       4， 判断是否有全屏的事件

       5， 执行requestaninateFrame，最新的浏览器支持动画

       6, 执行 inserSectionObserrve,这个属性的可用于懒加载，在可见的屏幕里进行执行，兼容性不好，safar不支持

       7，更新界面

     

 3，防止重绘和回流

   1，对与animate  动画属性top，left 可以使用transform的transllate ，可以提供gpu加速，防止回流

   2，用visibility代替display:none：防止回流

   3，使用requestAnimateFrame防止频率的回流

   4，尽量不要使用table,改变一个属性，可以引起回流

   5， 不要把节点的属性的在for循环里当成变量

   6，频繁运行的动画变成图层，例如video