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

<!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>

 

posted @ 2019-04-24 21:14  码小龙  阅读(981)  评论(0)  编辑  收藏  举报