优化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 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
使javascript也能包含文件
2006/10/26 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
node.js中的console用法总结
2014/12/15 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
分享一个简单的python读写文件脚本
2017/11/25 Python
Django 路由控制的实现代码
2018/11/08 Python
Django 静态文件配置过程详解
2019/07/23 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
python中的插入排序的简单用法
2021/01/19 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
放飞梦想演讲稿
2014/05/05 职场文书
妇女工作先进事迹
2014/08/17 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
面试自我评价范文
2014/09/17 职场文书
经销商会议开幕词
2016/03/04 职场文书
公司周年庆寄语
2019/06/21 职场文书
python之基数排序的实现
2021/07/26 Python