javascript 异步的innerHTML使用分析
更新时间：2009年12月24日 21:40:17 作者：
利用innerHTML代替createElement来动态添加网页内容已成为一种普遍的认识。但在商务应用，大数据的datagrid屡见不鲜，就算是innerHTML也捉襟见肘，于是人们又开发了分时加载的技术了（利用setTimeout）。
当然，这个分时加载技术只是一个辅助技术，本身没有添加节点的能力。如今，另一种更奇特的技术Asynchronous innerHTML又被开发出来了，不能不赞一下外国人在这方面研究是非常超前的。
function asyncInnerHTML(HTML, callback) {
var temp = document.createElement('div'),
frag = document.createDocumentFragment();
temp.innerHTML = HTML;//要加入的内容先放到这里。
(function(){
if(temp.firstChild) {
frag.appendChild(temp.firstChild);//然后一点点挪到文档碎片
setTimeout(arguments.callee, 0);//利用异步调用自身拼凑文档碎片，直到div的节点被搬空
} else {
callback(frag);//这里才是真正执行插入节点的操作
}
})();
}
此技术的优点:
1. 利用闭包解决 IE6 的内存溢出问题
2. 利用setTimeout(fn,0) 这个hack将操作从队列中拖出，防止浏览器假死
3. 利用Document Fragment减少对页面的渲染次数
4. 回调的节点可以使用 DOM 标准的手法（appendChild）插入(如IE的table,tbody,tr,td等标签的innerHTML是只读的)
使用方法：
var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';
asyncInnerHTML(htmlStr, function(fragment){
// You can treat 'fragment' as a regular node.
document.body.appendChild(fragment);
});
不过，这个方法在table中添加节点时并不是个个浏览器都行得通，不得不说是一大败笔。经测试IE8，IE6，FF3.5渲染出现差错，chrome,safari4,opera10等能完好地把表格渲染出来。估计是IE8等在把节点转移到文档碎片时发生节点丢失现象。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
在FF3.5的firebug显示下，table新添加的节点，标签都丢失了。
在IE8的开发人员工具中，我们发现table新添加节点出错严重，见于IE一惯的表现，这是很正常的事！
复制代码 代码如下:
function asyncInnerHTML(HTML, callback) {
var temp = document.createElement('div'),
frag = document.createDocumentFragment();
temp.innerHTML = HTML;//要加入的内容先放到这里。
(function(){
if(temp.firstChild) {
frag.appendChild(temp.firstChild);//然后一点点挪到文档碎片
setTimeout(arguments.callee, 0);//利用异步调用自身拼凑文档碎片，直到div的节点被搬空
} else {
callback(frag);//这里才是真正执行插入节点的操作
}
})();
}
此技术的优点:
1. 利用闭包解决 IE6 的内存溢出问题
2. 利用setTimeout(fn,0) 这个hack将操作从队列中拖出，防止浏览器假死
3. 利用Document Fragment减少对页面的渲染次数
4. 回调的节点可以使用 DOM 标准的手法（appendChild）插入(如IE的table,tbody,tr,td等标签的innerHTML是只读的)
使用方法：
复制代码 代码如下:
var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';
asyncInnerHTML(htmlStr, function(fragment){
// You can treat 'fragment' as a regular node.
document.body.appendChild(fragment);
});
不过，这个方法在table中添加节点时并不是个个浏览器都行得通，不得不说是一大败笔。经测试IE8，IE6，FF3.5渲染出现差错，chrome,safari4,opera10等能完好地把表格渲染出来。估计是IE8等在把节点转移到文档碎片时发生节点丢失现象。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
在FF3.5的firebug显示下，table新添加的节点，标签都丢失了。
在IE8的开发人员工具中，我们发现table新添加节点出错严重，见于IE一惯的表现，这是很正常的事！
相关文章
在项目中需要快速检测浏览器是否支持某CSS3特性，比如检测是否支持“transform”，然后我的布局会有两种完全不同的版式2012-09-09
下面小编就为大家带来一篇js案例之鼠标跟随jquery版(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本篇文章主要是对使用JS实现将人民币金额转换为大写的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了JS实现仿Windows7风格的网页右键菜单效果代码,涉及JavaScript鼠标右键响应及动态生成页面菜单的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了javascript中AJAX用法,实例分析了针对不同浏览器的Ajax使用技巧,非常具有实用价值,需要的朋友可以参考下2015-01-01
本文给大家介绍javascript中的闭包，包括对js闭包概念的理解，闭包的几种写法和用法，闭包的主要作用，闭包与this对象，闭包与内存泄露及使用闭包的注意点相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
关于String对象的replace使用详解,需要的朋友可以参考下。2011-05-05
一般情况下我们在FLASH幻灯片字符串中有连接符时点击链接就会不正常，造成链接中的参数丢失，那么就需要用encodeURIComponent来对链接地址进行编码2012-03-03
近期在练习或写项目时经常会遇到时间格式的转换问题,今天我就来总结一下,这篇文章主要给大家介绍了关于JavaScript中几种时间格式之间的简单转换,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了JavaScript数据结构之双向链表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
最新评论