网站地图    收藏    合作   

主页 > 前端 > javascript >

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框架的基础


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论