《高性能JavaScript》學習筆記(2)——日更中

我說日更就日更，接着....今天從緩衝佈局信息開始啦！

-------------------2016-7-22 21:09:12-------------------------------

1四、減小對佈局信息的查詢次數，查詢時將他賦值給局部變量參與計算。

例子，在元素網右下方不斷平移時，在timeout中能夠寫：

1     var current = myElement.offsetLeft;
2     current++;
3     myElement.style.left = current + 'px';
4     myElement.style.top =  current + 'px';
5     if(current > 500){
6         //stop animation
7     }

//拒絕下面的寫法，每次移動都會查詢一次偏移量，致使瀏覽器刷新渲染隊列，很是耗時

1     myElement.style.left = myElement.offsetLeft + 'px';
2     myElement.style.top =  myElement.offsetLeft + 'px';
3     if(myElement.offsetLeft > 500){
4         //stop animation
5     }

1五、大量的元素使用：hover以後，頁面性能將下降，特別是IE8中。所以強烈建議，在數據量很大的表格中，減小鼠標在表上移動效果，減小高亮行的顯示，使用高亮是個慢速過程CPU使用率會提升到80%-90%，儘可能避免使用這種效果。

1六、事件託管

講到事件託管，首先咱們來看一看冒泡機制：

DOM2級事件規定事件包括三個階段： ① 事件捕獲階段 ② 處於目標階段 ③ 事件冒泡階段

圖片引用來源：http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

以下圖的實驗結果能夠知道，當咱們點擊了inner以後，捕獲和冒泡結果如上圖的規律相同；

所以，由於每個元素有一個或多個事件句柄與之相連時，可能會影響性能，畢竟鏈接每個句柄都是有代價的，因此咱們採用事件託管技術，在一個包裝元素上掛接一個句柄，用於處理子元素髮生的全部事件。

下面咱們以以下的dom結構爲例：

假若有一個ul，下面有不少個li：

1     <div>
2         <ul id="ulList">
3             <li id="item1"></li>
4             <li id="item2"></li>
5             <li id="item3"></li>
6             <li id="item4"></li>
7             <li id="item5"></li>
8         </ul>
9     </div>

當某個Li被點擊的時候須要觸發相應的處理事件。咱們一般的寫法，是爲每一個Li都添加onClick的事件監聽。

 1 function addListenersLi(liNode){
 2     liNode.onclick = function clickHandler(){}
 3 }
 4 
 5 window.onload = function(){
 6     var ulNode = document.getElementById("ulList");
 7     var liNodes = ulNode.getElementByTagName("li");
 8     for(var i=0, l = liNodes.length; i < l; i++){
 9         addListeners4Li(liNodes[i]);
10     }   
11 }

若是li足夠多，或者對於li的操做特別頻繁，爲每個li綁定一個點擊事件將會特別影響性能，由於在此期間，你須要訪問和修改更多的DOM節點，事件的綁定過程發生在onload事件中，綁定自己也很是耗時；同時，瀏覽器須要保存每一個句柄的記錄，很佔用內存。重點是有些綁定了還不必定會用着，並非100%的按鈕或連接都會被點到的喲！

所以，採用事件託管更爲高效，當事件被拋到更上層的父節點的時候，咱們經過檢查事件的目標對象（target）來判斷並獲取事件源Li。下面的代碼能夠完成咱們想要的效果：

 1         var oul = document.getElementById('ulList');
 2         oul.addEventListener('click',function(e){
 3             var e = e || window.event;
 4             var target = e.target || e.srcElement;
 5 
 6             console.log(target.nodeName);
 7             if(target.nodeName == 'LI'){
 8                 //事件真正的處理程序
 9                 alert(target.id);
10                 e.preventDefault();
11                 e.stopPropagation();
12             }else{
13                 alert(456);
14             }
15 
16         });

 

太晚了，睡覺了，明天再繼續，有問題，請多多指教！