javascript中级--文档碎片

一、普通插入

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function() {
            var oBtn = document.getElementById('btn1');
            var oUl = document.getElementById('ul1');
            oBtn.onclick = function() {
                var iStart = new Date().getTime();
                var i = 0;
                for (i = 0; i < 100000; i++) {
                    var oLi = document.createElement('li');
                    oUl.appendChild(oLi);
                }
                alert(new Date().getTime() - iStart); //302 313 345
            }
        }
    </script>
</head>

<body>
    <input id="btn1" type="button" name="" value="普通插入">
    <ul id="ul1">

    </ul>
</body>

</html>

 二、文档碎片插入

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function() {
            var oBtn = document.getElementById('btn1');
            var oUl = document.getElementById('ul1');
            oBtn.onclick = function() {
                var iStart = new Date().getTime();
                var oFrag = document.createDocumentFragment(); //文档碎片
                var i = 0;
                for (i = 0; i < 100000; i++) {
                    var oLi = document.createElement('li');
                    oFrag.appendChild(oLi);
                }
                oUl.appendChild(oFrag);
                alert(new Date().getTime() - iStart); //279 340 291
            }
        }
    </script>
</head>

<body>
    <input id="btn1" type="button" name="" value="碎片插入">
    <ul id="ul1">

    </ul>
</body>

</html>

 

posted @ 2017-02-28 12:14  Mr_W_Blog  阅读(228)  评论(0)    收藏  举报