innerHTML和createElement的效率问题

lxl211

于 2022-11-10 09:56:02 发布

阅读量236

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/lxllxl211/article/details/127783180

版权

1.如果页面流加载完毕，再调用document.write会导致页面重绘
2.innerHTNML是将内容写到某个DOM中，不会导致页面全部重绘
3.innerHTML创建多个元素效率更高（不要采取拼接字符串，采取数组形式拼接）
4.createElement（）创建多个元素效率稍微低一点点，但是结构清晰。

<style>
        .create a {
            color: green;
        }
    </style>
</head>
<body>
    <button>write</button>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        var inner = document.querySelector('.inner');
        var create = document.querySelector('.create');
        var btn = document.querySelector('button');
        // window.load=function(){
        //     document.write('<a href="#">百度</a>');
        // }
        // 如果页面流加载完毕，再调用这句话会导致页面重绘
        btn.onclick = function () {
            document.write('<a href="#">百度</a>');
        }
        var d1 = +new Date();

        // for (let i = 0; i < 3000; i++) {
        //     inner.innerHTML = inner.innerHTML + '<a href="#">百度</a> ';
        // }
        // inner.innerHTML='<a href="#">百度</a>';
        var arr = [];
        for (let i = 0; i < 9000; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        console.log("innerHTML拼接字符串=" + (Date.now() - d1));

        var d2 = +new Date();
        for (let j = 0; j < 9000; j++) {
            var a = document.createElement('a');
            a.innerHTML = '<a href="#">百度</a>';
            create.appendChild(a);
        }
        // create.appendChild(a);
        console.log("append追加=" + (Date.now() - d2));
    </script>
</body>