Mikel
转载：http://blog.miniasp.com/post/2007/11/14-rules-for-faster-front-end-performance-notes.aspx
Steve Souders 這個傢伙寫了一本書叫做：High Performance Web Sites: Essential Knowledge for Front-End Engineers
這本書裡定義了14條讓你的網頁加速的方法，分別如下：
- Make fewer HTTP requests
- Use a CDN
- Add an Expires header
- Gzip components
- Put CSS at the top
- Move JS to the bottom
- Avoid CSS expressions
- Make JS and CSS external
- Reduce DNS lookups
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Turn off ETags
- Make AJAX cacheable and small
而以下是我研究後的心得分享：
1. Make fewer HTTP requests
– 減少 Image 的 Request 次數
– 使用 CSS Sprites 技巧
http://alistapart.com/articles/sprites
– 使用 Image Map 技巧
– 使用 Inline Image 技巧 ( data: )
http://tools.ietf.org/html/rfc2397
P.S. 可以開發一個 Inline Image 產生器！
P.S. 建議將 Inline Image 快取在 CSS 檔案中，這樣可避免 HTML 太大
– 減少 CSS / JavaScript 的 Request 次數
– 整合多個分開的 CSS / JavaScript
2. Use a CDN
– N/A
3. Add an Expires header
– 加入 Expires Header 到 Image, CSS, JavaScript 檔案裡
4. Gzip components
– 壓縮 HTML, JavaScript, StyleSheet, XML, JSON，但切記「不要壓縮 Images, PDF 檔案」！
– 設定方法
Apache 2.x: 使用 mod_deflate
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
IIS 6.0
Enabling HTTP Compression (IIS 6.0)
http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/502ef631-3695-4616-b268-cbe7cf1351ce.mspx?mfr=true
Using HTTP Compression for Faster Downloads (IIS 6.0)
http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/25d2170b-09c0-45fd-8da4-898cf9a7d568.mspx?mfr=true
Enabling HTTP Compression in IIS 6.0
http://dotnetjunkies.com/Article/16267D49-4C6E-4063-AB12-853761D31E66.dcik
IIS Compression in IIS6.0
http://weblogs.asp.net/owscott/archive/2004/01/12/57916.aspx
IIS 5.0
HOW TO： 啟用 IIS 中的 ASPX 壓縮
http://support.microsoft.com/kb/322603
– HTTP Header Style
HTTP request
Accept-Encoding: gzip, deflate
HTTP response
Content-Encoding: gzip
Vary: Accept-Encoding ( 這行是給 Proxy Server 看的 )
– 其他注意事項
– 個人化的頁面要加上 ==> Cache-Control: Private
– 移除 ETags (Rule 13)
5. Put CSS at the top
– 一定要將 CSS 放在 <head> 區段載入!
– 使用 <LINK> 標籤，不要使用 @import 語法
– Avoid Flash of Unstyled Content (FOUC) in IE
http://www.bluerobot.com/web/css/fouc.asp/
<!– Hack to avoid flash of unstyled content in IE –>
<script type="text/javascript"> </script>
6. Move JS to the bottom
– 一定要將所有 JavaScript 都擺在頁面最下方
</body> 之前
因為所有在 JavaScript Include 以下的 HTML 在 JS 還沒讀完前，都不會顯示畫面
– 把 JavaScript 的 Code 都放在 onload 執行！！
7. Avoid CSS expressions
– 不要使用 CSS expressions 因為可能這段 expression 會在每一次 mouse move, resize, scroll, key press 時執行!
– 要使用 EventHandler 去執行這些 Expression (JS Code)
8. Make JS and CSS external
– 反正 JS 跟 CSS 拉到外面成獨立檔案就是好的，但「首頁」可以例外！
– 使用 Post-onload download 技巧
download external files after onload
window.onload = downloadComponents;
function downloadComponents() {
var elem = document.createElement("script");
elem.src = "http://…/file1.js";
document.body.appendChild(elem);
…
}
範例：http://stevesouders.com/hpws/dynamic-inlining.php
作法：
1. 在 Server-side 判斷使用者 Browser 有設定 Cookie["hasPostOnloadDownload"]
1.1. 若沒有，就使用 post-onload download 動態下載 CSS & JS
1.2. 若有用，就直接用 <script src="xxxx.js"></script> 下載，Browser 會抓取 Cache 的版本
P.S. cookie expiration date is key
9. Reduce DNS lookups
– 在一個頁面中，不要超過 2 – 4 個 Hostname，不然會降低頁面載入速度
– 開啟 Keep-Alive 支援
10. Minify JS
– jsmin
http://crockford.com/javascript/jsmin
下載後更名成 jsmin.zip 解壓縮出 jsmin.exe 即可執行
jsmin.exe < input.js > output.js (注意：所有 UTF-8 編碼的 js 檔會變成 ANSI as UTF-8 編碼)
– dojo compressor
http://dojotoolkit.org/docs/shrinksafe
11. Avoid redirects
– 參考資料：http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
– 避免 Redirect 產生的方式
* 網址若省略檔名時，最後面一定要加上 / 結尾
* 追查 Log 檔
– 查看 Log Referer
12. Remove duplicate scripts
– 這一點雖然很呆，不過連 MSN Space, Yahoo 都有類似的情況！
– 在 ASP.NET 的元件中(UserControls, WebControls)，請多使用 Page.ClientScript.RegisterScriptInclude 的方式！
13. Turn off ETags
– 基本格式
* unique identifier returned in response
ETag: "c8897e-aee-4165acf0"
Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT
* used in conditional GET requests
If-None-Match: "c8897e-aee-4165acf0"
If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT
– if ETag doesn't match, can't send 304
– ETag format
Apache:
ETag: inode-size-timestamp
IIS:
ETag: Filetimestamp:ChangeNumber
– IIS 設定方式
自動設定方式
ETagFix – keep IIS eTags from changing
http://www.snapfiles.com/get/etagfix.html
原創公司：ISAPILab http://www.isapilabs.com/
安裝 http://www.isapilabs.com/downloads/ETagFix-setup.exe 之後會重新啟動 IIS 之後就沒問題了！
Related: http://www.snapfiles.com/Freeware/server/fwiis.html
Note:
在 IIS 5.0 可以正常運作
在 IIS 6.0 必須要執行在 Isolate Mode 才可以使用 ISAPI，預設是不能用的！
手動設定方式
* 如果不是用 Windows Server 2003 SP1 要先安裝 Hotfix 900245
http://support.microsoft.com/kb/900245/
* 先安裝 IIS 6.0 Resource Kit
http://www.microsoft.com/downloads/details.aspx?FamilyId=56FC92EE-A71A-4C73-B628-ADE629C89499&displaylang=en
* 使用 Metabase Explorer 開啟 LM \ W3SVC 新增 DWORD to 2039 其 Value="0" ( 每一台 WebFarm 底下的電腦都要這樣設定 )
* 重新啟動 IIS
net stop iisadmin /y
net start w3svc
net start smtpsvc
參考資料
* 您可能會當您使用 Internet Explorer 6， 試著存取 Web 應用程式所裝載在 Internet Information Services 6.0 Web 效能非常低
http://support.microsoft.com/kb/922703/
– Apache 設定方式
FileETag none
14. Make AJAX cacheable and small
– XHR, JSON, iframe, dynamic scripts 都一樣可以被快取(Cached)、最小化(minified)和壓縮(gzipped)
– 個人化的頁面回應時，一樣要做快取，但是針對「該使用者」做快取(Cache-Control: private)
– 在使用 XHR 時，URL 可以加上「最近的修改時間」在 QueryString 裡。
GET /yab/[…]&r=0.5289571053069156 HTTP/1.1
– 回傳資料時的 Header 可以用 Cache-Control: private + Last-Modified，使用者就不會一直連到網站抓網站了!!
設定 Cache Header 注意事項
* 個人化的頁面一定要設定
Response.Cache.SetCacheability(HttpCacheability.Private);
* 如果要 Cache 頁面或 External Reference 檔案(CSS/JS)一定要加上
Response.Cache.SetLastModified(DateTime.Now);
如果不加上 MaxAge 的話，將會無限時間的 Cache 直到下次 Reload 或開新 Browser 手動輸入網址進入網頁
* 如果要指定 Cache 的時間要加上
Response.Cache.SetMaxAge(new TimeSpan(0, 0, 0, 10));
Response.Cache.SetExpires(DateTime.Now.AddSeconds(10));
* 如果不要頁面被 Cache 的話
Response.Cache.SetMaxAge(TimeSpan.Zero);
Response.Cache.SetExpires(DateTime.MinValue);
