關於jQuery性能和DOM的問題：爲什麼一種方法比另一種更快？

我正在看一些jQuery性能技巧，並跑過這個引起我興趣的人。關於jQuery性能和DOM的問題：爲什麼一種方法比另一種更快？

看看下面的頁面片斷：

<html> 
<head> 
</head> 
<body> 
<select id ="myList"> 


</select> 
<div id ="myList2"> 


</div> 
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    console.time('test'); 
    var myList = $('#myList'); 
    var myListItems = ''; 

    for (i = 0; i < 1000; i++) { 
     myListItems += '<option>This is list item ' + i + '</option>'; 
    } 

    myList.html(myListItems); 
    console.timeEnd('test'); 

    console.time('test2'); 
    var myList = $('#myList2'); 
    var myListItems = '<select >'; 

    for (i = 0; i < 1000; i++) { 
     myListItems += '<option>This is list item ' + i + '</option>'; 
    } 

    myListItems += '</select>'; 
    myList.html(myListItems); 
    console.timeEnd('test2'); 

} 
); 
</script> 
</body> 
</html>

爲什麼是第二個測試方法比第一速度（由約4倍）？

來源

2009-08-06 Bryan Denny