自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

各種動態(tài)渲染Element方式的性能探究

作者：雕刻零碎
開發(fā) 前端
動態(tài)渲染進入一個Dom元素，首先需要保證動態(tài)渲染操作必須盡可能少對原有dom樹的影響，影響重繪及重排。必須尋找一個容器來緩存渲染期間生成的dom結(jié)構(gòu)(操作必須盡可能少對原有dom樹的影響)，然后再進行一次渲染到目標(biāo)element中。

[[193491]]

【引自雕刻零碎的博客】一、性能優(yōu)化的原則及方法論

樹立原則：動態(tài)渲染進入一個Dom元素，首先需要保證動態(tài)渲染操作必須盡可能少對原有dom樹的影響，影響重繪及重排。

確定方法論：必須尋找一個容器來緩存渲染期間生成的dom結(jié)構(gòu)(操作必須盡可能少對原有dom樹的影響)，然后再進行一次渲染到目標(biāo)element中。

二、生成期間DOM緩存的選擇

  • DocumentFragment(文檔碎片對象，選擇原因：脫離于文檔流)
  • 臨時Element(選擇原因：新element脫離于文檔流)
    • createElement，再一步步進行渲染
    • 通過描述Dom的String(下稱：DomString)，轉(zhuǎn)化為Dom對象
      • 臨時Element+innerHTML+cloneNode返回最外層element元素對象，再進行插入appendChild，必要時還需要選擇器方法講某一個Element對象提取出來
      • XML字符串通過解析生成Element對象(注意，不是HTMLxxxElement對象，是Element對象)，然后將該對象appendChild進去
  • 臨時字符串(選擇原因：借助innerHTML渲染，一次渲染)

三、DocumentFragment的優(yōu)缺點

基本模式：

  1. var fragment = document.createDocumentFragment(); 
  2.     fragment.appendChild( 
  3.         ...    //生成Element的IIFE 
  4.     )  
  1. //IIFE示例,根據(jù)配置創(chuàng)建元素 
  2. var ConfigVar = { 
  3.   ELname:"div", 
  4.   id:"blablabla", 
  5.   name:"balblabla", 
  6.   class:"ClassName" 
  7. } 
  8. (function(Config){ 
  9.       var el = document.createElement(Config.ELname); 
  10.           el.className = (Config.class || ""); 
  11.     for (let AttrName in Config){ 
  12.           if (AttrName == "class")continue; 
  13.           el.setAttribute(AttrName,Config[AttrName]); 
  14.     } 
  15.       return el; 
  16. })(ConfigVar)  

優(yōu)點

1、脫離于文檔流，操作不會對Dom樹產(chǎn)生影響

2、在每一次生成臨時Element時候就可以將該Element對象的引用保存下來，而不需要多次用選擇器再次獲取。

缺點

兼容性只是達(dá)到IE9+

http://caniuse.com/#search=DocumentFragment

四、createElement的優(yōu)缺點

基本模式

  1. var el = document.createElement("ElementName");     
  2.     el.className = ""; 
  3.     el.setAttribute("AttrName",AttrValue); 
  4.     el.setAttribute("AttrName",AttrValue); 
  5.     ... 
  6.     el.appendChild(         
  7.           ... //生成Element的IIFE,見上文 
  8.     );  

優(yōu)點

1、新創(chuàng)建的元素脫離于文檔流，操作不會對Dom樹產(chǎn)生影響

2、兼容性***

3、在每一次生成臨時Element時候就可以將該Element對象的引用保存下來，而不需要多次用選擇器再次獲取。

缺點

每一次調(diào)用setAttribute方法都是一次次對Element進行修改，此處具有潛在的性能損耗。

五、DomString——臨時Element+innerHTML+cloneNode的優(yōu)缺點

