innerHTML 的些摘记网页设计 -电脑资料

    异步 innerHTML

    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 = "

...

...

...";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 += "

" + arr[i] + "

";}list = "" + list + "";

    方式二

    var arr = ["item 1", "item 2", "item 3", ...];for (var i = 0, l = arr.length, list = []; i < l; i++) {list[list.length] = "

" + arr[i] + "

";}list = "" + list.join("") + "";

    方式三

    var arr = ["item 1", "item 2", "item 3", ...];var list = "

" + arr.join("

") + "

";

    详细的对比测试在这里（没错，还是 James Padolsey 那小子的 Blog），

电脑资料

《innerHTML 的些摘记网页设计》(http://meiwen.anslib.com)。同时，PPK 也整理了份有关 innerHTML 的速度测试报告。

    IE 的陷阱

    对于 IE，innerHTML 有个不大不小的陷阱（via），就是在 tbody 中插入 innerHTML 时，会报莫名的“未知的运行错误”。

    测试地址在这里（经过测试，在 IE8 中仍然如此）。有兴趣的同学可以参看更详细的信息。

    本文来自：http://www.gracecode.com/archives/2963/