优化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 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
vue实现表单录入小案例
Sep 27 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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之可变函数的实例详解
2017/09/13 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
挂职思想汇报
2013/12/31 职场文书
直接有效的自我评价
2014/01/11 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
自我查摆剖析材料
2014/10/11 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
同学聚会通知书
2015/04/20 职场文书