前端性能优化:requestAnimationFrame方式高效dom操作！

高效插入方案

• 使用原生dom操作插入dom的时候，我们一般使用document.createElement(ele),创建好了以后，通过appendChild方法，插入到容器元素，这样的操作，平常很常见吧！
• 但是对于那种海量插入的需求，比如一次插入1、2w的元素，这个时候可能有的同学能想到创建文档碎片的方式，将dom操作放到文档碎片当中，进行插入的方式！这样是一个优化的方式，但是这样优化的还不够彻底！

以上两种方式进行速度对比

var list = document.getElementById("list");
    var count = 0;
    function render(){
        var box = document.createDocumentFragment();
        while(count <= 30000){
            var li = document.createElement("li");
            li.innerHTML = `文档碎片插入dom方式${count}`;
            box.appendChild(li);
            count++;
        }
        if( count >= 30000){
            list.appendChild(box);
        }
    }
    function render1(){
        while(count <= 30000){
            var li = document.createElement("li");
            li.innerHTML = `原生操作插入dom方式${count}`;
            list.appendChild(li);
            count++;
        }
    }

原生与文档碎片两种方式(频繁的触发renderTree回流与重绘机制)插入，比较要求用户的电脑性能，所以两种方式在进行批量的dom操作的时候，都不建议使用

性能优化终极方式—requestAnimationFrame

• 目前现代浏览器都支持createDocumentFragment方法高效的插入dom元素，并且这个方式的插入是按60Hz(人眼能分辨的界限频率)的频率插入。
• DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。
  因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。
• 下面是实例代码：

 ;(() => {
        //使用文档随便与request方式结合 插入dom 方式
        //每4个li插入到1个文档碎片中 当到达目标数据是停止递归即可
        var count = 30000;
        var step = 4;
        var inertCount = 30000 / 4;
        var start = 0;
        function render(){
            //当需要插入次数够了的话  结束
                //创建文档碎片
                var box = document.createDocumentFragment();
                for(var i = 0 ; i < 4;i++){
                    var li = document.createElement("li");
                    li.innerText = (start * step) + i + 1;
                    box.appendChild(li);
                }
                //插入到ul里面
                list.appendChild(box);
                start++;
                animate();
        }
        function animate(){
            if( start <= inertCount ){
                //不断条 通过requestAnimationFrame 将每次的回流重绘 合并到一个操作当中
                window.requestAnimationFrame(render);
            }
        }
        animate();
    })();