Gracecode网上的文章,好象研究了比较深。
本文的亮点写在了内容中,但我觉得argements.callee这个用法还是很有特色的。以前都是用this之类的来解决。。。
还有一个亮点就是document.Fragment这个东西。。。
不废话看原文:
异步 innerHTML
innerHTML 插入节点的性能的问题,通常是我们最关注的。在回答这问题时,James Padolsey 给出了他的解决方案,看到上述代码不仅赞叹了下:
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); } else { callback(frag); } })(); }
- 充分利用闭包解决 IE6 的内存溢出问题
- 使用延时 0 将操作从队列中拉出,防止浏览器假死
- Document Fragment 给予我们个相当好的沙盘,只是我们经常忘记了它
- 回调的节点可以使用 DOM 标准的手法(appendChild)插入
了解了参数就很容易调用,例如
var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>'; asyncInnerHTML(htmlStr, function(fragment){ document.body.appendChild(fragment); });
再次不禁赞叹下!
组织 innerHTML 字符串
说到 innerHTML ,通常在这操作之前会有大部分的字符串操作用于连接节点。考虑下面的三种做法,有何不同
方式一
var arr = ['item 1', 'item 2', 'item 3', ...]; for (var i = 0, l = arr.length, list = ''; i < l; i++) { list += '<li>' + arr[i] + '</li>'; } list = '<ul>' + list + '</ul>';
方式二
var arr = ['item 1', 'item 2', 'item 3', ...];
for (var i = 0, l = arr.length, list = []; i < l; i++) {
list[list.length] = '<li>' + arr[i] + '</li>';
}
list = '<ul>' + list.join('') + '</ul>';
var arr = ['item 1', 'item 2', 'item 3', ...];
for (var i = 0, l = arr.length, list = []; i < l; i++) {
list[list.length] = '<li>' + arr[i] + '</li>';
}
list = '<ul>' + list.join('') + '</ul>';方式三
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';详细的对比测试在这里(没错,还是 James Padolsey 那小子的 Blog)。同时,PPK 也整理了份有关 innerHTML 的速度测试报告。
IE 的陷阱
对于 IE,innerHTML 有个不大不小的陷阱(via),就是在 tbody 中插入 innerHTML 时,会报莫名的“未知的运行错误”。

评论 (3)
Your website offered us with valuable information to work on. You have done an impressive job and our
emtire community will be grateful to you.
I line up this real leisurely to interpret.
take helpful facts concerning my study and knowledge.