innerHTML和appendChild的性能
目测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
innerHTML和appendChild的性能的更多相关文章
- innerHTML与appendChild(newnodeText)的区别
innerHTML和createTextNode都可以把一段内容添加到一个节点中,区别是如果这段内容中有html标签时表现就不同了,在createTextNode中会当作文本处理,不会被浏览器解析,但 ...
- 深入理解javascript描述元素内容的5个属性
× 目录 [1]innerHTML [2]outerHTML [3]innerText[4]outerText[5]textContent 前面的话 <p>This is a <i& ...
- append()、appendChild() 和 innerHTML 的区别
概念和区别:append() 可以同时传入多个节点或字符串,没有返回值: 据说 append 还是试用期的方法,有兼容问题,(但我用了暂时火狐,谷歌,iE都能使用). https://develope ...
- JS性能优化 之 文档片段 createDocumentFragment
我们用原生JS进行开发时,经常会用到两种更新DOM节点的方法:innerHTML 和 appendChild() .其中 innerHTML 会完全替换掉原先的节点内容,如果我们是想向元素追加子节点的 ...
- console.time 简单分析javascript动态加入Dom节点的性能
Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...
- 【性能优化】404- 从 12.67s到1.06s 性能优化实战
作者:jerryOnlyZRJ 来源:https://juejin.im/post/5b6fa8c86fb9a0099910ac91 本文是对之前同名文章的修正,将所有webpack3的内容更新为we ...
- Javascript实践技巧
最近辞职了,准备北上.期待有个好结果~ 本文以<Javascript高级程序设计>为基础,结合自身经验来总结下Javascript实际工作方面的知识. 一.可维护性 1.代码约定 ...
- js原生dom方法总结
1.document document方法getElementById (Node)返回指定节点的引用getElementsByTagName (NodeList)返回文档中所有匹配元素的集合quer ...
- oneuijs/You-Dont-Need-jQuery
oneuijs/You-Dont-Need-jQuery https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh- ...
随机推荐
- 第二章《深入C#数据类型》项目经理评分
一:创建MyOffices项目,创建UserInfo类,用来存储员工 工号,姓名,年龄,评价,年度得分 二:创建查看评分窗体(frmShow),添加定义员工数组,将员工数据绑定到frmShow窗体的L ...
- JavaScript（DOM操作）（Window.document对象）
一.找到元素: docunment.getElementById("id"): 根据id找,最多找一个: var a =docunment ...
- [No000045]最好的休息，不是睡觉！
导读 有人曾说,累,一定是你打开生活的方式不对.细细揣摩,很有道理,在这个世上,从来都是微笑不累,生气累:单纯不累,复杂累:相思不累,单恋累:相守不累,独守累:相爱不累,相残累:专情不累,滥情累:友情 ...
- Html中模态框（弹出框）使用入门
作为html学习学习模态框需要二步: 效果图 第一步学习HTML中 div的弹出 ①触发按钮 <input class="btn btn-success" i ...
- Window 对象
Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(<frame> 或 <iframe> 标签),浏览器会为 HTML 文档创建一个 window ...
- How to regress out unwanted vectors
Source: http://stats.stackexchange.com/questions/117840/how-to-regress-out-some-variables Answer in ...
- jQuery动态产生的铵钮怎样实现事件处理
在ASP.NET MVC环境中,实现一个小功能,就是希望使用jQuery动态一个铵钮,并让用户能执行这个铵钮的click事件.为了更好的理解与对比,Insus.NET在视图中先写一个静态的,执行相似的 ...
- NET代码重构
记一次.NET代码重构 好久没写代码了,终于好不容易接到了开发任务,一看时间还挺充足的,我就慢慢整吧,若是遇上赶进度,基本上直接是功能优先,完全不考虑设计.你可以认为我完全没有追求,当身后有鞭子使 ...
- NFine的后台源码
Chloe官网及基于NFine的后台源码毫无保留开放 扯淡 经过不少日夜的赶工,Chloe 的官网于上周正式上线.上篇博客中LZ说过要将官网以及后台源码都会开放出来,为了尽快兑现我说过的话,趁周末 ...
- java:集合的自定义多重排序
问题: 有一个乱序的对象集合,要求先按对象的属性A排序(排序规则由业务确定,非A-Z或0-9的常规顺序),相同A属性的记录,按根据属性B排序(排序规则,同样由业务确定,非常规顺序) -前提:业务规则是 ...