优化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中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
Vue实现简单计算器
Jan 20 Vue.js
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的输出:缓存并压缩动态页面
2013/06/11 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
vuex 的简单使用
2018/03/22 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
Python快速从注释生成文档的方法
2016/12/26 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
促销活动策划方案
2014/01/12 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python