1.
1JavaScript 開發實戰多奇數位創意有限公司技術總監 黃保翕 ( Will 保哥 )部落格：http://blog.miniasp.com/效能調校與常見陷阱

2.
All services from your imperative.2JAVASCRIPT 效能調校Performance Tuning for JavaScript

3.
All services from your imperative.3網站效能調校基礎 (1) 用戶端 HTTP 相關的各種調校 下載所使用的頻寬 DNS 查詢的時間長短 CSS 顯示的速度 JavaScript 執行的速度 使用 AJAX 開發方式 行動平台與瀏覽器特性 伺服器端 程式效能 快取策略 內容壓縮 輸出快取 壓力測試 壓力測試報告

4.
All services from your imperative.4網站效能調校基礎 (2) HTTP HTTP 協定 Keep-Alive HTTP 標頭 HTTP 限制 HTTP 壓縮 HTTP 快取 HTML5 / JS JavaScript 優化 離線應用程式 IndexedDB Web Storage Web Socket Web Worker XMLHttpRequest CSS3 移動特校(Transitions) 變形特校(Transforms) 圓角框線(Border Radius) 陰影效果(Box Shadow) 網頁字型(Web Fonts) 其他CSS Media QueriesCSS Sprite

5.
All services from your imperative.5效能調校三部曲 測量 數據量化 找 “慢” 點 理解 了解問題 吸收新知 調校 修正問題 效能提升

6.
All services from your imperative.6量測Measure the problem

7.
All services from your imperative.7Internet Explorer 開發人員工具 分析工具

8.
All services from your imperative.8Chrome 開發人員工具 Profiles

9.
All services from your imperative.9Chrome 開發人員工具 Timeline

10.
All services from your imperative.10jsPerf ─ http://jsperf.com/ 測試片段 Code Snippet 的效能

11.
All services from your imperative.11理解Understanding the bottleneck

12.
All services from your imperative.12Object 與 Array，我該選哪一個？ 使用 Object 的時機 無順序的集合 需要用字串當索引的情境 使用 Array 的時機 有順序的陣列 需要用數字當索引的情境

13.
All services from your imperative.13使用 Object 的技巧 基本原則 使用 建構子函式 (constructor) 建立物件，不要用 Object.create() 建立物件 不要使用過多的繼承，減少 prototype chains 的層級 效能評比 Object.create() vs. constructor vs. object literalhttp://jsperf.com/object-create-vs-constructor-vs-object-literal/7

14.
All services from your imperative.14使用 Array 的技巧 基本原則 使用 Array Literals 建立陣列 var a = [1, 2, 3, 4]; 在陣列中使用一致的型別 (Type) 陣列索引最好能連貫 (元素之間不要中空) 效能評比 type-inference-performancehttp://jsperf.com/type-inference-performance/2 Packed vs. holey arrayshttp://jsperf.com/packed-vs-holey-arrays

15.
All services from your imperative.15優化 JavaScript 記憶體使用效率 提升 Garbage Collector 效率 全域變數不會自動 GC 直到換頁或重載var myGlobalNamespace = {}; 盡量在 function 內使用 var 宣告區域變數function HelloWorld() {var str = test;alert(str);}​

16.
All services from your imperative.16JavaScript 的 Scope 觀念 變數何時會列入 GC 範圍？ function foo() {var bar = new LargeObject();bar.someCall();} function foo() {var bar = new LargeObject();bar.someCall();return bar;}var b = foo();

17.
All services from your imperative.17JavaScript 的 Scope 觀念 利用匿名函式降低使用全域變數的機會(function() {function foo() {var bar = new LargeObject();bar.someCall();return bar;}var b = foo();})();

18.
All services from your imperative.18使用 window.setTimeout 的注意事項 無法 GC 的情況 ( De-referencing ) var myObj = {callMeMaybe: function () {var myRef = this;var val = setTimeout(function () {console.log(Time is runningout!);myRef.callMeMaybe();}, 1000);}}; myObj.callMeMaybe();myObj = null;

19.
All services from your imperative.19DOM 快取 http://jsperf.com/each-loop-dom-cache/2

20.
All services from your imperative.20調校Performance Tuning

