你的位置:首页 > Java教程

[Java教程]innerHTML和appendChild的性能


  目测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>