javascript操作DOM之性能优化-自学php网

javascript操作DOM之性能优化

来源：未知时间：2021-12-19 18:23 作者：小飞侠阅读:次

[导读] javascript操作DOM之性能优化什么是DOM? 用于操作XML和HTML文档的应用程序 Dom节点 2. Dom树 3.Dom API DOM优化浏览器会把js和dom独立实现，js每次操作dom，都会增加一次耗时，为了提高dom性能，...

javascript操作DOM之性能优化

什么是DOM?

用于操作XML和HTML文档的应用程序

Dom节点 2. Dom树 3.Dom API

DOM优化

浏览器会把js和dom独立实现，js每次操作dom，都会增加一次耗时，为了提高dom性能，就要尽可能减少js对dom的操作，

以下是两个测试

<script>
        window.onload=function(){
            var div=document.getElementById('div');
            var str='';
            console.time('test1');
            for(var i=0;i<5000;i++){
                div.innerHTML+='a';
            }
            console.timeEnd('test1');//FireFox下 测试时间152ms
            console.time('test2');
            for(i=0;i<5000;i++){
                str+='a';
            }
            div.innerHTML=str;
            console.timeEnd('test2');//FireFox下 测试时间1.36ms
        };
    </script>
</head>
<body>
<div id="div"></div>
</body>

可以明显看出，test2只操作了一次dom，性能提高了很多

减少DOM操作的方法：

使用节点克隆 node.cloneNode()代替创建新的重复节点

使用局部变量代替访问节点集合，例如

var doc=document;

var div=doc.getElementById('div');

var input=doc.getElementById('input');

尽量用只获取元素节点的获取方式,例如使用children代替childNodes firstElementChild代替firstChild

选择器API: 使用querySelectorAll(除IE8以下的浏览器都得到良好支持)

DOM与浏览器

重排：改变页面内容的过程

重绘：重排结束之后，浏览器显示内容的过程

可以通过以下的方式减少重排和重绘的过程，从而提升浏览器性能

尽量在appendChild（）前面进行操作

for(var i=0;i<50000;i++){
    var li=document.createElement('li');
    //不推荐
    ul.appendChild(li);
    li.innerHTML='li';
 }
for(i=0;i<5000;i++){
     var li=document.createElement('li');
     //推荐
     li.innerHTML='li';
     ul.appendChild(li);
}

使用cssText合并dom操作

缓存布局信息. 例如：

window.onload = function(){
    var oDiv = document.getElementById('div1');
    var L = oDiv.offsetLeft;
    var T = oDiv.offsetTop;
    setInterval(function(){
        L++;
        T++;
        oDiv.style.left = L + 'px';
        oDiv.style.top = T + 'px';
    },30);
};

利用文档碎片

window.onload = function(){
    var oUl = document.getElementById('ul1');
    var oFrag = document.createDocumentFragment();
    for(var i=0;i<5000;i++){
        var oLi = document.createElement('li');
        oFrag.appendChild(oLi);
    }
    oUl.appendChild(oFrag);
};

DOM与事件

通过事件代理（事件委托）来提升浏览器性能

console.time('test1');
      for(i=0;i<oLi.length;i++){
           oLi[i].onclick=function(){
                  alert(1);
               };
        }
        console.timeEnd('test1');//火狐下测试 18ms

//下面是事件代理绑定事件

console.time('test2');
       oUl.onclick=function(e){
             e=e || event;
             var t=e.target || e.srcElement;
             if(t.nodeName.toLowerCase()=='li'){
                 t.onclick=function(){
                     alert(1);
                };
            }
        };
 console.timeEnd('test2');//火狐下测试 1.54ms

DOM与前端模板

更好的对逻辑和视图进行分离，MVC框架的基础

js生成唯一id，js生成uuid

js性能调优检测

子栏目

javascript操作DOM之性能优化

最新评论

添加评论

更多文章推荐

添加评论