码迷,mamicode.com
首页 > 移动开发 > 详细

innerHTML和appendChild的性能

时间:2015-04-14 16:37:34      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

  目测innerHTML比appendChild好了3到4倍, 但是界面渲染还是很慢啊;

            /**
             *chrome浏览器;
             *               innerHTML appendChild
             * 1千条的情况下:3MS       11MS
             * 1万条的情况下:25MS(14MS)      111MS(52MS)
             * 10万的情况下:276MS(145MS)      672MS(480S)
             * 100万界面卡死了
             * */

   chrome结果技术分享

 

  直接点击就可以运行哦, 怎么测试才是对的,感觉不对啊;

<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <script src="p.js"></script>
    <body>
        <ul id="ul0">
            
        </ul>
        <ul id="ul1">
            
        </ul>
        <script>
            window.onlad = function() {
                var liTpl = "<li>{{i}}</li>";
                var ul0 = document.getElementById("ul0");
                var ul1 = document.getElementById("ul1");
                var len = 10000;
                var str = "";
                var d = new Duration();
                d.start("循环使用的时间");
                for(var i=0; i< len; i++) {
                };
                d.end();
                var loopTimes = d.print();

                var d = new Duration("使用innerHTML");
                for(var i=0; i< len; i++) {
                    str += liTpl.replace(/{{i}}/g,i);
                };
                d.start();
                ul0.innerHTML = str;
                d.end();
                d.print();

                var d = new Duration("使用appendChild");

                d.start();
                for(var i=0; i< len; i++) {
                    var li = document.createElement("li");
                    li.innerHTML = i;
                    ul0.appendChild( li );
                };
                d.end();
                d.print();
            }
         </script>
        <script>
            var P = (function(prototype, ownProperty, undefined) {
                return function P(_superclass /* = Object */, definition) {
                    // handle the case where no superclass is given
                    if (definition === undefined) {
                        definition = _superclass;
                        _superclass = Object;
                    }

                    // C is the class to be returned.
                    //
                    // When called, creates and initializes an instance of C, unless
                    // `this` is already an instance of C, then just initializes `this`;
                    // either way, returns the instance of C that was initialized.
                    //
                    //  TODO: the Chrome inspector shows all created objects as `C`
                    //        rather than `Object`.  Setting the .name property seems to
                    //        have no effect.  Is there a way to override this behavior?
                    function C() {
                        var self = this instanceof C ? this : new Bare;
                        self.init.apply(self, arguments);
                        return self;
                    }

                    // C.Bare is a class with a noop constructor.  Its prototype will be
                    // the same as C, so that instances of C.Bare are instances of C.
                    // `new MyClass.Bare` then creates new instances of C without
                    // calling .init().
                    function Bare() {}
                    C.Bare = Bare;

                    // Extend the prototype chain: first use Bare to create an
                    // uninitialized instance of the superclass, then set up Bare
                    // to create instances of this class.
                    var _super = Bare[prototype] = _superclass[prototype];
                    var proto = Bare[prototype] = C[prototype] = C.p = new Bare;

                    // pre-declaring the iteration variable for the loop below to save
                    // a `var` keyword after minification
                    var key;

                    // set the constructor property on the prototype, for convenience
                    proto.constructor = C;

                    C.extend = function(def) { return P(C, def); }

                    return (C.open = function(def) {
                        if (typeof def === function) {
                            // call the defining function with all the arguments you need
                            // extensions captures the return value.
                            def = def.call(C, proto, _super, C, _superclass);
                        }

                        // ...and extend it
                        if (typeof def === object) {
                            for (key in def) {
                                if (ownProperty.call(def, key)) {
                                    proto[key] = def[key];
                                }
                            }
                        }

                        // if no init, assume we‘re inheriting from a non-Pjs class, so
                        // default to using the superclass constructor.
                        if (!(init in proto)) proto.init = _superclass;

                        return C;
                    })(definition);
                }

                // as a minifier optimization, we‘ve closured in a few helper functions
                // and the string ‘prototype‘ (C[p] is much shorter than C.prototype)
            })(prototype, ({}).hasOwnProperty);
        </script>

        <script>
            "use strict";
            var Duration = P(function(dur) {
                dur.init = function(str) {
                    this.str = str;
                }
                dur.start = function() {
                    this.times = (new Date).valueOf();
                };
                dur.end = function() {
                    this.usedTimes = (new Date).valueOf() - this.times;
                };
                dur.print = function() {
                    var oDiv = document.createElement("div");
                    var bodyDiv = document.createElement("div");
                    oDiv.innerHTML = this.str;
                    bodyDiv.innerHTML = this.usedTimes + "MS";
                    document.body.appendChild( oDiv );
                    document.body.appendChild( bodyDiv );
                };
            });
        </script>
    </body>
</html>

 

innerHTML和appendChild的性能

标签:

原文地址:http://www.cnblogs.com/diligenceday/p/4425094.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!