高性能 JavaScript 編程 讀書筆記

1.將全部<script>標籤放置在</body>上方，由於下載,運行js會阻塞瀏覽器解析dom
2.非阻塞腳本的祕密在於，等頁面完成加載後，再加載javaScript源碼，從技術角度講，這意味着在window的load事件發出後開始下載代碼。
能夠經過成熟的框架，如lazyLoad，LABjs等實現。
 
3. 函數中局部變量的訪問速度老是最快的，而全局變量一般是最慢的，全局變量老是處於運行期上下文做用域鏈的最後一個位置 
4. 用局部變量存儲本地範圍以外的變量值。
5. 只有絕對必要時才推薦使用動態做用域。帶with ,cath , ()  //或者說避免使用
6. 在腳本中最好當心使用閉包，內存和運行速度都值得被關注。可是你能夠將經常使用的域外變量存入局部變量中，而後直接訪問局部變量。
7. 用局部變量緩存深度的對象成員
8. 將常用的對象成員，數組項和域外變量存入局部變量中，而後訪問局部變量的速度會快於那些原始的變量。




9.  dom對象必須緩存
10.輕輕地觸摸DOM，並儘可能保持在ECMAScript範圍中
11.HTML集合實際是查詢文檔，當你更新信息時，每一次都要重複執行這種查詢操做！！！使用的時候必定要緩存length
12.訪問HTML集合元素時使用局部變量
function collectionNodesLocal(){
var coll = document.getElementById_r('div'),
len = coll.length,
name = '',
el = null;
for(var count = 0; count < len; count++){
el = coll[count]'
name = el.nodeName;
name = el.nodeType;
name = el.tagName;
}

}

13.使用瀏覽器提供的API過濾非元素節點。

14.學會使用querySelector和querySelectorAll(IE7不支持)
15.當DOM改變影響到元素的幾何屬性（寬和高）--例如改變了邊框的高度或在段落中添加文字，將發生一系列後續動做---- 瀏覽器須要從新計算元素的幾何屬性，並且其餘元素的幾何屬性和位置也會所以 改變受到影響。瀏覽器使渲染樹上受到影響的部分失效，而後重構渲染樹。這個過程叫作重排版。重排版完成時，瀏覽器在一個重繪進程中從新繪製屏幕上受影響的部分。
不是全部的DOM改變都會影響幾何屬性。例如，改變一個元素的背景顏色不會影響它的高度和寬度，在這種狀況下，只須要重繪（不須要從新排版），由於元素的佈局沒有改變。

(1)在下述的狀況下會發生重排版：
(2)添加或刪除可見的DOM元素。
(3)元素位置改變。
(4)元素尺寸改變。
(5)內容改變。例如，文本改變或圖片被另外一個不 同尺寸的所替代。
(6)最初的頁面渲染。
(7)瀏覽器窗口改變尺寸。
(8)根據改變的性質，渲染樹上或大或小的一部分重要從新計算。某些改變可致使重排版整    個頁面：例如 ，當一個滾動條出現時。




16.將多個DOM和風格改變合併到一個批次上一次性執行，減小重排版和重繪。由於它們的代價昂貴。
(1)
var el = document.getElementById('');
el.style.cssText ='border-left:1px;border-rigth:2px;padding:5px';


jquery 使用：
$("p").css({
 
"color":"white",
 
  "background-color":"#98bf21",
 
"font-family":"Arial",
 
     "font-size":"20px",
 
  "padding":"5px"
 
  });


(2)改變css的類名稱。
17.當你查詢佈局信息，如偏移量，滾動條位置，或風格屬性時，瀏覽器刷新隊列並執行全部的修改操做，以返回最新的數值。最好是儘可能減小對佈局信息的查詢次數，查詢時將它賦給局部變量，並用局部變量參與計算。
18.將元素提出動畫流
(1)使用絕對座標定位頁面動畫的元素，使它位於頁面佈局流以外。
(2)啓動元素動畫。當它擴大時，它臨時覆蓋部分頁面。這是一個重繪過程，但隻影響頁面的一小部分，避免重排版並重繪一大塊頁面。
(3)當動畫結束時，從新定位，從而只一次下移文檔其餘元素的位置。


19.事件託管 
事件逐層冒泡總能被父元素捕獲。你只須要在一個包裝元素上綁定一個事件，事件處理時訪問事件對象，並判斷事件源(目標)，就能夠處理子元素髮生的全部事件。
20.


21.除非你須要對數目不詳的對象屬性進行操做，不然避免使用for-in循環，若是你迭代遍歷一個有限的，已知其餘循環類型更快。
22.減小對象成員和數組項查找的次數(緩存數組項，數組長度)
23.一般，數組元素的處理順序與任務無關，你能夠從最後一個開始，直處處理完第一個元素。
24.將最多見的條件放到首位。
25.查表法




27.javascript和UI更新共享的進程一般被稱做瀏覽器UI線程。此UI線程圍繞一個簡單隊列系統工做。任務被保存到隊列中直到進程空閒。一旦空閒，隊列中的下一個任務將被檢索和運行。這些任務運行Javasc代碼或執行UI更新，包括重繪和重排版。每一次用戶輸入都致使一個或多個任務被加入 。




28.大多數狀況下，不必使用eval()或Function，若是可能的話，儘可能避免使用它們。setTimeout()和setInterval()，建議第一個參數傳入一個函數而不是一個字符串。
27.使用對象/數組直接量
var object = {
name:'',
count:30
} 
var array = ['Yal,30,true];


29.延遲加載
使用以前不作任何工做。如：
function addHandler(target,eventType,handler){
if(target.addEventListener){  //DOM2 Events
addHandler = function(target,eventType,handler){ //修改了addHandler
target.addEventListener(eventType,handler,false)
}
}
else{  //IE
addHandler = function(target,eventType,handler){ //修改了addHandler
target.attachEvent("on" + eventType,handler);
}
}


}
30.條件預加載
在腳本加載以前提早時行檢查，而不等等函數調用。
var addHandler = document.body.addEventListener?
function(target,eventType,handler){  //DOM2 events
target.addEventListener(eventType,handler,false);
}:
function(target,eventType,handler) {  // IE
target.attachEvent('on' + eventType,handler);
}

31.多使用原生方法，如Math中的數學方法

如下記錄是我的閱讀高性能 JavaScript 編程時以爲有用的知識，（其中有兩章，第五章：字符串和表達式，第七章：ajax和xml沒有閱讀），

固然這麼好的書，必定會有錯漏的地方。下面給出下載地址

http://download.csdn.net/detail/q1w2e3a_4s5d6z/6743101