关于字符串拼接与文档碎片（性能优化）

最新推荐文章于 2021-08-06 19:23:22 发布

mandyucan

最新推荐文章于 2021-08-06 19:23:22 发布

阅读量615

点赞数

分类专栏： js 文章标签：性能优化

本文链接：https://blog.csdn.net/Mandyucan/article/details/80779649

版权

js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

想在div里面往span后面追加这个ul

<body>
    <div id="haha">
        <span></span>
    </div>
    <script>
        window.onload = function () {
            var s = '<ul><li>a</li><li>b</li></ul?';
            var ha = document.getElementById('haha');
            ha.innerHTML += s;
        }
    </script>
</body>

可以使用innerHTML += 字符串的方式
如果innerHTML = 字符串了，那就覆盖了，+=就可以继续往后追加；

但是在实际的生产中一般不这么写，以下是实际中常用的写法

<body>
    <div id="haha">
        <span></span>
    </div>
    <script>
        window.onload = function () {
            var s = document.createElement('ul');
            for (var i = 0; i < 3; i++) {
                var temp = document.createElement('li');
                temp.innerHTML = 'a';
                s.appendChild(temp);
            }
            var ha = document.getElementById('haha');
            ha.appendChild(s);
        }
    </script>
</body>

总结：

createElement和nnerHTML的区别：

在实际中我们一般使用createElement的方式，因为createElement的方式是直接操作dom树，而innerHTML是需要解析字符串的，其间有一个解析的过程；

性能上，createElement和innerHTML在很多浏览器中是有差别的；

如果页面小还好，但要是有大量内容和节点的页面，性能上的差距就会体现出来了；

chrome有着非常优秀的js引擎，所以性能比较好，在createElement和innerHTML的方面的差距稍小一些；但是放到火狐或者ie之类的浏览器上，差距就会大一些。

在插入内容少的时候，实际上现代浏览器innertHTML速度要快一些，但是由于都很快，所以这点微弱的差距就可以忽略不计了；

而且innerHTML和createElement还有一个区别

innerHTML里面要是带有script脚本的话，这个脚本是不执行的，但是createElement会执行。

文档碎片（性能优化）

按照以上第二种方式，可以接受，但是要向document中添加大量数据时(比如1w条)，如果像以下的代码一样，逐条添加节点，这个过程就可能会十分缓慢。

//反例
for(var i=0;i<5;i++){ 
   var op = document.createElement("span"); 

   var oText = document.createTextNode(i); 

   op.appendChild(oText); 

   document.body.appendChild(op); 
}

当数据过大（10000条）时，

//反例 （数据过大时）
var oDiv = document.createElement("div"); 
for(var i=0;i<10000;i++){ 
    var op = document.createElement("span"); 
    var oText = document.createTextNode(i); 
    op.appendChild(oText); 
    oDiv.appendChild(op);  
} 
document.body.appendChild(oDiv);

解决问题，文档碎片createDocumentFragment()

为了解决这个问题，我们可以引入createDocumentFragment()方法，它的作用是创建一个文档碎片，把要插入的新节点先附加在它上面，然后再一次性添加到document中。代码如下：
代码如下:

//先创建文档碎片

var oFragmeng = document.createDocumentFragment(); 

for(var i=0;i<10000;i++){ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    //先附加在文档碎片中
    oFragmeng.appendChild(op);  
} 
//最后一次性添加到document中

document.body.appendChild(oFragmeng);

ps: 在ie，firefox下性能明显得以提高,这个优化跟循环添加html代码类似.

mandyucan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于字符串拼接与文档碎片（性能优化）

想在div里面往span后面追加这个ul&lt;body&gt; &lt;div id="haha"&gt; &lt;span&gt;&lt;/span&gt; &lt;/div&gt; &lt;script&gt; window.onload = function () { var s = '&l
复制链接

扫一扫

专栏目录