innerHTML 的些摘记
作者:手气不错 来源:gracecode.com 时间:2009-06-01 15:42:00
异步 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', ...];var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
详细的对比测试在这里(没错,还是 James Padolsey 那小子的 Blog)。同时,PPK 也整理了份有关 innerHTML 的速度测试报告。
IE 的陷阱
对于 IE,innerHTML 有个不大不小的陷阱(via),就是在 tbody 中插入 innerHTML 时,会报莫名的“未知的运行错误”。
测试地址在这里(经过测试,在 IE8 中仍然如此)。有兴趣的同学可以参看更详细的信息。