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

最新推荐文章于 2021-06-17 02:24:09 发布

v多好多好

最新推荐文章于 2021-06-17 02:24:09 发布

阅读量253

点赞数

本文链接：https://blog.csdn.net/qq_44939874/article/details/89670634

版权

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