目测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>
作者： NONO 出处：http://www.cnblogs.com/diligenceday/QQ：287101329
新闻热点
疑难解答
