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- ...
随机推荐
- HDU 5155 Harry And Magic Box --DP
题意:nxm的棋盘,要求每行每列至少放一个棋子的方法数. 解法:首先可以明确是DP,这种行和列的DP很多时候都要一行一行的推过去,即至少枚举此行和前一行. dp[i][j]表示前 i 行有 j 列都有 ...
- oracle基本用法
作为企业版的后台数据支撑,就首先要掌握oracle的使用方法!!! 注册用户之前,需要使用system管理员来进行注册功能!!! 1.首先创建新用户 2.这样就能使创建的新用户能够登陆吗?不,还需要分 ...
- JProfiler
1 前言 回答之前先让我们来看看什么是jProfiler:JProfiler是一个商业授权的Java剖析工具,由EJ技术有限公司,针对Java EE和Java SE应用程序开发的.它允许两个内存剖面 ...
- java 27 - 10 反射之 动态代理的代码实现
为什么要写动态代理类? 例子: 如果现在想做个登陆注册的功能.用户可以执行登陆.注册.添加.删除这些功能. 但是,有些功能是要有一定权限才可以执行的. 而现在已经有了个用户类的接口和该类的实现类了,但 ...
- iOS根据Url 获取图片尺寸
iOS根据Url 获取图片尺寸 // 根据图片url获取图片尺寸 +(CGSize)getImageSizeWithURL:(id)imageURL { NSURL* URL = nil; if([i ...
- Java 日志性能优化
1. 选择合理的日志级别.合理控制日志内容 2. 控制日志的输出内容和格式 logger.debug("Entry number: " + i + " is " ...
- struts2: 通过流输出实现exce导出
参考下面代码,在Action中加一个方法: // 导出excel public String excel() throws Exception { StringBuffer excelBuf = ne ...
- Android -- ViewDragHelper
ViewDragHelper SlidingPaneLayout和DrawerLayout,现在这俩个类被广泛的运用,其实研究他们的源码你会发现这两个类都运用了ViewDragHelper来处理拖动. ...
- iptables/Netfilter 学习
开始学iptables,因为它是和路由器技术紧密结合在一起的. iptables的命令看起来眼花缭乱,随便找两个: iptables -A FORWARD -p tcp -s -d -j ACCEPT ...
- RSA签名验签学习笔记
RSA私钥签名时要基于某个HASH算法,比如MD5或者SHA1等.之前我一直认为签名的过程是:先对明文做HASH计算,然后用私钥直接对HASH值加密.最近才发现不是那么简单,需要对HASH后的数据进行 ...