innerHTML和appendChild的性能 - diligenceday－IT工程師數位筆記本

文章出處

　　目測innerHTML比appendChild好了3到4倍，但是界面渲染還是很慢啊；

　 chrome結果

            /**
             *chrome瀏覽器;
             *               innerHTML appendChild
             * 1千條的情況下：3MS       11MS
             * 1萬條的情況下：25MS(14MS)      111MS(52MS)
             * 10萬的情況下：276MS(145MS)      672MS(480S)
             * 100萬界面卡死了
             * */

　　FF火狐瀏覽器,電腦沒卡死，太好了，chrome果然是內存大戶啊：

             /**
             *FF瀏覽器;
             *               innerHTML appendChild
             * 1千條的情況下：3MS       6MS
             * 1萬條的情況下：20MS      74MS
             * 10萬的情況下：194MS      690MS
             * 100萬沒有全部顯示， 顯示到了50萬就沒有了
             * */

　　IE瀏覽器下差別好大啊：

            /**
             *IE瀏覽器(IE8):
             *               innerHTML appendChild
             * 1千條的情況下：15MS       969MS
             * 1萬條的情況下：74MS      830MS
             * 10萬的情況下：706MS      9762MS
             * 100萬界面卡死了
             * */

              /**
             *IE瀏覽器(IE11):
             *               innerHTML appendChild
             * 1千條的情況下：6MS       106MS
             * 1萬條的情況下：92MS      8716MS
             * 10萬界面卡死了
             * */

　　直接點擊就可以運行哦, 怎么測試才是對的，感覺不對啊；

<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <script src="p.js"></script>
    <body>
        <ul id="ul0">
            
        </ul>
        <ul id="ul1">
            
        </ul>
        <script>
            window.onload = 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>