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- ...
随机推荐
- jmeter的http sample使用
1.jmeter最简单的http sample 使用 : 最简单的get请求, 输入服务器名称或者ip, 如果有路径则添加路径 ,带参数的添加具体的参数及values值 parameters 和 bo ...
- maven操作
Java 编程入门(系列) Python数据分析与挖掘经典案例实战 "我的2016"主题征文活动 关闭 maven仓库--私服(Nexus的配置使用) 2013 ...
- http协议（四）http状态码
一:http状态码 表示客户端http请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作 状态码的类别如下: http状态码种类繁多,大概有60多种,实际上经常使用的只有14种,下面为一 ...
- 链剖&LCT总结
在搞LCT之前,我们不妨再看看喜闻乐见的树链剖分. 树链剖分有一道喜闻乐见的例题:NOI2015 软件包管理器 如果你看懂题目了,你就会明白它是叫你维护一个树,这棵树是不会动的,要兹磁子树求和,子树修 ...
- JS的递归与TCO尾调用优化
转自:https://segmentfault.com/a/1190000004018047 这两天搜了下JS递归的相关文章, 觉得这篇文章很不错, 就顺手翻译了下,也算给自己做个笔记,题目是我自己加 ...
- HTTP下密码的安全传输、OAuth认证
在复杂的web环境下,我们没有百分的把握保证信息在传输的过程中不被接货,那不是用明文如何告诉服务器自己的身份呢? 在一些高度通信安全的网络中,数据传输会使用HTTPS作为传输协议,但是通常情况下我们没 ...
- NET Core HTTP 管道
ASP.NET Core HTTP 管道中的那些事儿 前言 马上2016年就要过去了,时间可是真快啊. 上次写完 Identity 系列之后,反响还不错,所以本来打算写一个 ASP.NET Cor ...
- 数据库 SQL语法一
建立表语句 CREATE TABLE TABLENAME(COL_NAME1 TYPE,COL_NAME2 TYPE,......); 常用TYPE说明 INT 正数 CHAR(LENGTH) 定长字 ...
- 跟我学习Storm_Storm主要特点
Storm拥有低延迟.高性能.分布式.可扩展.容错等特性,可以保证消息不丢失,消息处理严格有序.Storm的主要特点如下所示: 简单的编程模型.类似于MapReduce降低了并行批处理复杂性,Stor ...
- 极简Word排版示例（以Word2013为例）
文档标题 第一行写下文档的名字,居中,微软雅黑字体,三号 章节标题 每一章的标题单独一行,光标选中这行,设置为标题1 每一节的标题单独一行,光标选中这行,设置为标题2 全部章节标题设置完毕后,下一步 ...