创建节点三种方式和性能比较

最新推荐文章于 2024-11-28 09:18:11 发布

原创最新推荐文章于 2024-11-28 09:18:11 发布 · 850 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

前端专栏收录该内容

9 篇文章

订阅专栏

创建节点三种方式和性能比较

一、创建节点三种方式

（一）document.write()

注意如果页面已经加载完成，再调用会导致页面重绘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<script>
    document.write('<h3>Hello World!</h3>');
</script>
</body>
</html>

（二）element.innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<script>
    document.body.innerHTML = '<h3>Hello World!</h3>';
</script>
</body>
</html>

（三）document.createElement()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<script>
    var h3 = document.createElement('h3');
    h3.innerText = 'Hello World!';
    document.body.appendChild(h3);
</script>
</body>
</html>

二、性能测试

因为document.write()每次都会导致页面重绘，并且本身也有很大的局限性所以不在测试

（一）document.body.innerHTML性能测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<script>
    var startTime = new Date();
    for (var i = 0; i < 1000; i++) {
        // 注意此处大量字符串拼接严重影响性能
        document.body.innerHTML += `<h3>Hello World!</h3>`;
    }
    var overTime = new Date();
    console.log(overTime.getTime() - startTime.getTime())
</script>
</body>
</html>

测试结果：平均在340毫秒左右

（二）document.createElement()性能测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<script>
    var startTime = new Date();
    for (var i = 0; i < 1000; i++) {
        var h3 = document.createElement('h3');
        h3.innerText = 'Hello World!';
        document.body.appendChild(h3);
    }
    var overTime = new Date();
    console.log(overTime.getTime() - startTime.getTime())
</script>
</body>
</html>

测试结果：平均在2毫秒左右

（三）document.innerHTML优化字符串拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<script>
    var startTime = new Date();
    var buf = new Array();
    for (var i = 0; i < 1000; i++) {
        // 此处优化字符串拼接
        buf.push(`<h3>Hello World!</h3>`);
    }
    document.body.innerHTML = buf.join('');
    var overTime = new Date();
    console.log(overTime.getTime() - startTime.getTime())
</script>
</body>
</html>

测试结果：平均在1毫秒左右

三、总结

总结偏个人主观，紧供参考

document.write()只能以整个文档为单位操作，并且在页面加载完成过后调用会导航整个页面重绘不推荐使用。
document.innerHTML在数组拼接下速度相比document.createElement()快1倍左右。
document.innerHTML在程序处理嵌套结构时结构不如document.createElement()清析。
日常使用推荐document.createElement()在处理数据时结构更清晰，方便后期维护并且现在出现有大量数据需要网页显示，一般都是通过分页显示，同时不显示大量数据，当出现有大量数据又需要同时在网页显示性能优先可以考虑document.innerHTML。