利用innerHTML代替createElement来动态添加网页内容已成为一种普遍的认识。但在商务应用,大数据的datagrid屡见不鲜,就算是innerHTML也捉襟见肘,于是人们又开发了分时加载的技术了(利用setTimeout)。当然,这个分时加载技术只是一个辅助技术,本身没有添加节点的能力。如今,另一种更奇特的技术Asynchronous innerHTML又被开发出来了,不能不赞一下外国人在这方面研究是非常超前的。
01.
function
asyncInnerHTML(HTML, callback) {
02.
var
temp = document.createElement(
'div'
),
03.
frag = document.createDocumentFragment();
04.
temp.innerHTML = HTML;
//要加入的内容先放到这里。
05.
(
function
(){
06.
if
(temp.firstChild) {
07.
frag.appendChild(temp.firstChild);
//然后一点点挪到文档碎片
08.
setTimeout(arguments.callee, 0);
//然后把插入内容的操作作为异步调用放到一个独立的堆栈中
09.
}
else
{
10.
callback(frag);
//这里才是真正执行插入节点的操作
11.
}
12.
})();
13.
}
此技术的优点:
- 利用闭包解决 IE6 的内存溢出问题
- 利用setTimeout(fn,0) 这个hack将操作从队列中拖出,防止浏览器假死
- 利用Document Fragment减少对页面的渲染次数
- 回调的节点可以使用 DOM 标准的手法(appendChild)插入(如IE的table,tbody,tr,td等标签的innerHTML是只读的)
使用方法:
1.
var
htmlStr =
'<div><p>...</p><p>...</p><div><div>...</div>'
;
2.
asyncInnerHTML(htmlStr,
function
(fragment){
3.
// You can treat 'fragment' as a regular node.
4.
document.body.appendChild(fragment);
5.
});