21.
All services from your imperative.21進入調校工作只要了解問題問題已經解決一半!剩下的就只有時間問題但真正的問題是偏偏時間不夠 XD

22.
All services from your imperative.22JAVASCRIPT 常見陷阱Common Pitfall for JavaScript

23.
All services from your imperative.23Douglas Crockford 大師說： JavaScript：世界上被誤解最深的程式語言http://javascript.crockford.com/javascript.html

24.
All services from your imperative.24關於 ”型別轉換” JavaScript 是一種動態型別或弱型別 var x; var x = 5; var x = "John"; 常見錯誤 new Number(10) == 10; // Number.toString() 後轉回數字 new Number(10) === Number(10) 10 == 010; // 字串 10 轉成了數字 10 == +10 ; 10 == 010; // false isNaN(undefined) == true isNaN(null) == true; // false => 因為 null 會先轉成 0註: isNaN = Is Not a Number = 是否可轉成數字型別

25.
All services from your imperative.25關於 “數字” 數字是物件，但卻又不像物件 2.toString(); // SyntaxError 整數遇到小數點，就會轉換成浮點數 0.1 + 0.2 0.3 – 0.1 0.1 * 0.2 0.3 / 0.1 解決方案 2..toString(); 2 .toString(); (2).toString(); parseInt((0.1 + 0.2)*10)/10

26.
All services from your imperative.26關於 ”物件” JavaScript 所有東西都是物件，除了？ undefined null string  String 物件 number  Number 物件 boolean  Boolean 物件 基礎型別 (Primitive Type) 的特性 無法在基礎型別上擴增屬性 但可在其上層物件中擴增屬性

27.
All services from your imperative.27關於 ”物件” 存取屬性的方法 var foo = {name: kitten} foo.name; // kitten foo[name]; // kitten var get = name; foo[get]; // kitten foo.1234; // SyntaxError foo[1234]; // works

28.
All services from your imperative.28關於 ”物件” 刪除屬性的方法 var o = { x: 1 }; delete o.x; // true o.x; // undefined 重點分析 開發人員應避免在執行時期修改物件結構 如果物件結構沒有異動，JavaScript 引擎會更容易找到最佳存取路徑 但使用 delete 刪除物件屬性卻會導致最佳化失效，進而減低物件的操作效率

29.
All services from your imperative.29關於 ”物件” 指定 null 或 undefined 不會刪除屬性 var o = { x: 1 }; o = null; o; // null o.x // TypeError 重點分析 當變數指派為 null 之後，並不是把物件設定為 NULL，而是將物件指標指向一個 null 物件 這會讓該變數無法進入 GC 狀態，導致記憶體無法回收typeof(null) == object

30.
All services from your imperative.30關於 ”物件” 使用 Object Literal 指定屬性的表示法 var test = { case: 使用關鍵字, delete: 使用關鍵字，但不加上引號 // SyntaxError }; 重點分析 ECMAScript 5 之前，不支援關鍵字命名也就是 IE6 / IE7 / IE8 這三個版本 只要宣告成 delete (字串形式) 就能解決

31.
All services from your imperative.31關於 ”函式” (Function) 存取上層物件 (this) 的方法 Foo.method = function() { var that = this; function test() { var parent_object = that; } test(); } Foo.method = function() { (function(that) { var test = function() { var parent_object = that; } test(); })(this); }

32.
All services from your imperative.32結論 JavaScript 效能調校的步驟 量測 理解 調校 別再誤會 JavaScript 了 型別轉換 數字 物件 函式

33.
All services from your imperative.33參考連結 Writing Fast, Memory-Efficient JavaScript http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/ JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/ JavaScript: The Good Parts https://www.youtube.com/watch?v=hQVTIJBZook

34.
All services from your imperative.34聯絡資訊 The Will Will Web記載著 Will 在網路世界的學習心得與技術分享 http://blog.miniasp.com/ Will 保哥的技術交流中心 (臉書粉絲專頁) http://www.facebook.com/will.fans ★ ★ ★ Will 保哥的噗浪 ★ ★ ★ http://www.plurk.com/willh/invite

35.
All services from your imperative.35感謝各位

36.
All services from your imperative.36Will 保哥的 YouTube 影音教學中心