利用javascript 添加1万个div 效率优化

最新推荐文章于 2022-07-19 15:56:53 发布

weixin_30782331

最新推荐文章于 2022-07-19 15:56:53 发布

阅读量472

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nigori/p/10765011.html

版权

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body div {
            width: 30px;
            height: 2px;
            border: 1px solid #ee3333;
        }
    </style>
</head>
<body>


<script>
    // 利用 innerHTML 拼接字符串的方式     (添加10000个div)  (耗时约900ms） 最慢
    // function f() {
    //     var date = +new Date();
    //     for (var i = 1; i <= 10000; i++) {
    //         document.body.innerHTML += "<div></div>"
    //     }
    //     var date1 = +new Date();
    //     console.log(date1-date);
    // }
    // f();

    // 利用 innerHTML 数组赋值的方式  结构稍微复杂  （添加10000个div)   （耗时约15ms)  最快
    function f() {
        var date = +new Date();
        var str = [];
        for (var i = 1; i <= 10000; i++) {
            str.push('<div></div>');
        }
        str = str.join('');
        document.body.innerHTML = str;
        var date1 = +new Date();
        console.log(date1 - date);
    }

    f();

    // 利用 createElement    结构清晰简单          (添加10000个div)   (耗时约20ms) 比最快慢一丢丢
    // function f() {
    //     var date = +new Date();
    //     for (var i = 1; i <= 10000; i++) {
    //         var div = document.createElement('div');
    //         document.body.appendChild(div);
    //     }
    //     var date1 = +new Date();
    //     console.log(date1 - date);
    // }
    // f();

</script>
</body>
</html>

转载于:https://www.cnblogs.com/nigori/p/10765011.html

weixin_30782331

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用javascript 添加1万个div 效率优化

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Title</title> <style> body div { width: 30px...
复制链接

扫一扫