JavaScript innerHTML和createElement效率对比

最新推荐文章于 2022-11-10 09:56:02 发布

火星飞鸟

最新推荐文章于 2022-11-10 09:56:02 发布

阅读量479

点赞数 2

分类专栏： JavaScript 前端基础文章标签： innerHTML createElement 性能比较 DOM操作

本文链接：https://blog.csdn.net/Jack_lzx/article/details/109263308

版权

前端基础同时被 2 个专栏收录

111 篇文章 2 订阅

订阅专栏

JavaScript

88 篇文章 1 订阅

订阅专栏

前言：

在DOM节点操作中，innerHTML和createElement都可以实现创建元素。它们实现的功能类似，但是效率却相差很大。本文分别统计用innerHTML字符串拼接方式、innerHTML数组方式和createElement方式创建1000次元素的时间，来比较它们之间效率的高低。

比较思路：

使用new调用创建日期对象
完成1000次创建相同元素后的时间，减去创建之前的时间，即为过程所用的时间（单位：ms）
比较三种方式所用的时间

比较过程：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // innerHTML字符串拼接方式
        function fn1() {
            var d1 = +new Date();
            var str = '';
            for (var i = 0; i < 1000; i++) {
                document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
            }
            var d2 = +new Date();
            console.log(d2 - d1);
        }
        // innerHTML数组方式
        function fn2() {
            var d1 = +new Date();
            var array = [];
            for (var i = 0; i < 1000; i++) {
                array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
            }
            document.body.innerHTML = array.join('');
            var d2 = +new Date();
            console.log(d2 - d1);
        }
        // createElement方式
        function fn3() {
            var d1 = +new Date();
            for (var i = 0; i < 1000; i++) {
                var div = document.createElement('div');
                div.style.width = '100px';
                div.style.height = '2px';
                div.style.border = '1px solid red';
                document.body.appendChild(div);
            }
            var d2 = +new Date();
            console.log(d2 - d1);
        }
        fn1(); // innerHTML字符串拼接方式
        fn2(); // innerHTML数组方式
        fn3(); // createElement方式
    </script>
</body>

</html>