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

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

Recommended

DEV305 - ASP.NET 5 開發攻略 by
DEV305 - ASP.NET 5 開發攻略DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略Will Huang
6.1K views39 slides
ASP.NET MVC 6 新功能探索 by
ASP.NET MVC 6 新功能探索ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索Will Huang
11.5K views48 slides
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案) by
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)Will Huang
5.7K views64 slides
保哥線上講堂:LINQ 快速上手 by
保哥線上講堂:LINQ 快速上手保哥線上講堂:LINQ 快速上手
保哥線上講堂:LINQ 快速上手Will Huang
20.9K views41 slides
2013-05-18_JSDC.TW-security-for-frontend-engineer-final (後傳) by
2013-05-18_JSDC.TW-security-for-frontend-engineer-final (後傳)2013-05-18_JSDC.TW-security-for-frontend-engineer-final (後傳)
2013-05-18_JSDC.TW-security-for-frontend-engineer-final (後傳)Yi-Feng Tzeng
9.3K views120 slides
【iT邦幫忙交流聚(1)】創業路遙遙 by
【iT邦幫忙交流聚(1)】創業路遙遙【iT邦幫忙交流聚(1)】創業路遙遙
【iT邦幫忙交流聚(1)】創業路遙遙Brecht Huang
775 views16 slides

More Related Content

Viewers also liked

沒有雪沒有七彩花田,秋天都要去北海道自駕遊!(香港國際旅遊展2014) by
沒有雪沒有七彩花田,秋天都要去北海道自駕遊!(香港國際旅遊展2014)沒有雪沒有七彩花田,秋天都要去北海道自駕遊!(香港國際旅遊展2014)
沒有雪沒有七彩花田,秋天都要去北海道自駕遊!(香港國際旅遊展2014)Auto Holiday
1.6K views31 slides
使用 ASP.NET 5 實戰開發雲端應用程式 by
使用 ASP.NET 5 實戰開發雲端應用程式使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式Will Huang
4.3K views45 slides
在台灣導入Open Source ERP的問題與對策 by
在台灣導入Open Source ERP的問題與對策在台灣導入Open Source ERP的問題與對策
在台灣導入Open Source ERP的問題與對策Simon Huang
8.8K views20 slides
《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊 by
《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊
《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊Will Huang
2.2K views31 slides
DEV208 - ASP.NET MVC 5 新功能探索 by
DEV208 - ASP.NET MVC 5 新功能探索DEV208 - ASP.NET MVC 5 新功能探索
DEV208 - ASP.NET MVC 5 新功能探索Will Huang
6.5K views45 slides
麗明營造 NVIDIA 使用成效分享 by
麗明營造 NVIDIA 使用成效分享麗明營造 NVIDIA 使用成效分享
麗明營造 NVIDIA 使用成效分享NVIDIA Taiwan
966 views19 slides

Viewers also liked(19)

沒有雪沒有七彩花田,秋天都要去北海道自駕遊!(香港國際旅遊展2014) by Auto Holiday
沒有雪沒有七彩花田,秋天都要去北海道自駕遊!(香港國際旅遊展2014)沒有雪沒有七彩花田,秋天都要去北海道自駕遊!(香港國際旅遊展2014)
沒有雪沒有七彩花田,秋天都要去北海道自駕遊!(香港國際旅遊展2014)
Auto Holiday1.6K views
使用 ASP.NET 5 實戰開發雲端應用程式 by Will Huang
使用 ASP.NET 5 實戰開發雲端應用程式使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
Will Huang4.3K views
在台灣導入Open Source ERP的問題與對策 by Simon Huang
在台灣導入Open Source ERP的問題與對策在台灣導入Open Source ERP的問題與對策
在台灣導入Open Source ERP的問題與對策
Simon Huang8.8K views
《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊 by Will Huang
《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊
《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊
Will Huang2.2K views
DEV208 - ASP.NET MVC 5 新功能探索 by Will Huang
DEV208 - ASP.NET MVC 5 新功能探索DEV208 - ASP.NET MVC 5 新功能探索
DEV208 - ASP.NET MVC 5 新功能探索
Will Huang6.5K views
麗明營造 NVIDIA 使用成效分享 by NVIDIA Taiwan
麗明營造 NVIDIA 使用成效分享麗明營造 NVIDIA 使用成效分享
麗明營造 NVIDIA 使用成效分享
NVIDIA Taiwan966 views
程式の工業革命 初稿 by HoShi YoRu
程式の工業革命 初稿程式の工業革命 初稿
程式の工業革命 初稿
HoShi YoRu200 views
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日) by Will Huang
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
Will Huang17.4K views
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇) by Will Huang
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Will Huang13.4K views
保哥線上講堂:利用 StyleCop 撰寫一致的 C# 程式碼風格 by Will Huang
保哥線上講堂:利用 StyleCop 撰寫一致的 C# 程式碼風格保哥線上講堂:利用 StyleCop 撰寫一致的 C# 程式碼風格
保哥線上講堂:利用 StyleCop 撰寫一致的 C# 程式碼風格
Will Huang8.9K views
簡介 Git hub 平台 ( 1.5 hrs ) by Will Huang
簡介 Git hub 平台 ( 1.5 hrs )簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )
Will Huang1.7K views
空手、緊握、到放手 – 敏捷路上學到的5件事 by Yves Lin
空手、緊握、到放手 – 敏捷路上學到的5件事 空手、緊握、到放手 – 敏捷路上學到的5件事
空手、緊握、到放手 – 敏捷路上學到的5件事
Yves Lin4.2K views
git merge 與 rebase 的觀念與實務應用 by Will Huang
git merge 與 rebase 的觀念與實務應用git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用
Will Huang20.7K views
TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式 by Will Huang
TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式
TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式
Will Huang11.9K views
ASP.NET MVC 5 新功能探索 by Will Huang
ASP.NET MVC 5 新功能探索ASP.NET MVC 5 新功能探索
ASP.NET MVC 5 新功能探索
Will Huang15.3K views
恰如其分的 MySQL 設計技巧 [Modern Web 2016] by Yi-Feng Tzeng
恰如其分的 MySQL 設計技巧 [Modern Web 2016]恰如其分的 MySQL 設計技巧 [Modern Web 2016]
恰如其分的 MySQL 設計技巧 [Modern Web 2016]
Yi-Feng Tzeng4.2K views
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具 by Will Huang
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
Will Huang7.3K views
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016) by Will Huang
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
Will Huang6.5K views

