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- ...
随机推荐
- POJ 2540 Hotter Colder --半平面交
题意: 一个(0,0)到(10,10)的矩形,目标点不定,从(0,0)开始走,如果走到新一点是"Hotter",那么意思是离目标点近了,如果是"Colder“,那么就是远 ...
- BZOJ2118墨墨的等式[数论 最短路建模]
2118: 墨墨的等式 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 1317 Solved: 504[Submit][Status][Discus ...
- Jquery:小知识；
Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器 上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...
- guava常用操作
Jack47 我思故我在 Google Java编程库Guava介绍 本系列想介绍下Java下开源的优秀编程库--Guava[ˈgwɑːvə].它包含了Google在Java项目中使用一些核心库,包含 ...
- 向Tiny6410移植QT4.7.0版本
在移植QT之前我们首先要安装tslib,没有移植的可以看这篇文章移植. http://www.cnblogs.com/ynxf/p/5392476.html step 1: echo yes |../ ...
- Ajax讲解
AJAX:即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 ...
- 主机无法访问虚拟机Linux的apache
在虚拟机linux里安装了httpd,即appache,启动后,按正常情况在主机是可以用浏览器通过访问虚拟机linux的ip来访问的.如果出现无法访问的情况,解决办法可以参考如下: 这里我的虚拟机联网 ...
- PHP核心技术与最佳实践--笔记
<?php error_reporting(E_ALL); /* php 5.3引入 延迟静态绑定 */ /* php5.4引入trait,用来实现多层继承 trait Hello{} trai ...
- SQL探险
两张表,取相同字段比较 相同则显示true 否则FALSE.
- C# socket UDPの异步链接
基于C#的UDP异步连接,在本机上通过测试