基本模式 

  1. var domString2Dom = (function(){ 
  2.     if (window.HTMLTemplateElement){ 
  3.         var container = document.createElement("template"); 
  4.         return function(domString){ 
  5.             container.innerHTML = domString; 
  6.             return container.content.firstChild.cloneNode(true) 
  7.         } 
  8.     }else{ 
  9.         //對不支持的template 的瀏覽器還有兼容性方法沒寫，所以不支持tr,td等些元素inner進div中。 
  10.         var container = document.createElement("div"); 
  11.         return function(domString){ 
  12.             container.innerHTML = domString; 
  13.             return container.firstChild.cloneNode(true) 
  14.         }         
  15.     } 
  16. })();  
  1. var template = domString2Dom('<div class="TestClass" Arg="TestArg"></div>'); 
  2. for (var index = 0; index < 80; index++) {     
  3.   template.appendChild( 
  4.     (function(){ 
  5.       var el = domString2Dom("<div>M</div>"); 
  6.       return el 
  7.     })() 
  8.   )                 
  9. }  

優(yōu)點

創(chuàng)建Dom之后不需要多次進行setAttribute

缺點

1、臨時元素不能包裹一些特定的元素(不能在所有瀏覽器的所有 HTML 元素上設(shè)置 innerHTML 屬性)

2、解析的過程進行了很多其余的操作。此處具有潛在的性能損耗。

3、插入的字符串***層Node只允許有一個元素

六、DomString——XML解析的優(yōu)缺點

基本模式

  1. var XMLParser = function () { 
  2.     var $DOMParser = new DOMParser(); 
  3.     return function (domString) { 
  4.         if (domString[0] == "<") { 
  5.             var doc = $DOMParser.parseFromString(domString, "application/xhtml+xml"); 
  6.             return doc.firstChild; 
  7.         } 
  8.         else { 
  9.             return document.createTextNode(domString); 
  10.         } 
  11.     }; 
  12. }();  
  1. var template = XMLParser('<div class="TestClass" Arg="TestArg"></div>'); 
  2. for (var index = 0; index < 80; index++) { 
  3.   template.appendChild((function () { 
  4.     var el = XMLParser("<div>M</div>"); 
  5.     return el; 
  6.   })()); 
  7. }  

優(yōu)點

DomString方法中通用性***的，雖然IE10+才支持DOMParser，但是IE9以下的有替代方法

缺點

1、解析的過程本身就具有潛在的性能損耗。

2、只能得到剛剛創(chuàng)建最外層元素的克隆。子元素的引用還需要用選擇器。

3、插入的字符串***層Node只允許有一個元素

七、臨時字符串的優(yōu)缺點

基本模式：

  1. var template = document.createElement("div"); 
  2. template.innerHTML = `<div class="TestClass" Arg="TestArg"> 
  3.                         Test TextNode 
  4.                         ${(function(){ 
  5.                           var temp = new Array(8); 
  6.                           for (var index = 0; index < 80; index++) { 
  7.                             temp[index]="<div>M</div>" 
  8.                           } 
  9.                           return temp.join() 
  10.                         }())} 
  11.                       </div>` //需要增加的一大段Element  

優(yōu)點

1、通用性***，不需要逐步創(chuàng)建一大堆無用的Element對象引用

2、運用es6模板字符串編碼優(yōu)雅，不需要字符串用加號進行鏈接

缺點

1、如果是直接給出配置Config進行渲染需要進行字符串的生成

2、只能得到剛剛創(chuàng)建最外層元素的引用。子元素的引用還需要用選擇器。

八、Template元素

由于HTML5中新增了template元素

其特點就是有一個content屬性是HTMLDocumentFragment對象，所以可以包容任何元素

基本范式是：

  1. var template = document.createElement("template"); 
  2. template.innerHTML = `<div class="TestClass" Arg="TestArg"> 
  3.                         Test TextNode 
  4.                         ${(function(){ 
  5.                           var temp = new Array(8); 
  6.                           for (var index = 0; index < 80; index++) { 
  7.                             temp[index]="<div>M</div>" 
  8.                           } 
  9.                           return temp.join() 
  10.                         }())} 
  11.                       </div>` //需要增加的一大段Element 
  12. // template.content 是HTMLDocumentFragment  

優(yōu)點

比div要好很多，作為臨時元素容器的包容性更強

缺點

兼容性不好：http://caniuse.com/#search=HTML%20templates 在不支持的瀏覽器中表示為HTMLUnknownElement

九、各種方法的效率對比

