JSDC 2013 保哥:效能調校與常見陷阱 觀後筆記

JavaScript 開發實戰：效能調校與常見陷阱 (2013 JSDC.tw)

1.善用瀏覽器的開發者工具

• 若要做比較專業的網頁動作或封包分析，之前會使用fiddler2這套軟體。
• 瀏覽器中的工具其實也可以做到蠻專業的分析。
• 使用Chrome開發人員工具(F12)中的Console來進行javascript測試

  

 

2.jsPerf：

• http://jsperf.com
• 功能：測試javascript片段效能。
• 測試時，系統會跑很多次javascript片段來測效能。

 

3.Object與Array該選哪一個？

• Object：無順序陣列、需要用字串當索引的情境
• Arrray：有順序的集合、需要用數字當索引的情境

4.使用Object技巧：

• 基本原則：
  • 使用建構子函式(Constructor)建立物件，不要用Object.create()建立物件
  • 不要使用過多的繼承，減少prototype chains的層級。

5.使用Array技巧：

• 基本原則：
  • 使用Array Literals建立陣列，ex: var a={1,2,3,4};
  • 在陣列中使用一致的型別(Type)，ex:會需要做轉型所以效能會減低。
  • 陣列索引最好能連貫(元素之間不要中空)
    • ex:{1,/*洞*/,3}，若array[0]如果不見，效能會掉2%左右。

6.優化javascript記憶體使用效率：

• 提升garbage collector效率：
  • 全域變數不會自動GC，直到換頁或重載，否則記憶體用不釋放。
    • var myGlobalNamespace={};
  • 盡量在fuction內使用var宣告區域變數

    fuction HelloWorld()
    {
    	var str = 'test';
    	alert(str);
    }

7.JavaScript的Scope觀念：

• 變數何時會列入GC範圍？
  


• 利用匿名函式降低使用全域變數的機會
  

8.使用window.setTimeout的注意事項

• 無法GC的情況(De-referencing)：setTimeout是傳function

9.DOM快取

• 將jquery物件cache起來使用，jquery重覆搜尋物件相對效能會比較低。

10.關於型別轉換

• javascript是一種動態型別或弱型別。