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- ...
随机推荐
- 平面直接坐标系线段相交问题（小Q（钟神）的问题）
[问题描述] 小 Q 对计算几何有着浓厚的兴趣.他经常对着平面直角坐标系发呆,思考一些有趣的问题.今天,他想到了一个十分有意思的题目:首先,小 Q 会在?轴正半轴和?轴正半轴分别挑选?个点.随后,他将 ...
- C与CPP 在线手册查找
1. MSDN 的标准与使用 https://msdn.microsoft.com/zh-cn/library/3bstk3k5.aspx 2. Cpp在线查看. http://www.cpluspl ...
- vmware打开出错，需要打开虚拟化的设置
- vijos1334 NASA的食物计划（二维费用的背包问题）
背景 NASA(美国航空航天局)因为航天飞机的隔热瓦等其他安 全技术问题一直大伤脑筋,因此在各方压力下终止了航天 飞机的历史,但是此类事情会不会在以后发生,谁也无法 保证,在遇到这类航天问题时,解决方 ...
- window对象的inner/outer/page/screen详解
innerHeight : 返回窗口的文档显示区的高度,包含工具条与滚动条.说明:ie8以下不支持 outerHeight : 返回窗口的外部高度,包含工具条与滚动条.说明:ie8以下不支持 page ...
- ASP.NET CORE 1.0 MVC API 文档用 SWASHBUCKLE SWAGGER实现
from:https://damienbod.com/2015/12/13/asp-net-5-mvc-6-api-documentation-using-swagger/ 代码生成工具: https ...
- JQuery常用方法(均实践过)
1,使用jquery修改html元素的值 a,修改form的action的值(即修改html的属性值) 这个可以扩展为修改html元素的属性值的方法,使用的$("#id").att ...
- 阿里云Centos 6.3 64位 安全加固版 升级 Php 中的 Curl 7.19 到 7.35
*注意是使用阿里云一键安装包的升级,升级前快照备份哟,小伙伴! 1.SSH远程到root下下载新版本curl 网址地址:http://curl.haxx.se/download.html 完成curl ...
- AsyncTask源码解析
package com.example.demo.activity.net; import java.util.ArrayDeque; import java.util.concurrent.Bloc ...
- DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...