Performance 入門 - 前端工程開發實務訓練

1

行雲流水: 網站效能
前端工程開發實務訓練 (7)

講師：蔣定宇 / josephj

Copyright © 2012 FITPI. All rights reserved.

2

Web 效能
Our performance golden rule is: optimize front-
end performance ﬁrst, that's where 80% or more
of the end-user response time is spent.

網站效能需先優化前端，因整體
Response 時間中，前端占了
80%。

Google High Performance Engineer

Steve Souders

3

網站效能檢測工具
大致來說都是在瀏覽器中安裝一個工具
它會依照一些準則 (可調整) 分析所在網頁效能

๏ Y!Slow
http://developer.yahoo.com/yslow/

๏ Page Speed
https://developers.google.com/speed/pagespeed/

練習：裝起來在你常用的網站跑跑看

4

Page Speed


5

Y!Slow


6

網頁效能項目
僅列出一些效能改進的重點

๏ Cache - 瀏覽器端、伺服器端、CDN
๏ GZip - 網頁傳輸的自動壓縮機制
๏ 減少 HTTP 的請求數量
๏ 將 CSS/JavaScript 最小化
๏ 圖片最佳化
๏ 無堵塞載入

7

CDN
๏ Content Delivery Network。
๏ Server 佈署在全世界的每個地方。
❖ Amazon 或 Akamei 都有此租賃服務。
๏ 複製來源網站的 JS / CSS / Images 等靜態檔案。
๏ 適用於跨國服務的中大型網站。
❖ 例如 Yahoo!, Google 等全球化網站。
๏ 使用者存取最近或速度最快的 CDN Server，而非原
始檔案存放的地方。

8

CDN

使用者存取最近或速度最快的 CDN Server
而非原始檔案存放的地方

9

對開發的影響
๏ CDN 一旦抓到檔案，預設會放 10 年以上。
๏ 時間內不會向你的伺服器重新索取檔案。
๏ 開發者需要改變檔名或加上版號（例如時間戳記、
或 version）才能讓 CDN 重抓資料
❖ 原始檔案：foo.js
❖ 改變檔名：foo_r1.js
❖ 增加 GET 參數：foo.js?r=1


10

GZip / Deflate
Web Server 與 Browser 間的加解壓縮機制

http://www.sebkuehn.com/blog/seo/speed-up-your-website-for-better-seo/

若支援 GZip/Deflate，會將文字檔壓縮為 Binary 傳送
在 Browser 端解壓縮、頻寬可節省很多！


11

GZip / Deflate
文字類型的檔案都可以設定
<IfModule mod_deflate.c>
DeflateCompressionLevel 6
AddOutputFilter DEFLATE html htm xml css js php
AddOutputFilterByType DEFLATE text/html text/plain text/xml
application/x-httpd-php
</IfModule>


12

減少 HTTP 請求數量
๏ HTTP 協定的 Request / Response (TCP)
是昂貴的、應該想辦法減少。
๏ 減少請求數量的方式大致如下：
❖ CSS Sprites - 合併你的圖片
❖ 部分圖片採用 Data URI
❖ 合併 JavaScript / CSS 檔案
❖ 圖片 Lazy Load 技術
๏ 等下會來介紹合併及 Lazy Load 的技術


13

圖片最佳化
๏ GIF - 256 色、支援透明 (Index)、動畫。
๏ PNG8 - 256 色、支援半透明 (Alpha)
❖ 最適合網頁使用的圖檔格式
❖ Adobe Fireworks 是唯一支援轉換為 PNG8 半透明的軟體。

๏ PNG24 - 數百萬色、支援半透明 (Alpha)。
❖ 複雜圖像（非照片）

๏ JPG - 僅適合用於照片。
๏ 選擇圖片格式的黃金原則：
照片用 JPEG、動畫用 GIF、其餘全部用 PNG8。
๏ 圖片裡有很多用不到的資訊，可以透過工具降低整體 Size
https://github.com/josephj/optimg

14

效能解決方案
一些能快速改善前端效能的工具與方法


15

CSS/JavaScript 的
合併與最小化
用工具一次解決兩個效能問題


16

選擇1 : MINI

透過設定檔
將多個檔案合併、最小化
的開發環境工具
https://github.com/josephj/mini

