您的位置：首页 > Web前端 > HTML

循环调用innerHTML属性时进行性能优化1000多倍

2019-06-15 18:10 1571 查看
                     innerHTML是一个JavaScript访问dom的API,由于js和dom时两个相互独立的功能只要通过接口彼此连接，就会产生消耗。
所以访问dom元素的有代价的，修改元素则更为昂贵，因为他会导致浏览器重新计算页面的几何变化。
最坏的情况是在循环中访问或修改元素，尤其是对HTML元素集合循环操作。
这是下面两次写法循环15000次在谷歌浏览器上的差距，你没有看错，这两种写法的差距能到达1000多倍 
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <div id="here">1</div>        <script>            function innerHTMLLoop(){                console.time();                for(var count = 0; count <15000; count++){                    document.getElementById('here').innerHTML += 'a';                }                console.timeEnd();            }            innerHTMLLoop();            function innerHTMLLoop1(){                console.time();                var content = '';                for(var count = 0; count <15000; count++){                    content += 'a';                }                document.getElementById('here').innerHTML += content;                console.timeEnd();            }            innerHTMLLoop1()        </script>    </body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
           
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航