JavaScript - createElement vs createDocumentFragment

答客問

網友 Adam Lee 在 JavaScript - 程式碼壓縮與最佳化 留言指教，說我的測試程式有問題。因為文章撰寫時間有點久了，也忘了當時有沒有進行測試，那我們就來測試看看吧。

createElement與createDocumentFragment的測試程式碼。

網友 Adam Lee 已準備好一個測試程式 http://jsfiddle.net/z3caE/ 大家可以用不同瀏覽器玩玩看分數如何？

以下是我在本機端的測試程式：

在 body 裡加入：

view sourceprint?

1	<div id="msgce"></div>

2	<div id="msgcdf"></div>

3	<ul id="ulItem"></ul>

4

5

<script>

6

7

</script>

在 <script> 裡加入以下測試程式碼：

view sourceprint?

01	function TestLiCE(){

02	var oUL = document.getElementById("ulItem");

03	for (var i = 0; i <= 20000; i++) {

04	var oLI = document.createElement("li");

05	oUL.appendChild(oLI);

06	oLI.appendChild(document.createTextNode("Item" + i));

07

}

08

}

09

10	function TestLiCDF(){

11	var oUL = document.getElementById("ulItem");

12	var oTemp = document.createDocumentFragment();

13	for (var i = 0; i <= 20000; i++) {

14	var oLI = document.createElement("li");

15	oLI.appendChild(document.createTextNode("Item" + i));

16	oTemp.appendChild(oLI);

17

}

18	oUL.appendChild(oTemp);

19

}

20

21	var divce = document.getElementById("msgce");

22	var divcdf = document.getElementById("msgcdf");

23

24	divce.innerHTML += "CE-LI:"

25	for (var i =0; i <= 10; i++) {

26	var s = (new Date).getTime();

27	TestLiCE();

28	divce.innerHTML += ((new Date).getTime() - s) + ",";

29

};

30

31	divcdf.innerHTML += "CDF-LI:"

32	for (var i =0; i <= 10; i++) {

33	var s = (new Date).getTime();

34	TestLiCDF();

35	divcdf.innerHTML += ((new Date).getTime() - s) + ",";

36

};

TestLiCE函式主要透過 createElement 進行元素的新增。TestLiCDF 函式主要透過 createDocumentFragment 進行元素的新增。另外我加入 10 次迴圈，記錄這 10 次的時間值，可以看出平均值。

createElement與createDocumentFragment的分數？

IE 10 得到的分數是：

Firefox 21 得到得分數是：

Chrome 27 得到的分數是：要跑好久好久。為了讓結果出現，將函式內迴圈的值修改 i <= 2000，得到以下結果：

小結

• 三種瀏覽器三種完全不一樣的結果。令人不知要哭還是要笑。換個角度來看，三個瀏覽器使用三種不同的 JavaScript 引擎，三種 JavaScript 引擎各有強項，就本篇而言，Firefox 是最正常的，IE 最不正常，Chrome 時好時壞，Chrome 的不正常不知道和它的多核架構有沒有關係。
• 在現在的時空背景之下，由上面的測試結果來看，那篇文章已經不是那麼重要，重要的是使用者的瀏覽器採用那一種的JavaScript 引擎，因為相同的程式碼在不同 JavaScript 引擎有不同的效果。
• 最後的 Chrome 要跑好久來是因為呈現方式與 IE / Firefox 不同，IE / Firefox 只呈現最後一次的 20000 筆 li 元素，Chrome 會完整呈現 20000 * 10 筆 li 元素。時間太久，我就沒等它了。
• IE 除了作業模式不正常外，分數還很不好看。

文章發佈後約 20 來分鐘，Chrome 終於跑玩了。