优化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(function(){})与(function(){})(jQuery)
Dec 19 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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 变量定义方法
2009/06/14 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Python如何安装第三方模块
2020/05/28 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
历史教育专业个人求职信
2013/12/13 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
婚育证明格式
2015/06/17 职场文书
员工聘用合同范本
2015/09/21 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python