优化innerHTML操作(提高代码执行效率)


Posted in Javascript onAugust 20, 2011

例子:我们要实现的效果是当用户点击鼠标的时候,就在旧数据上追加若干新数据。

如果使用标准DOM的话,完整代码如下:

<html> 
<head> 
<title>test</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。

Javascript 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 #Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 #Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 #Javascript
理清apply(),call()的区别和关系
Aug 14 #Javascript
纯JS实现的批量图片预览加载功能
Aug 14 #Javascript
javascript中关于执行环境的杂谈
Aug 14 #Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 #Javascript
You might like
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
激活 ActiveX 控件
2006/10/09 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
Express.JS使用详解
2014/07/17 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
国际领先的学术出版商:Springer
2017/01/11 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
研修第一天随笔感言
2014/02/15 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
个人主要事迹材料
2014/08/26 职场文书
高一军训口号
2015/12/25 职场文书
python基础之匿名函数详解
2021/04/21 Python
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android