前端性能之重排和重绘

 前端性能之重排和重绘 https://www.cnblogs.com/soyxiaobi/p/9963019.html

 从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系 https://segmentfault.com/a/1190000013662126

1：什么是重排、重绘
当DOM的变化引发了元素几何属性的变化,比如改变元素的宽高,元素的位置导致浏览器不得不重新计算元素的几何属性,并重新构建渲染树,这个过程为重排.完成重排后,要将重新构建的渲染树渲染到屏幕上,这个过程就是重绘.
简单地说，重排负责元素的几何属性更新，重绘负责元素的样式更新。而且，重排必然带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景（色、图），这个就不涉及元素的几何属性，所以只发生重绘。
2：重排(回流)触发机制
（1）添加或删除可见的DOM元素
（2）元素位置改变
（3）元素本身尺寸发生改变
（4）内容改变
（5）页面渲染器初始化
（6）浏览器窗口大小发生改变
3：如何进行性能优化
（1）修改样式使用CSSText属性 eg: var el = document.querySelector('.el'); el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';
（2）切换class类名 也可以减少重排
（3）批量修改DOM
    1）可以先隐藏元素(display:none),进行修改后,然后再显示该元素
    2）使用文档片段document.createDocumentFragment()创建,再进行添加
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>fragment</title>
    </head>
    <body>
        <div id="father">
            
        </div> 
        <script>
            let fragment  = document.createDocumentFragment()
            for(let i = 0;i < 10;i++){
                let div = document.createElement('div')
                div.className = 'div' + i
                div.innerHTML = 'div' + i
                fragment.appendChild(div)
            }
            document.getElementById('father').appendChild(fragment)
        </script>
    </body>
</html>
    3)  将原始元素拷贝到cloneNode()一个独立的节点中,操作该节点然后覆盖原始元素
let old = document.querySelector('#mylist');
let clone = old.cloneNode(true);
appendNode(clone, data);
old.parentNode.replaceChild(clone, old);

　　

posted @ 2020-05-26 14:15  671_MrSix  阅读(226)  评论(0)  编辑  收藏  举报