最小化重绘和重排

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <ul id="mylist">
 9         <li><a href="http://phpied.com">Stoyan</a></li>
10         <li><a href="http://julienlecomte.com">Julien</a></li>
11     </ul>
12     <script type="text/javascript" src="index.js"></script>
13 </body>
14 </html>

在文档之外创建并更新一个文档片断，然后把它附加到原始列表中。（文档片断相当于word2003复制以后右边出现的复制片断概念）

 1 //最小化重绘和重排
 2 var data = [{
 3     "name": "Nicholas",
 4     "url": "http://nczonline.net"
 5 }, {
 6     "name": "Ross",
 7     "url": "http://techfoolery"
 8 }];
 9 
10 function appendDataToElement(appendToElement, data) {
11     var a, li;
12     for (var i = 0, max = data.length; i < max; i++) {
13         a = document.createElement('a');
14         a.href = data[i].url;
15         a.appendChild(document.createTextNode(data[i].name));
16         li = document.createElement('li');
17         li.appendChild(a);
18         appendToElement.appendChild(li);
19     }
20 }
21 
22 var fragment = document.createDocumentFragment();
23 appendDataToElement(fragment, data);
24 document.getElementById("mylist").appendChild(fragment);

createDocumentFragment()方法，有些团队成员可能并不熟悉这项技术。