http://www.flickr.com/photos/prettypony/2644225789/


透過設定檔定義模組
17

尋找檔案的路徑，可以有多個
$DEV_ROOT 是 Apache 的環境變數

定義 demo 有哪些 CSS 與 JS 檔案


實際存取方式 (最小化)
18

/mini?module=<module>&type=<css|js>


19
修改前 (請求量超多)


20
修改後 (大幅減少請求量)


21

練習：Mini
๏ 請下載 mini、解壓縮到 C:AppServwwwlib
http://f2eclass.com/lab/performance/mini.zip

๏ 在 Apache 設定檔裡增加兩行 (需重啟)
Alias /mini C:AppServwwwlibminimini_web.php
SetEnv DEV_ROOT C:AppServwww

๏ 新增一個 Mini 設定檔、增加一些 JS/CSS 檔
C:AppServwwwconfminimini.xml

๏ 用以下方式看看是否有設定成功：
http://localhost/mini?type=<type>&module=<module>


22

選擇 2: Minify
http://<your host>/minify?f=
<檔案 1 的路徑>,
<檔案 2 的路徑>,
...
<檔案 n 的路徑>

๏ http://code.google.com/p/minify
๏ Mini 是透過設定檔、但 Minify 則是直接從網
址指定。
๏ 與 YUI Combo Handler 的作法一致
๏ 會有 GET 長度限制問題 (2K ~ 4K)。


23

練習：Minify
๏ 請下載 minify、解壓縮到 C:AppServwwwlib
http://f2eclass.com/lab/performance/minify.zip

๏ 在 Apache 設定檔裡增加兩行 (需重啟)
Alias /combo C:AppServwwwlibminifymin

๏ 修改設定檔
C:AppServwwwlibminifyminconfig.php

๏ 用以下方式看看是否有設定成功：
http://localhost/combo?f=<file1>,<file2>,<file3>


24

無阻塞載入
Non-blocking JavaScript
<script src/> 以外的方式
讓 JavaScript 載入的更順暢


25

載入外部 Script
๏ 不管是 <script src> 或 <link href> 都會堵塞後續
內容的顯示。
❖ http://f2eclass.com/lab/performance/blocking-
javascript.html

๏ 但像是 Google Analytics 或 Facebook Social
Plugin 提供貼入你網站的原始碼都不會堵塞。
๏ 還記得 document.create 可以建立節點的方式
嗎？以這樣的方式載入外部 Script 就可以避免堵
塞。


向 FB 學習無堵塞
26

<script type=”text/javascript”>
(function () {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "要載⼊入 JavaScript 的 URL";
    el.async = true;
    document.getElementsByTagName("head")[0].appendChild(el);
}());
</script>

http://f2eclass.com/lab/performance/non-blocking-javascript.html

27

ImageLoader
使用 YUI 的 Image Loader 工具減少讀取不必要的圖檔


28

有很多圖片的頁面

๏ 若網頁中有很多圖片（例如範例網站）、我們
都用傳統 <img src> 做載入。當讀取此網頁時
所有的圖片都是一併下載的。
๏ 但使用者可能只看少部分的圖、沒看到的圖就
浪費了載入的流量了...
๏ YUI 的 ImageLoader 工具：當使用者快捲到
可是區域外的圖片時、才開始載入。


29

YUI 的 ImageLoader
๏ 避免使用 <img>、改用 <div>、將圖檔路徑以
style 的 background-image 屬性設定。
๏ 阻止圖片顯示：在 CSS 中設定圖片為
background: none !important;
๏ YUI().use 使用 imageloader 模組
๏ new Y.ImgLoadGroup({
foldDistance: "緩衝區距離",
className: "div 的 className"
});

練習：http://f2eclass.com/lab/performance/imageloader.php

30

效能 - Review

๏ 前端占了 80% 的讀取時間。
๏ 如何檢測網頁效能：Y!Slow / PageSpeed
๏ 前端有哪些常見效能項目？
๏ 如何快速改進這些效能？


31

Q&A


Performance 入門 - 前端工程開發實務訓練

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Performance 入門 - 前端工程開發實務訓練 (20)

More from Joseph Chiang (20)

Performance 入門 - 前端工程開發實務訓練