十四條軍規：高性能網站建設指南要點筆記
性能黃金法則
- 網頁加載時間80%耗費在html文檔所引用的組件的請求和解析上
HTTP簡介
- 超文本傳輸協議，客戶端/服務器協議，規定了客戶端、服務器之間的請求響應方式
- 請求由URL和請求頭組成
- 響應由狀態碼、響應頭和響應體組成
- 常用狀態碼
- 200: 成功
- 304: 緩存未改變
- 301: 永久重定向 //3xx表示用戶代理必須執行進一步操作才能完成請求
- 302: 暫時重定向
- 404: 找不到網頁
- 503: 服務器不可用
- 500: 服務器內部錯誤
// 請求
GET /assets/js/common.js
HTTP 1.1
Host: cnblogs.com
User-Agent: Mozilla/ 5.0
//響應
HTTP 1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Wed Mar 02 2016 21:32:34 GMT
Content-Length: 255
var ...
規則一：減少HTTP請求
<img usemap="map1" src="map.jpg">
<map>
<area shape="rect" coords="0, 0, 31, 31" href="home.html" title="Home">
<area shape="rect" coords="36, 0, 66, 31" href="gifts.html" title="Gifts">
</map>
<span style="background-image: url(); background-position: -260px -90px; width: 26px; height: 26px;"></span>
<img src="data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA" />
規則二：使用內容發布網絡（CDN）
- 將組件Web服務器分散開
- 訪問速度與客戶端到服務器的距離有關
規則三：添加Expires頭
// Expires頭規定了被緩存的組件的到期時間
// 由於它使用了一個特定的時間，所以要求客戶端和服務器時間完全同步
// HTTP1.1引用了Cache-Controll來彌補這一點
Expires: Thu Mar 03 2020 09:06:31 GMT
// Cache-Controll規定了被緩存組件的持續時間，被網站廣泛使用
// 下面是taobao.com某一組件的響應頭
// 不希望被緩存的組件，則設置max-age=0
Cache-Controll: max-age=7200,s-maxage=3600
- 條件GET請求：判斷在本地緩存後被請求組件的版本是否有更新
沒有添加Expire和Cache-Controll響應頭的組件，它仍然會儲存在浏覽器的緩存中。在後續的請求中，浏覽器會檢查緩存並發現組建已經過期。為了提高效率，浏覽器會向原始服務器發送一個條件GET請求。如果組建沒有改變，原始服務器可以免於發送整個組件，而是發送一個很小的頭，告訴浏覽器可以使用其緩存的組件。
// 條件GET請求
If-Modified-Since:Wed, 16 Dec 2015 06:19:38 GMT
//服務器響應
Last-Modified:Wed, 16 Dec 2015 06:19:38 GMT
- 修訂文件名：設置完Expire後，當需要進行組件更新時，要更改文件名（將版本號嵌入組件的文件名）來保證用戶能獲取組件的最新版本。
規則四：壓縮組件
- 壓縮通常能將響應的數據量減少70%，在10個被統計的主流網站中，7個壓縮了其HTML文檔和大部分的腳本和樣式表
- Web服務器基於Accept-Encoding來檢測是否對響應進行壓縮
//請求
Accept-Encoding: gzip, deflate
//響應
Content-Encoding: gzip
- 壓縮由服務器進行，而解壓縮由浏覽器來進行，通常對大於1K或2K的文件進行壓縮。已經壓縮的圖片和pdf不要進行二次壓縮，否則會占用服務器資源。
規則五：將樣式表放在頂部
- 當把不需要即刻加載的樣式表放在底部時，並沒有如預想的那樣提高加載速度，反而出現了白屏
- 因為在使用樣式表時，頁面逐步呈現會被阻止知道所有樣式表，以防止出現無樣式內容的閃爍
- 所以請遵循HTML規范，將樣式表放在頂部
規則六：將腳本放在底部
- HTTP1.1建議浏覽器從每台主機並行地下載兩個組件
- 腳本的加載會阻塞其他組件的並行下載，因為浏覽器認為腳本有可能會重寫頁面，或並行地下載腳本會引發執行順序發生錯誤
- 所以將腳本放在頁面頂部同樣會導致白屏現象，因為整個頁面的加載都被阻塞了
規則七：避免CSS表達式
規則八：使用外部Javascript和CSS
- 實際上，將JS和CSS都寫在頁面中，網頁載入速度比較快
- 然而大部分情況下，html並不會被緩存在本地，所以當用戶訪問網站較為頻繁時（也就是會重復用到本地緩存時），應當使用外部JS與CSS
規則九：減少DNS查找
- DNS（Domain Name Search）用於解析域名
- 使用Keep-Alive來保證DNS緩存，減少花在DNS查找的時間
- 使用更少的域名
規則十：精簡Javascript
- 精簡代碼最流行的工具是：JSMin（老道開發的）
- 對JS和CSS代碼進行壓縮帶來的性能提升遠沒有gzip帶來的多
規則十一：避免重定向
// 包含重定向的響應
HTTP 1.1 301 Moved Permanently
Location: https://m.taobao.com/
Content-Type: text/html
- 重定向會增加請求次數，延緩網頁響應
- 使用重定向的原因主要有跟蹤網頁流量、記錄廣告點擊和建立易於記憶的URL
- 還有一種程序員比較常犯的錯誤：URL後面缺少斜槓(/)引起的重定向
- 跟蹤網頁流量：
- 將要訪問的鏈接進行重定向包裝，可以通過分析該中間地址的Web服務器日志來跟蹤用戶的進站和出站流量
- 其他方法：使用Referer日志跟蹤流量來源；使用信標跟蹤出站流量
規則十二：避免重復腳本
規則十三：配置ETag
規則十四：使Ajax可緩存
- Ajax（異步加載Javascript和XML）是DHTML（動態HTML）中的一項技術，客戶端可以獲取和顯示用戶請求的信息而不需重新加載頁面
- Ajax核心技術是XMLHttpRequest，還有IFrame。（建議使用YUI Connection Manager進行Ajax開發）
- Ajax請求可以分為被動請求和主動請求，被動請求是為了將來的使用而預先發起的，主動請求是基於用戶當前的操作發起的，所以用戶可能需要等待響應
- 找出Web應用程序中的所有主動請求——使用Web抓包工具（IBM Page Detailer）
- 為Ajax請求添加緩存，可以提升用戶體驗。然而有可能破壞數據隱私性（有些數據不允許緩存）和不能及時更新數據。
- 數據安全性解決辦法：使用安全通信協議，如安全套接字層（SSL）
- 及時更新數據的解決辦法：將一個表示末次修改時間的時間戳嵌入到Ajax請求的查詢字符串中