2. it
  3. 最小化重绘和重排

最小化重绘和重排

mac2022-06-30  22
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()方法，有些团队成员可能并不熟悉这项技术。

转载于:https://www.cnblogs.com/qzsonline/archive/2012/06/23/2559481.html

相关资源：JAVA上百实例源码以及开源项目
最新回复(0)