优化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 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
JavaScript函数模式详解
Nov 07 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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
模仿OSO的论坛(三)
2006/10/09 PHP
php header示例代码(推荐)
2010/09/08 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php商品对比功能代码分享
2015/09/24 PHP
PHP安全下载文件的方法
2016/04/07 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
javascript 随机展示头像实现代码
2011/12/06 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Python 文件操作实现代码
2009/10/07 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
Python基于template实现字符串替换
2020/11/27 Python
关于Assembly命名空间的三个面试题
2015/07/23 面试题
药品质量检测应届生求职信
2013/11/14 职场文书
有关爱国演讲稿
2014/05/07 职场文书
校长创先争优承诺书
2014/08/30 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
实习报告怎么写
2019/06/20 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android