您现在的位置:首页 --> JavaScript --> 优化innerHTML操作
优化innerHTML操作
浏览:1922次 出处信息
多数现代浏览器都实现了innerHTML操作,它的方便性让我们爱不释手,但如果使用不当,很容易出现效率问题,本文通过一个例子来说明如何优化innerHTML操作。
例子:我们要实现的大致效果是当用户点击鼠标的时候,就在旧数据上追加若干新数据。
如果使用标准DOM的话,完整代码如下:
<html>
<head>
<title>innerHTML</title>
</head>
<body>
<div>
<p>data<p>
</div>
<script>
document.onmousedown = function() {
for (var i = 0; i < 10; i++) {
var p = document.createElement("p");
p.appendChild(document.createTextNode(Math.random()));
document.getElementsByTagName('div')[0].appendChild(p);
}
};
</script>
</body>
</html>
注:一旦结构比较复杂的话,标准DOM需要编写冗长的代码。
如果使用innerHTML的话,大致代码如下:
<script>
document.onmousedown = function() {
var html = "";
for (var i = 0; i < 10; i++) {
html += "<p>" + Math.random() + "<p>";
}
document.getElementsByTagName('div')[0].innerHTML += html;
};
</script>
注:innerHTML没有标准DOM中的appendChild,所以使用了“+=”的方式,效率低下。
我们可以结合使用innerHTML和标准DOM,这样二者的优点就兼得了,大致代码如下:
<script>
document.onmousedown = function() {
var html = "";
for (var i = 0; i < 10; i++) {
html += "<p>" + Math.random() + "<p>";
}
var temp = document.createElement("div");
temp.innerHTML = html;
while (temp.firstChild) {
document.getElementsByTagName('div')[0].appendChild(temp.firstChild);
}
};
</script>
注:创建一个元素,然后注入innerHTML,接着在元素上使用标准DOM操作。
还不算完,Asynchronous innerHTML给出了更强悍的解决方法,大致代码如下:
<script>
document.onmousedown = function() {
var html = "";
for (var i = 0; i < 10; i++) {
html += "<p>" + Math.random() + "<p>";
}
var temp = document.createElement('div');
temp.innerHTML = html;
var frag = document.createDocumentFragment();
(function() {
if (temp.firstChild) {
frag.appendChild(temp.firstChild);
setTimeout(arguments.callee, 0);
} else {
document.getElementsByTagName('div')[0].appendChild(frag);
}
})();
};
</script>
注:使用setTimeout防止堵塞浏览器,使用DocumentFragment提升效率。
另:代码在拼接字符串时还可以更快,详见:Fastest way to build an HTML string。
建议继续学习:
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
文章信息
- 作者:老王 来源: 火丁笔记
- 标签: innerHTML
- 发布时间:2011-06-20 13:34:52
建议继续学习
近3天十大热文
- [56] IOS安全–浅谈关于IOS加固的几种方法
- [55] 图书馆的世界纪录
- [55] 如何拿下简短的域名
- [54] android 开发入门
- [53] Go Reflect 性能
- [53] Oracle MTS模式下 进程地址与会话信
- [50] 【社会化设计】自我(self)部分――欢迎区
- [49] 读书笔记-壹百度:百度十年千倍的29条法则
- [41] 程序员技术练级攻略
- [35] 视觉调整-设计师 vs. 逻辑