測試代碼：(由于筆者不太熟悉各種瀏覽器性能的BUG，這里的代碼如果有不足請指正)，代碼由typescript進行編寫，也可以用babel進行編譯。

  1. /** 
  2.  * @param Count:渲染DOM結(jié)構(gòu)的次數(shù) 
  3.  */ 
  4. var DateCount = { 
  5.     TimeList : {}, 
  6.     time:function(Str){ 
  7.         console.time(Str); 
  8.     }, 
  9.     timeEnd:function(Str){ 
  10.         console.timeEnd(Str); 
  11.     } 
  12. }; 
  13. //==================工具函數(shù)====================== 
  14. var domString2Dom = (function () { 
  15.     var container; 
  16.     if (window.HTMLTemplateElement) { 
  17.         container = document.createElement("template"); 
  18.         return function (domString) { 
  19.             container.innerHTML = domString; 
  20.             return container.content.firstChild.cloneNode(true); 
  21.         }; 
  22.     } 
  23.     else { 
  24.         //對不支持的template 的瀏覽器還有兼容性方法沒寫，所以不支持tr,td等些元素inner進div中。 
  25.         container = document.createElement("div"); 
  26.         return function (domString) { 
  27.             container.innerHTML = domString; 
  28.             return container.firstChild.cloneNode(true); 
  29.         }; 
  30.     } 
  31. })(); 
  32. var XMLParser = (function () { 
  33.     var $DOMParser; 
  34.     if (window.DOMParser) { 
  35.         $DOMParser = new DOMParser(); 
  36.         return function (domString) { 
  37.             if (domString[0] == "<") { 
  38.                 var doc = $DOMParser.parseFromString(domString, "application/xhtml+xml"); 
  39.                 return doc.firstChild; 
  40.             } 
  41.             else { 
  42.                 return document.createTextNode(domString); 
  43.             } 
  44.         }; 
  45.     }else{ 
  46.         $DOMParser = new ActiveXObject("Microsoft.XMLDOM"); 
  47.         return function (domString) { 
  48.             if (domString[0] == "<") { 
  49.                 $DOMParser.async = false; 
  50.                 $DOMParser.loadXML(domString);    
  51.                 return $DOMParser 
  52.             } 
  53.             else { 
  54.                 return document.createTextNode(domString); 
  55.             }                 
  56.         } 
  57.  
  58.     } 
  59.  
  60. })(); 
  61. //=============================================== 
  62.  
  63. var Test = function(Count){ 
  64.     //保留這種寫法，能夠在移動端平臺中不依靠控制臺進行效率測試 
  65.     // var DateCount = { 
  66.     //     TimeList : {}, 
  67.     //     time:function(Str){ 
  68.     //         this.TimeList[Str] = Date.now(); 
  69.     //     }, 
  70.     //     timeEnd:function(Str){ 
  71.     //         alert(Str+(Date.now() - this.TimeList[Str])); 
  72.     //     } 
  73.     // } 
  74.  
  75.         //基準(zhǔn)測試1： 
  76.     DateCount.time("無臨時div + 不需要字符串拼接 + innerHTML：") 
  77.     for (let index = 0; index < Count; index++) { 
  78.         (function(){ 
  79.             var template = document.createElement("div"); 
  80.                 template.className = "TestClass"; 
  81.                 template.setAttribute("Arg","TestArg") 
  82.                 template.innerHTML = ` Test TextNode 
  83. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  84. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  85. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  86. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  87. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  88. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  89. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  90. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  91. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  92. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  93. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  94. <div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div><div child="true">M</div> 
  95. ` //需要增加的一大段Element,共100個子級div 
  96.             return template 
  97.         }())   
  98.     } 
  99.     DateCount.timeEnd("無臨時div + 不需要字符串拼接 + innerHTML：") 
  100.  
  101.     //基準(zhǔn)測試2： 
  102.     DateCount.time("createElement+appendChild寫法：") 
  103.     for (let index = 0; index < Count; index++) { 
  104.         (function(){ 
  105.             var template = document.createElement("div"); 
  106.                 template.className = "TestClass"; 
  107.                 template.setAttribute("Arg","TestArg") 
  108.  
  109.                 template.appendChild(document.createTextNode('Test TextNode')); 
  110.                 for (let index = 0; index < 100; index++) { 
  111.                     let element = document.createElement("div"); 
  112.                         element.setAttribute("child","true"); 
  113.                         element.appendChild(document.createTextNode("M")) 
  114.                         template.appendChild(element) 
  115.                 } 
  116.             return template 
  117.         }())   
  118.     } 
  119.     DateCount.timeEnd("createElement+appendChild寫法：")     
  120.  
  121.     //DocumentFragment  
  122.     DateCount.time("DocumentFragment+ createElement+appendChild 寫法：") 
  123.     for (let index = 0; index < Count; index++) { 
  124.         (function(){ 
  125.             var fragment = document.createDocumentFragment(); 
  126.                 fragment.appendChild(function(){ 
  127.                     var template = document.createElement("div"); 
  128.                         template.className = "TestClass"; 
  129.                         template.setAttribute("Arg","TestArg") 
  130.  
  131.                         template.appendChild(document.createTextNode('Test TextNode')); 
  132.                         for (let index = 0; index < 100; index++) { 
  133.                             let element = document.createElement("div"); 
  134.                                 element.setAttribute("child","true"); 
  135.                                 template.appendChild(element) 
  136.                         } 
  137.                     return template; 
  138.                 }()); 
  139.  
  140.             return fragment 
  141.         }())   
  142.     } 
  143.     DateCount.timeEnd("DocumentFragment+ createElement+appendChild 寫法：")     
  144.  
  145.     //DomString——臨時Element+innerHTML+cloneNode 
  146.     // DateCount.time("DomString——臨時Element+innerHTML+cloneNode：") 
  147.     // for (let index = 0; index < Count; index++) { 
  148.     //     (function(){ 
  149.     //         var template = domString2Dom('<div class="TestClass" Arg="TestArg"></div>'); 
  150.     //         for (let index = 0; index < 100; index++) {     
  151.     //             template.appendChild( 
  152.     //                 (function(){ 
  153.     //                     var el = domString2Dom("<div child='true'>M</div>"); 
  154.     //                     return el 
  155.     //                 })() 
  156.     //             )                 
  157.     //         } 
  158.     //         return template; 
  159.     //     }())   
  160.     // } 
  161.     // DateCount.timeEnd("DomString——臨時Element+innerHTML+cloneNode：")     
  162.  
  163.     //DomString——XML解析 
  164.     // DateCount.time("DomString——XML解析：") 
  165.     // for (let index = 0; index < Count; index++) { 
  166.     //     (function(){ 
  167.     //         var template = XMLParser('<div class="TestClass" Arg="TestArg"></div>'); 
  168.     //         for (let index = 0; index < 100; index++) { 
  169.     //             template.appendChild((function () { 
  170.     //                 var el = XMLParser("<div child='true'>M</div>"); 
  171.     //                 return el; 
  172.     //             })()); 
  173.     //         } 
  174.     //     }())   
  175.     // } 
  176.     // DateCount.timeEnd("DomString——XML解析：")    
  177.  
  178.     //臨時div + 臨時字符串拼接： 
  179.     DateCount.time("臨時div + 字符串拼接：") 
  180.     for (let index = 0; index < Count; index++) { 
  181.         (function(){ 
  182.             let template = document.createElement("div"); 
  183.             template.innerHTML = `<div class="TestClass" Arg="TestArg"> 
  184.                                     Test TextNode 
  185.                                     ${(function(){ 
  186.                                         let temp = ""; 
  187.                                         for (let index = 0; index < 100; index++) { 
  188.                                             temp+="<div child='true'>M</div>" 
  189.                                         } 
  190.                                         return temp 
  191.                                     }())} 
  192.                                 </div>` //需要增加的一大段Element 
  193.             return template.firstChild; 
  194.          }())   
  195.     } 
  196.     DateCount.timeEnd("臨時div + 字符串拼接：") 
  197.  
  198.     //臨時template + 臨時字符串拼接： 
  199.     DateCount.time("臨時template + 字符串拼接：") 
  200.     for (let index = 0; index < Count; index++) { 
  201.         (function(){ 
  202.             var template = document.createElement("template"); 
  203.             template.innerHTML = `<div class="TestClass" Arg="TestArg"> 
  204.                                     Test TextNode 
  205.                                     ${(function(){ 
  206.                                         let temp = ""; 
  207.                                         for (let index = 0; index < 100; index++) { 
  208.                                             temp+="<div child='true'>M</div>" 
  209.                                         } 
  210.                                         return temp 
  211.                                     }())} 
  212.                                 </div>` //需要增加的一大段Element 
  213.             return template.content; 
  214.          }())   
  215.     } 
  216.     DateCount.timeEnd("臨時template + 字符串拼接：") 
  217.  
  218.     //臨時template + createElement+appendChild 寫法 
  219.     DateCount.time("template + createElement+appendChild 寫法：") 
  220.     for (let index = 0; index < Count; index++) { 
  221.         (function(){ 
  222.             var template = document.createElement("template"); 
  223.                 template.appendChild(function(){ 
  224.                     var template = document.createElement("div"); 
  225.                         template.className = "TestClass"; 
  226.                         template.setAttribute("Arg","TestArg") 
  227.  
  228.                         template.appendChild(document.createTextNode('Test TextNode')); 
  229.                         for (let index = 0; index < 100; index++) { 
  230.                             let element = document.createElement("div"); 
  231.                                 element.setAttribute("child","true"); 
  232.                                 template.appendChild(element) 
  233.                         } 
  234.                     return template; 
  235.                 }()); 
  236.             return template.content 
  237.          }())   
  238.     } 
  239.     DateCount.timeEnd("template + createElement+appendChild 寫法：") 
  240.  
  241. }; 
  242.  
  243. for (var key of [1,10,100,1000]) { 
  244.     console.log("Start"+key); 
  245.     Test(key); 
  246. } 

 十、結(jié)論

