js DOM优化相关探索

页面导航:首页 > 网络编程 > JavaScript > js DOM优化相关探索

js DOM优化相关探索

来源: 作者: 时间:2016-02-21 09:50 【

在这尝试两个方面:--DOM与js --DOM与浏览器(最近在秒味视频上学到不少,哈哈哈)一、DOM与js 1 js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的事情,这就
在这尝试两个方面:-->DOM与js
 
                            -->DOM与
 
(最近在秒味视频上学到不少,哈哈哈)
 
一、DOM与js
 
      1.js与dom的交互问题
 
      频繁的与dom交互,是一件浪费时间与金钱的事情,这就需要我们尽量改进自己的代码,让我们想做的事情尽量在js中做的差不多了在去跟dom打交道。 
 
      下面的小例子就说明了问题:
 
复制代码
 1 <!DOCTYPE >
 2 <html lang="zh">
 3 <head>
 4 <meta charset=utf-8>
 5 <title>dom优化相关</title>
 6 </head>  
 7 <style>  
 8    
 9 </style>  
10     
11 <body>
12     <div id="div1"></div>
13      <script>
14         window.onload =  function(){
15             var nDiv = document.getElementById('div1');
16             var str = '';
17 
18             /*console.time("innerHTML10000个a所用的时间");
19             //每次循环dom都与js交互,太浪费时间啦
20             for(var i=0;i<10000;i++){
21                 nDiv.innerHTML += 'a';
22             }
23             console.timeEnd("innerHTML10000个a所用的时间");*/
24 
25             console.time("获得10000个a之后innerHTML所用的时间");
26             //这种就减少了js与dom的交互,大量的循环只在js中实现
27             for(var i=0;i<10000;i++){
28                 str += 'a';
29             }
30             nDiv.innerHTML = str;
31             console.timeEnd("获得10000个a之后innerHTML所用的时间");
32 
33         }
34     </script>
35 </body>  
36 </html>
复制代码
(在chrome下)
 
 
 
 
 
这个时间的对比还是比较明显的喔。 对了,这console.time()和console.timeEnd()还挺好用的吧,其实console 还有好多亮瞎人眼的方法,可以自行google或百度脑补。
 
 
 
<------STOP  START------->:
 
   写到上面代码时,用到了window.onload,然后这里暂时说点别的,看下面的代码:
 
    
 
复制代码
1        function t(){
2             alert("1")
3             }
4         function b(){
5             alert("2")
6             }
7          window.onload =t ;
8          window.onload =b ;
复制代码
 对吧,这只会alert('2')嘛,也就是说window.onload不能同时加载多个函数,后面的会覆盖掉前面的。
 
 那怎么办呢? 这有一个简单易用的方法:
 
 
 
复制代码
 1  function t(){
 2             alert("1")
 3             }
 4   function b(){
 5             alert("2")
 6             }
 7    window.onload = function(){
 8             t();
 9             b();
10          }
复制代码
这样就可以1和2都弹窗了。
 
 
 
不过更加庆幸的是,我们还有更好的方法来为 一个事件指派多个处理程序了那就是addEventListener和attachEvent:
 
复制代码
 1        if(window.attachEvent){
 2             window.attachEvent('onload',function(){
 3                 alert('ie1');               
 4             });
 5             window.attachEvent('onload',function(){
 6                 alert('ie2');               
 7             });
 8         }else{
 9             window.addEventListener('load',function(){
10                 alert('1');
11             });
12             window.addEventListener('load',function(){
13                 alert('2');
14             });
15         }
复制代码
就是ie中可能执行顺序会有点不一样而已啦。
 
<------STOP  END------->
 
 
 
   2.在于dom交互时innerHTML与dom方法(像appendChild()这样的方法)之间的效率比较:
 
复制代码
 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset=utf-8>
 5 <title>dom优化相关</title>
 6 </head>  
 7 <style>  
 8    
 9 </style>  
10     
11 <body>
12     <div id="div1"></div>
13     <ul id="oul"></ul>
14     <script>
15 
16         window.onload =  function(){
17             var UL = document.getElementById('oul');
18             var str='';
19             
20             
21             console.time('dom操作所用时间');
22             for(var i=0;i<10000;i++){
23                 var LI = document.createElement('li');
24                 UL.appendChild(LI);
25             }
26             console.timeEnd('dom操作所用时间');
27 
28             console.time('innerHTML操作所用时间');
29             for(var i=0;i<10000;i++){
30                 str += '<li></li>';
31             }
32             UL.innerHTML = str;
33             console.timeEnd('innerHTML操作所用时间');        
34         }
35 
36 
37  
38     </script>
39 </body>  
40 </html>
复制代码
下面是时间对比:
 
chrome:
 
 
 
FF:
 
 
 
