document.createDocumentFragment()

admin發表於2019-04-21
Fragment

此方法可能在很多時候使用頻率並不是很高，尤其是在比較簡單的程式碼中。

因為沒有此方法的存在同樣會正常達成效果，因為它基本是為了提高效能而存在。

createDocumentFragment字面意思是"建立文件碎片"，更準確的說是建立文件碎片容器。

實質上它建立了一個虛擬的容器，能夠暫時的容納一些DOM元素，至於如何提高效能，後面介紹。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
document.createDocumentFragment()

瀏覽器支援：

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let arr = ["一","二","三","四","五"];
  let oul = document.getElementById("box");
  for(let index = 0;index < 5;index++){
    let li = document.createElement("li");
    let txt = document.createTextNode("螞蟻部落" + arr[index]);
    li.appendChild(txt);
    oul.appendChild(li);
  }
}
</script>
</head>
<body>
<ul id="box"></ul>
</body>
</html>

程式碼分析如下：

（1）.上述程式碼會動態生成五個li元素，並逐一將其追加到ul中。

（2）.但是上述程式碼的效能並不是很好，如果類似操作非常龐大的話會嚴重影響效能。

（3）.for迴圈語句每執行一次，都會建立一個li元素，然後再此li元素中新增文字，最後追加到ul中。

（4）.上述程式碼有一個特點，就是每一次對ul追加li元素，瀏覽器都會繪製渲染一次。

（5）.也就是說上述程式碼繪製渲染了五次，繪製和渲染操作極其消耗效能，所以上述程式碼效能一般。

但是由於小的操作對效能的影響並不是很明顯，所以感覺此方法也就無足輕重，實際應用也較為少見。

如果上述類似DOM操作較為多的話，本文主角的作用將會得到體現，上述程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script>
let arr=["一","二","三","四","五"];
window.onload=function(){
  let oFragment=document.createDocumentFragment();
  let oul=document.getElementById("box");
  for(let index=0;index<5;index++){
    let li=document.createElement("li");
    let txt=document.createTextNode("螞蟻部落"+arr[index]);
    li.appendChild(txt);
    oFragment.appendChild(li);
  }
  oul.appendChild(oFragment);
}
</script> 
</head> 
<body> 
  <ul id="box"></ul>
</body> 
</html>

上述程式碼實現和前一段程式碼相同的效果，但是效能上更好一些，分析如下：

（1）.首先建立的文件碎片容器以備後面使用。

（2）.然後通過for迴圈不斷的建立li元素，但是這裡需要注意的是，並沒有將li元素直接追加到ul中，而是暫時儲存到文件碎片容器中，減少了瀏覽器繪製和渲染的次數，這是關鍵性的區別。

（3）.當迴圈完畢時，也就是生成了所有的li元素，它們都暫時儲存在文件碎片容器中。

（4）.最後直接將文件碎片追加到ul中，一次性將所有的li元素追加到ul中，優點是瀏覽器繪製渲染一次即可。

比第一個程式碼例項少了四次繪製與渲染工作，效能會得到較大的提高，這也是此方法的主要作用，為了提供效能。