1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title></title>
    6.     </head>
    7.     <body>
    8.     <!-- 
    9.      前言
    10.         重绘 当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为重绘（Repaint)。
    11.         重绘触发场景
    12.             设置元素的透明度；
    13.             设置元素的背景色，字体颜色；
    14.             设置元素的可见性。
    17.         重排 当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫重排（Reflow）。
    19.         重排触发场景
    20.             全局范围：从根节点html开始对整个渲染树进行重新布局；
    21.             局部范围：对渲染树的某部分或某一个渲染对象进行重新布局（DOM节点几何信息不曾改变，仅内部进行重排）；
    22.         备注 重绘不一定导致重排，但重排一定会导致重绘。
    24.         性能优化:
    25.                 重排的代价是高昂的，会破坏用户体验，并且让UI展示非常迟缓。通过减少重排的负面影响来提高用户体验的最简单方式就是尽可能的减少重排次数，重排范围。
    27.                 减少重排范围：
    28.                 当重排无可避免时，尽量避免全局范围的重排，进行局部范围的重排，尽量以局部布局的形式组织html结构，尽可能小的影响重排的范围。
    30.                 尽可能在低层级的DOM节点上进行修改，避免通过父元素修改改变内部元素。
    31.                 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。
    33.                 减少重排次数：
    34.                 样式集中改变，通过更改类名而不是直接修改样式或设置属性。
    36.                 减少样式改变的次数，过滤修改过程中无必要的操作。
    38.                 分离读写操作，DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。（这样多个写操作只会触发一次重排）
    40.                 将 DOM 离线
    42.                 使用 display:none，元素便不会再存在在渲染树中，相当于将其从页面上“拿掉”，我们之后的操作将不会触发重排和重绘，添加足够多的变更后，通过 display属性显示（另一次重排重绘），这样多次的重排重绘缩减成两次而已。
    43.                 通过 documentFragment 创建一个 dom 碎片,在它上面批量操作 dom，操作完成之后，再添加到文档中，这样只会触发一次重排。
    44.                 复制节点，在副本上工作，然后替换相应节点。
    45.                 使用 absolute 或 fixed 布局，使它脱离文档流，避免引起父元素及后续元素大量的回流。
    47.                 缓存布局信息。
    49.                 优化动画
    51.                 把动画效果应用到 position属性为 absolute 或 fixed 的元素上，这样对其他元素影响较小，其次减少相应动画流畅性，否则Layout就会过于频繁，大量消耗CPU资源。
    52.                 启用GPU加速GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。
    53.      -->
    55.      <div id="app">
    56.          云测试
    57.      </div>
    59.      <style type="text/css">
    61.      </style>
    62.     </body>
    65.     <script type="text/javascript">
    66.         var s = document.body.style;
    67.         s.padding = "2px"; // 回流+重绘
    68.         s.border = "1px solid red"; // 再一次 回流+重绘
    69.         s.color = "blue"; // 重绘
    70.         s.backgroundColor = "#ccc"; // 重绘
    71.         s.fontSize = "14px"; // 再一次 回流+重绘
    72.         document.body.appendChild(document.createTextNode('abc!'));// 添加node，再一次 回流+重绘
    74.         /*
    75.         *    因为 JavaScript 可以同时修改 DOM 和 CSSOM
    76.         *    由于浏览器不确定特定的JavaScript会做什么，所以它采取的预防措施是停止整个DOM构造，一般情况我们会将JavaScript
    77.         *    放到页面的底部，等页面要渲染结束再引进来，JavaScript是影响回流和重绘的关键。
    78.         */
    80.        // 避免的方法一  样式集中改变   通过class和cssText进行集中改变样式
    81.        let el = document.getElementById('app');
    82.        console.log(el)
    83.        // 未优化的代码
    84.        var left = 10;
    85.        var top = 10;
    86.        el.style.left = left + "px";
    87.        el.style.top = top + "px";
    88.        // 优化后的代码
    89.        el.className += " className";//动态修改class
    90.        el.style.cssText += "; left: " + left + "px; top: " + top + "px;";//通过cssText一次性添加
    92.        // 避免的方法二 缓存布局信息
    93.        // 未优化代码 强制刷新 触发两次回流
    94.        el.style.left = el.offsetLeft + 1 + 'px';
    95.        el.style.top = el.offsetTop + 1 + 'px';
    96.        // 优化的代码 缓存布局信息 相当于读写分离
    97.        var curLeft = el.offsetLeft;
    98.        var curTop = el.offsetTop;
    99.        el.style.left = curLeft + 1 + 'px';
    100.        el.style.top = curTop + 1 + 'px';
    102.     </script>
    103. </html>