奇异的事实证明两个浏览器下都是dom方法运行速度比较快。在我以前的认知里面两个浏览器的表现不应该是一致的,感觉ff下innerHTML应该会比dom快的。
 
此处也求高人指点。
 
 
 
 3.我们知道与dom相关的行为都会牵扯到时间问题,那么怎么减少dom操作呢?
 
    ---->使用节点克隆
 
  
 
复制代码
 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset=utf-8>
 5 <title>dom优化相关</title>
 6 </head>  
 7 <style>  
 8    
 9 </style>  
10     
11 <body>
12     <div id="div1"></div>
13     <ul id="oul"></ul>
14     <script>
15        window.onload =  function(){
16             var UL = document.getElementById('oul');
17             var str='';
18             
19            
20             /*console.time('dom操作所用时间');
21             for(var i=0;i<10000;i++){
22                 var LI = document.createElement('li');
23                 LI.innerHTML = 'li';
24                 UL.appendChild(LI);
25             }
26             console.timeEnd('dom操作所用时间');*/
27 
28             
29             console.time('克隆节点所用时间');
30             var LI = document.createElement('li');
31             LI.innerHTML = 'li'; 
32             for(var i=0;i<10000;i++){
33                 var newLi = LI.cloneNode(true);
34                 UL.appendChild(LI);
35             }
36             console.timeEnd('克隆节点所用时间');
37 
38                    
39         }
40 
41 
42        
43     </script>
44 </body>  
45 </html>
复制代码
虽然相差不大,但是还是不一样的:
 
chrome:
 
 
 
 
 
  --->尽量使用局部变量
 
       下面两种写法也是会影响效率的,因为每次都要获取aLi.length集合也是要代价的,保存成局部变量会好些那。
 
          for(var i=0;i<aLi.length;i++){
                aLi[i].innerHTML = 'li';
            }
            var  len = aLi.length;
            for(var i=0;i<len;i++){
                aLi[i].innerHTML = 'li';
            }
在上面添加10000个节点例子中尝试:
 
 
 
    同样的下面两种写法也是有区别的:
 
  
 
复制代码
            var Div = document.getElementById();
            var LI = document.getElementById();
            var Input = document.getElementById();
            //改成下面这样会比较好
            var doc = document;
            var Div = doc.getElementById();
            var LI = doc.getElementById();
            var Input = doc.getElementById();
复制代码
 
 
 ---->还有就是尽量只是用获取元素节点的方法:
 
   
 
复制代码
            childNodes -->元素节点、文本节点
            children--> 元素节点
             (利用querySelectorAll)
            var oul  = document.getElementById('uli');
            var ali = oul.getElementById('li');
            -->
            var aLi = document.querySelectorAll('#uli li');
复制代码
 
 
二、dom与浏览器
 
 
 
    1.添加操作(尽量在appendChild前添加操作)
 
复制代码
 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset=utf-8>
 5 <title>dom优化相关</title>
 6 </head>  
 7 <style>  
 8    #div1 {
 9      width: 100px;
10      height: 100px;
11      background: red;
12      position: absolute;
13    }
14 </style>  
15     
16 <body>
17     <div id="div1"></div>
18     <ul id="oul"></ul>
19     <script>
20          window.onload = function(){
21             var oul = document.getElementById('oul');
22           
23             console.time('dom操作时间');
24             for(var i=0;i<10000;i++){
25                 var oli = document.createElement('li');
26                 //注意下面两句的位置
27                 //oul.appendChild(oli);
28                 //oli.innerHTML = 'li';
29                 oli.innerHTML = 'li';
30                 oul.appendChild(oli);
31                 
32               }
33             }
34             console.timeEnd('dom操作时间');
35          }
36 
37     </script>
38 </body>  
39 </html>
复制代码
还是有一定的差别喔,可以自己动手试一下。
 
 
 
   2.合并dom操作(利用cssText)
 
复制代码
 window.onload = function(){
            var oul = document.getElementById('oul');
          
            console.time('dom操作时间');
            for(var i=0;i<10000;i++){
                var oli = document.createElement('li');
                //事实上我们总以为下面第二种方法会更好些,时间会更短,但是,分别在FF和chrome中测试的话,还是有点奇妙的。(chrome中神奇的第二种更快些)
                oli.style.width = '100px';
                oli.style.height = '100px';
                oli.style.background = 'red';
                //oli.style.cssText = 'width:100px;height:100px;background:red';
            }
            console.timeEnd('dom操作时间');
        }
复制代码
 
 
  3.缓存布局信息:
 
复制代码
window.onload = function(){
            var oDiv = document.getElementById('div1');
            var l = oDiv.offsetLeft;
            var t = oDiv.offsetTop;
 
            //setInterval(function(){
            //    oDiv.style.left = oDiv.offsetLeft + 1 + 'px';
            //    oDiv.style.top = oDiv.offsetTop + 1 + 'px';
            /
Tags:

文章评论


<