javascript 非同步innerHTML流量分析

當然，這個分時載入技術只是一個輔助技術，本身沒有添加節點的能力。如今，另一種更奇特的技術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等在把節點轉移到文檔片段時發生節點丟失現象。 <br /><style> .filament_table { border-collapse:collapse !important; border-top:1px solid #A9EA00; border-left:1px solid #C1DAD7; table-layout:fixed; width:400px; } .filament_table thead th { background:#A9EA00; color:#FCDE6A; border-bottom:1px solid #C1DAD7; border-right:1px solid #C1DAD7; padding:2px 5px; } .filament_table tbody td,.filament_table tbody th { border-bottom:1px solid #C1DAD7; border-right:1px solid #C1DAD7; padding:2px 5px; color:#76C2C3; } .filament_table tfoot td { border-bottom:1px solid #C1DAD7; border-right:1px solid #C1DAD7; background:#A9EA00; color:#FCDE6A; font-size:12px; padding:0; } .filament_table tbody td a{ text-decoration:none; color:#76C2C3; } .filament_table tbody tr:nth-child(even) { background:#F7FBFF; } </style><p><br /><table class="filament_table"><thead><tr><th colspan="3">非同步innerHTML</th></tr></thead><tbody id="test"></tbody></table><p><button type="button" onclick="addData()">開始</button></p><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

在FF3.5的firebug顯示下，table新添加的節點，標籤都丟失了。
在IE8的開發人員工具中，我們發現table新添加節點出錯嚴重，見於IE一慣的表現，這是很正常的事！
相關示範可見無憂的貼子，發現這種方法不是最佳的插入動態內容的方法。<br /><style> #myTable{height:300px;overflow:auto;border:1px solid #39F;width:600px; } table,td,th{font-size:12px;border-collapse:collapse;height:100%;border:1px solid #39F; } tr.odd{background:#B1E4F3; } td.index{background:#B1E4F3;color:#000066;text-align:center; } </style><table cellspacing="0" cellpadding="2" id="tb"><tr class="odd"><td style="width: 51px" class="index">1</td><td style="width: 121px">姓名1</td><td style="width: 51px">男</td><td style="width: 51px">20</td><td style="width: 121px">1987-12-7</td><td style="width: 201px">這個人很懶，什麼都沒有留下</td></tr></table><p>