innerHTML与createElement创建元素效率对比

@cooltea

已于 2022-04-28 17:17:30 修改

阅读量204

点赞数 4

文章标签： javascript

于 2022-04-26 16:02:00 首次发布

本文链接：https://blog.csdn.net/apple_54470279/article/details/124429962

版权

本文探讨了JavaScript中创建元素的三种方法：innerHTML字符串拼接、数组转换和createElement，通过实际运行时间展示了它们的性能差异。实验结果显示，createElement方法的执行效率最高，数组转换次之，而innerHTML字符串拼接效率最低。在不涉及样式的情况下，前两者效率接近。文章强调了在关注性能的同时，代码的可读性也是一个重要的考量因素。

摘要由CSDN通过智能技术生成

innerHTML()

方法1：循环拼接字符串

<body>
    <div></div>
    <script>
        let div = document.querySelector('div');
        let startTime = new Date();     // 记录开始时间
        for(let i=0; i<1000; i++) {
            div.innerHTML += "<span style='display:block;width:50px;height:50px;'></span>"; // 循环拼接字符串
        }
        let endTime = new Date();       // 记录结束时间
        console.log((endTime-startTime)+"ms")
    </script>
</body>

运行结果：

1090ms

方法2：直接将数组转换为字符串

<script>
    let div = document.querySelector('div');
    let startTime = new Date();
    let elements = [];  // 创建空数组
    for(let i=0; i<1000; i++) {
        elements.push("<span style='display:block;width:50px;height:50px;'></span>");  // 向数组推入元素
    }
    div.innerHTML = elements.join('');  // 通过join()方法将数组转化为字符串
    let endTime = new Date();
    console.log((endTime-startTime)+"ms")
</script>

运行结果：

3ms

array.join()介绍 ：

将数组转化为字符串，给 join() 传入参数，可以指定数组每一项之间的分隔符
let friuts = ["apple","pear","banana"];
console.log(friuts.join(''))   // 输出：applepearbanan
console.log(friuts.join(','))  // 输出：apple,pear,banan

creatElement()

<script>
    let div = document.querySelector('div');
    let startTime = new Date();
    for(let i=0; i<1000; i++) {
        let span = document.createElement("span");
        span.style.display = "block";
        span.style.width = "50px";
        span.style.height = "50px";
        div.appendChild(span);
    }
    let endTime = new Date();
    console.log((endTime-startTime)+"ms")
</script>

运行结果：

6ms

总结

执行效率对比：innerHTML() 数组转字符串 > createElement() > innerHTML() 拼接字符串

如果只是单纯的创建元素而不添加样式时，前两者的执行效率基本相等。

createElement() 的代码结构更清晰。

@cooltea

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
innerHTML与createElement创建元素效率对比

总结：执行效率对比：innerHTML() 数组转字符串 > createElement() > innerHTML() 拼接字符串。如果只是单纯的创建元素而不添加样式时，前两者的执行效率基本相等。createElement() 的代码结构更清晰。
复制链接

扫一扫