Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

11,859 views

Published on

這是 Will 保哥在 2013 JSDC.tw 演講主題【JavaScript 開發實戰:效能調校與常見陷阱】所用的簡報,當中分享許多 JavaScript 效能調校的基本步驟與工具,最後並分享一些實務上在撰寫 JavaScript 的過程中常見的誤解與陷阱。

Published in: Technology

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

  1. 1. 1JavaScript 開發實戰多奇數位創意有限公司技術總監 黃保翕 ( Will 保哥 )部落格:http://blog.miniasp.com/效能調校與常見陷阱
  2. 2. All services from your imperative.2JAVASCRIPT 效能調校Performance Tuning for JavaScript
  3. 3. All services from your imperative.3網站效能調校基礎 (1) 用戶端 HTTP 相關的各種調校 下載所使用的頻寬 DNS 查詢的時間長短 CSS 顯示的速度 JavaScript 執行的速度 使用 AJAX 開發方式 行動平台與瀏覽器特性 伺服器端 程式效能 快取策略 內容壓縮 輸出快取 壓力測試 壓力測試報告
  4. 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. 5. All services from your imperative.5效能調校三部曲 測量 數據量化 找 “慢” 點 理解 了解問題 吸收新知 調校 修正問題 效能提升
  6. 6. All services from your imperative.6量測Measure the problem
  7. 7. All services from your imperative.7Internet Explorer 開發人員工具 分析工具
  8. 8. All services from your imperative.8Chrome 開發人員工具 Profiles
  9. 9. All services from your imperative.9Chrome 開發人員工具 Timeline
  10. 10. All services from your imperative.10jsPerf ─ http://jsperf.com/ 測試片段 Code Snippet 的效能
  11. 11. All services from your imperative.11理解Understanding the bottleneck
  12. 12. All services from your imperative.12Object 與 Array,我該選哪一個? 使用 Object 的時機 無順序的集合 需要用字串當索引的情境 使用 Array 的時機 有順序的陣列 需要用數字當索引的情境
  13. 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. 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. 15. All services from your imperative.15優化 JavaScript 記憶體使用效率 提升 Garbage Collector 效率 全域變數不會自動 GC 直到換頁或重載var myGlobalNamespace = {}; 盡量在 function 內使用 var 宣告區域變數function HelloWorld() {var str = test;alert(str);}​
  16. 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. 17. All services from your imperative.17JavaScript 的 Scope 觀念 利用匿名函式降低使用全域變數的機會(function() {function foo() {var bar = new LargeObject();bar.someCall();return bar;}var b = foo();})();
  18. 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. 19. All services from your imperative.19DOM 快取 http://jsperf.com/each-loop-dom-cache/2
  20. 20. All services from your imperative.20調校Performance Tuning
  21. 21. All services from your imperative.21進入調校工作只要了解問題問題已經解決一半!剩下的就只有時間問題但真正的問題是偏偏時間不夠 XD
  22. 22. All services from your imperative.22JAVASCRIPT 常見陷阱Common Pitfall for JavaScript
  23. 23. All services from your imperative.23Douglas Crockford 大師說: JavaScript:世界上被誤解最深的程式語言http://javascript.crockford.com/javascript.html
  24. 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. 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. 26. All services from your imperative.26關於 ”物件” JavaScript 所有東西都是物件,除了? undefined null string  String 物件 number  Number 物件 boolean  Boolean 物件 基礎型別 (Primitive Type) 的特性 無法在基礎型別上擴增屬性 但可在其上層物件中擴增屬性
  27. 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. 28. All services from your imperative.28關於 ”物件” 刪除屬性的方法 var o = { x: 1 }; delete o.x; // true o.x; // undefined 重點分析 開發人員應避免在執行時期修改物件結構 如果物件結構沒有異動,JavaScript 引擎會更容易找到最佳存取路徑 但使用 delete 刪除物件屬性卻會導致最佳化失效,進而減低物件的操作效率
  29. 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. 30. All services from your imperative.30關於 ”物件” 使用 Object Literal 指定屬性的表示法 var test = { case: 使用關鍵字, delete: 使用關鍵字,但不加上引號 // SyntaxError }; 重點分析 ECMAScript 5 之前,不支援關鍵字命名也就是 IE6 / IE7 / IE8 這三個版本 只要宣告成 delete (字串形式) 就能解決
  31. 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. 32. All services from your imperative.32結論 JavaScript 效能調校的步驟 量測 理解 調校 別再誤會 JavaScript 了 型別轉換 數字 物件 函式
  33. 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. 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. 35. All services from your imperative.35感謝各位
  36. 36. All services from your imperative.36Will 保哥的 YouTube 影音教學中心

×