高效將字符串轉換為文檔碎片（JavaScript）

作者: 司徒正美來源: 博客園發布時間: 2011-04-19 10:54 閱讀: 1986 次推薦: 1 原文鏈接 [收藏]

　　我在《javascript 動態插入技術》中，就介紹了用innerHTML轉換為文檔碎片的技術了，這個被各大類庫所取用。但事實上，如果我們的字符串沒有th,tbody,col等需要通過包裝才能動態生成的標簽，也沒有那個特煩人的script標簽，我們在提高性能上還是有許多方法，如insertAdjacentHTML。但想使用insertAdjacentHTML，限制非常多的，如在IE下避開innerHTML為只讀的元素，FF需要很高的版本才支持，加之調用對象（如jQuery）的元素往往只能是節點，不能是字符串，因此很多情況下，我們還是先需要把它轉換為節點集合，而今天我介紹的是使用createContextualFragment直接將字符串轉換為文檔碎片！

　　傳統的innerHTML方式會產生一個多余的div元素做轉換器，然后再使用createDocumentFragment創建一個文檔碎片，一個個節點轉移上去。如果使用createContextualFragment就可以避免這一步了。

//http://www.cnblogs.com/rubylouvre/archive/2011/04/15/2016800.html
var str = '<div><strong>test</strong></div>';
var range =document.createRange();
range.selectNodeContents(document.documentElement);
var fragment =range.createContextualFragment(str);
document.body.appendChild(fragment);

　　測試代碼一：

<!doctype html>
<html>
<head>
<title>高效將字符串轉換為文檔碎片 by 司徒正美</title>
<script>
window.onload = function(){
try{
var str='<div><strong>test</strong></div>';
var range=document.createRange();
range.selectNodeContents(document.documentElement);
var fragment =range.createContextualFragment(str);
document.body.appendChild(fragment);
}catch(e){}
}
</script>
</head>
<body>
</body>
</html>

　　測試代碼二：

<!doctype html>
<html>
<head>
<title>性能測試 by 司徒正美 </title>
<script>
window.onload = function(){
try{
var str = '<div class="calendar" id="pager-top"><a rel="prev" href="##" class="prev">aaa</a> <span class="edit-in-place-add"></span></div> ';
var start = new Date;
for (var i = 0, firstChild; i < 400; i++) {
var div = document.createElement('div');
div.innerHTML = str;
var fragment = document.createDocumentFragment();
while((firstChild = div.firstChild)){ // 將div上的節點轉移到文檔碎片上！
fragment.appendChild(firstChild);
}
}
var div1 = document.createElement('div');
div1.innerHTML = "innerHTML : "+ (new Date - start)
document.body.appendChild(div1)
start = new Date;
var HTML = document.documentElement;
for (var i = 0; i < 400; i++) {
var range = document.createRange();
range.selectNodeContents(HTML);
range.createContextualFragment(str);
}
var div2 = document.createElement('div');
div2.innerHTML = "createContextualFragment : "+ (new Date - start)
document.body.appendChild(div2)
}catch(e){
var div3 = document.createElement('div');
div3.innerHTML = "error : "+ e
document.body.appendChild(div3)
}
}
</script>
</head>
<body>
</body>
</html>

　　運行結果：