简单的几个案例，对动态添加HTML进行了性能比较（包括innerHTML)

最新推荐文章于 2023-10-18 22:51:26 发布

weixin_30911451

最新推荐文章于 2023-10-18 22:51:26 发布

阅读量121

点赞数

原文链接：http://www.cnblogs.com/moltboy/archive/2013/03/31/2992487.html

版权

在网上查阅了不少关于innerHTML的性能比较，一直只是间接的得到结果，今天就自己动手写了下非常简单的几个动态添加HTML方法的性能比较，当然，这其中的有许多考虑不周的地方，纯粹是为了比较运行时间，并没有考虑内存等资源的消耗，算不上真正的性能比较！下次有时间，进行个完整的性能测试，包括CPU,内存等资源消耗...

废话不多说了，代码里面有动态添加HTML的方法的简单说明，少了几种比较复杂的方法，例如：利用cloneNode（），理论上比直接create性能能提高30%左右，当然不同的浏览器实际测试时间很大不同。下面看看详细的测试代码！

<html>
    <head>    
        <title></title>
    </head>
    <body>
        <div id="div1"></div>
        <script>
            /*--------------------------------  第一大类  ------------------------------------*/
            //方法一、innerHTML循环操作：取值赋值    (6200ms)
            function comparePerformance1(){
                var startDate = new Date(),
                    doc = window.document;
                for(var i=0; i < 500; ++i){
                    var str = "<div id='div'" + i + " style='width:100px;height:30px;background-color:#eee;'>test" + i + "</div>";
                    doc.body.innerHTML += str;                    
                }
                alert("Run times: " + (new Date() - startDate) + "ms");
            }

            //方法二、改良方法一，将字符串赋值给变量，避免innerHTML循环操作：取值赋值        (18ms)
            function comparePerformance2(){
                var startDate = new Date(),
                    doc = window.document,
                    temp;
                for(var i=0; i < 500; ++i){
                    var str = "<div id='div'" + i + " style='width:100px;height:30px;background-color:#eee;'>test" + i + "</div>";
                    temp += str;                                        
                }
                doc.body.innerHTML = temp;
                alert("Run times: " + (new Date() - startDate) + "ms");
            }

            //方法三、改良方法一，将字符串循环放入数组，然后将数组的所有字符串Join()拼接，同样避免DOM（innerHTML）循环操作：取值赋值   (20s)
            function comparePerformance3(){
                var startDate = new Date(),
                    doc = window.document,
                    array = [];
                for(var i=0; i < 500; ++i){
                    //push()和赋值性能相当
                    array.push("<div id='div'" + i + " style='width:100px;height:30px;background-color:#eee;'>test" + i + "</div>");    
                }
                doc.body.innerHTML = array.join('');
                alert();
            }

            /*---------------------------------------  第二大类 -------------------------------------*/
            //多次DOM操作创建节点，然后指定它们之间关系             （122ms)
            function comparePerformance4(){
                var startDate = new Date(),
                    doc = window.document;
                for(var i=0; i < 500; ++i){
                    var div = doc.createElement("div");
                    var text = doc.createTextNode("text" + 1);
                    div.appendChild(text);
                    doc.body.appendChild(div);
                    div.style.id = "div" + i;
                    div.style.width = "100px";
                    div.style.height = "30px";
                    div.style.backgroundColor = "#eee";
                }
                alert("Run times: " + (new Date() - startDate) + "ms");
            }

            //createDocumentFragment             (31ms)
            function comparePerformance5(){
                var startDate = new Date(),
                    doc = window.document,
                    fragment = document.createDocumentFragment();
                for(var i=0; i < 500; ++i){
                    var div = doc.createElement("div");
                    var text = doc.createTextNode("text" + i);
                    div.appendChild(text);
                    fragment.appendChild(div);
                    div.style.id = "div" + i;
                    div.style.width = "100px";
                    div.style.height = "30px";
                    div.style.backgroundColor = "#eee";
                }
                doc.body.appendChild(fragment);
                alert("Run times: " + (new Date() - startDate) + "ms");
            }

            //使用模板元素clone         (28ms)
            function comparePerformance(){
                var startDate = new Date(),
                    doc = window.document,
                    fragment = document.createDocumentFragment(),
                    copyDiv = document.getElementById("div1");
                for(var i=0; i < 500; ++i){
                    var div = copyDiv.cloneNode(false);
                    var text = doc.createTextNode("text" + i);
                    div.appendChild(text);                    
                    div.style.id = "div" + i;
                    div.style.width = "100px";
                    div.style.height = "30px";
                    div.style.backgroundColor = "#eee";
                    fragment.appendChild(div);
                }
                doc.body.appendChild(fragment);
                alert("Run times: " + (new Date() - startDate) + "ms");
            }

            //usage test
            comparePerformance();
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/moltboy/archive/2013/03/31/2992487.html

weixin_30911451

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的几个案例，对动态添加HTML进行了性能比较（包括innerHTML)

在网上查阅了不少关于innerHTML的性能比较，一直只是间接的得到结果，今天就自己动手写了下非常简单的几个动态添加HTML方法的性能比较，当然，这其中的有许多考虑不周的地方，纯粹是为了比较运行时间，并没有考虑内存等资源的消耗，算不上真正的性能比较！下次有时间，进行个完整的性能测试，包括CPU,内存等资源消耗... 废话不多说了，代码里面有动态添加HTML的方法的简单说明，少了几...
复制链接

扫一扫