經(jīng)過筆者基本依據(jù)手上平臺進行測試，

  • 無臨時div + 不需要字符串拼接 + innerHTML // createElement+appendChild寫法：性能低，無論在桌面端還是移動端，在IE/Edge系還是 Webkit系都是同樣的表現(xiàn)
  • domString 方法：性能最差
  • DocumentFragment+ createElement+appendChild 寫法：性能在桌面WebKit端表現(xiàn)***，移動端也有不錯的表現(xiàn)
  • 字符串拼接：臨時div + 字符串拼接/臨時template + 字符串拼接：性能表現(xiàn)基本一致，桌面端WebKit上：比DocumentFragment(或tmplate) + createElement+appendChild性能差多了;與之相反，在IE系inneHTML的性能***，是前者的x十倍。在移動端上兩者性能相近，innerHTML略差一點點。
  • template + createElement+appendChild 寫法：與DocumentFragment+ createElement+appendChild 寫法效率相仿。

具體數(shù)據(jù)測試之后再補充。

(待續(xù))

責(zé)任編輯：龐桂玉 來源： 雕刻零碎的博客
前端DOMElement
相關(guān)推薦

2015-12-30 14:16:05

iOS動畫視圖渲染

2015-12-23 09:16:33

ios動畫渲染機制

2009-06-16 15:03:53

Hibernate保存Hibernate

2015-09-01 13:34:43

數(shù)據(jù)中心付費方式

2017-01-04 10:18:00

React NativScrollViewAndroid

2023-01-30 08:42:33

CSS選擇器性能

2015-11-10 09:34:58

JavaScript方式

2021-08-05 07:00:04

框性能優(yōu)化element

2010-03-10 18:42:30

Python性能

2010-01-04 15:36:52

以太網(wǎng)交換機

2010-01-28 15:05:52

網(wǎng)絡(luò)交換機

2015-03-18 09:59:14

CSSCSS提高渲染性

2023-07-10 16:18:18

性能優(yōu)化開發(fā)

2015-09-16 13:54:30

Android性能優(yōu)化渲染

2022-04-27 10:35:27

邊緣渲染前端

2009-10-29 09:15:59

家庭寬帶接入方式

2023-01-05 08:27:04

Stream執(zhí)行流程

2023-11-18 19:46:07

GPU架構(gòu)

2022-12-12 09:01:13

2012-07-31 09:02:49

Apworks
點贊
收藏

51CTO技術(shù)棧公眾號