More from Will Huang

深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2) by
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)Will Huang
553 views7 slides
ASP.NET Core 6.0 全新功能探索 by
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索Will Huang
2.6K views38 slides
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧! by
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!Will Huang
726 views15 slides
你一定不能不知道的 Markdown 寫作技巧 by
你一定不能不知道的 Markdown 寫作技巧你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧Will Huang
2K views31 slides
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020) by
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)Will Huang
2.8K views26 slides
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020) by
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)Will Huang
624 views15 slides

More from Will Huang(20)

深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2) by Will Huang
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
Will Huang553 views
ASP.NET Core 6.0 全新功能探索 by Will Huang
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
Will Huang2.6K views
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧! by Will Huang
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang726 views
你一定不能不知道的 Markdown 寫作技巧 by Will Huang
你一定不能不知道的 Markdown 寫作技巧你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧
Will Huang2K views
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020) by Will Huang
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
Will Huang2.8K views
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020) by Will Huang
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
Will Huang624 views
Micro-frontends with Angular 10 (Modern Web 2020) by Will Huang
Micro-frontends with Angular 10 (Modern Web 2020)Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Will Huang727 views
從實戰經驗看到的 K8S 導入痛點 by Will Huang
從實戰經驗看到的 K8S 導入痛點從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點
Will Huang3K views
RxJS 6 新手入門 by Will Huang
RxJS 6 新手入門RxJS 6 新手入門
RxJS 6 新手入門
Will Huang3.1K views
极速 Angular 开发:效能调校技巧 (ngChina 2019) by Will Huang
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
Will Huang2.3K views
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019) by Will Huang
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
Will Huang3.5K views
Protractor: The Hacker way (NG-MY 2019) by Will Huang
Protractor: The Hacker way (NG-MY 2019)Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)
Will Huang2.2K views
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization) by Will Huang
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
Will Huang1K views
Angular 开发技巧 (2018 ngChina 开发者大会) by Will Huang
Angular 开发技巧 (2018 ngChina 开发者大会)Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)
Will Huang3K views
Angular 7 全新功能探索 (Angular Taiwan 2018) by Will Huang
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang5.9K views
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay) by Will Huang
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
Will Huang1.4K views
AKS 與開發人員體驗 (Kubernetes 大講堂) by Will Huang
AKS 與開發人員體驗 (Kubernetes 大講堂)AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
Will Huang1.2K views
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018) by Will Huang
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
Will Huang4.4K views
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會) by Will Huang
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
Will Huang2.9K views
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018) by Will Huang
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang5.4K views

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

  • 1. 1 JavaScript 開發實戰 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/ 效能調校與常見陷阱
  • 2. All services from your imperative. 2 JAVASCRIPT 效能調校 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 Queries CSS Sprite
  • 5. All services from your imperative. 5 效能調校三部曲  測量  數據量化  找 “慢” 點  理解  了解問題  吸收新知  調校  修正問題  效能提升
  • 6. All services from your imperative. 6 量測 Measure the problem
  • 7. All services from your imperative. 7 Internet Explorer 開發人員工具  分析工具
  • 8. All services from your imperative. 8 Chrome 開發人員工具  Profiles
  • 9. All services from your imperative. 9 Chrome 開發人員工具  Timeline
  • 10. All services from your imperative. 10 jsPerf ─ http://jsperf.com/  測試片段 Code Snippet 的效能
  • 11. All services from your imperative. 11 理解 Understanding the bottleneck
  • 12. All services from your imperative. 12 Object 與 Array,我該選哪一個?  使用 Object 的時機  無順序的集合  需要用字串當索引的情境  使用 Array 的時機  有順序的陣列  需要用數字當索引的情境
  • 13. All services from your imperative. 13 使用 Object 的技巧  基本原則  使用 建構子函式 (constructor) 建立物件, 不要用 Object.create() 建立物件  不要使用過多的繼承, 減少 prototype chains 的層級  效能評比  Object.create() vs. constructor vs. object literal http://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-performance http://jsperf.com/type-inference-performance/2  Packed vs. holey arrays http://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. 16 JavaScript 的 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. 17 JavaScript 的 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 running out!'); myRef.callMeMaybe(); }, 1000); } };  myObj.callMeMaybe(); myObj = null;
  • 19. All services from your imperative. 19 DOM 快取  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. 22 JAVASCRIPT 常見陷阱 Common Pitfall for JavaScript
  • 23. All services from your imperative. 23 Douglas 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/writ ing-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. 36 Will 保哥的 YouTube 影音教學中心