《高性能網站建設指南》--讀書筆記

在前端開發中如何提高網站性能是每一個前端工程師必須所考慮的內容。經過閱讀《高性能網站建設指南》加深了對提高網站性能的各類方法的認識，同時在從此的開發中也能更好的運用。

規則1、減小HTTP請求

1. CSS Sprites合併圖片，減小HTTP請求
2. 內聯圖片。
   使用Data URL技術，圖片數據以base64字符串格式嵌入到了頁面中，減小了HTTP請求。

   • 使用場景：

     • 當圖片很小時，可用dataURL，這樣既能夠避免HTTP請求，同時數據量也不大
     • 當圖片是服務器生成且每一個用戶都不同的時候，例如驗證碼
     • dataURL用在css文件中可避免單純的dataURL圖片不被瀏覽器緩存這個缺點

   • 缺點：

     • Base64編碼的數據體積一般是原數據的體積4/3，也就是Data URL形式的圖片會比二進制格式的圖片體積大1/3。
     • Data URL形式的圖片不會被瀏覽器緩存，這意味着每次訪問這樣頁面時都被下載一次，不適合在網站中大量使用。
3. 合併腳本和樣式表，儘可能減小js和css的請求數量

規則2、使用內容發佈網絡

內容發佈網絡（CDN）是一組分佈在多個不一樣地理位置的Web服務器，用於更加有效地向用戶發佈內容。
經常使用的CDN有：

• baidu
• cdnjs
• Bootstrap

規則3、添加Expires

頁面中都包含大量的組件，經過web服務器使用一個長久的expires頭，使得這些組件能夠被緩存，這樣在後續頁面中避免沒必要要的HTTP請求
缺點：要求服務器和客戶端的時間嚴格同步，過時日期須要檢查，並提供新日期
HTTP1.1引入Cache-Control頭來克服Expires頭的限制
cache-control使用max-age指令
max-age請求的內容過多久過時（相對於請求時間Date）失效，默認以秒爲單位
具體的過時時間配置可在Apache配置文件中添加mod_expires.c配置信息。

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "now plus 1 month"
    ExpiresByType application/x-javascript "now plus 5 day"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/bmp "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 month"
    ExpiresByType image/png "access plus 1 minutes"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresDefault "now plus 1 minutes"
</IfModule>

配置信息可參考Apache Module mod_expires

規則4、壓縮組件

經過開啓gzip壓縮來減少HTTP響應數據包的大小
值得壓縮的內容有HTML xml css js json
不應壓縮的內容圖片 pdf，他們在上傳到服務器的時候通常就已壓縮好，再壓縮只會浪費CPU
經過配置Apache 2.x的mod_deflate模塊

<IfModule mod_deflate.c>
    DeflateCompressionLevel 6 
    SetOutputFilter DEFLATE 
    SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary 
    SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary 
    SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary 
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/json
    <IfModule mod_setenvif.c>
        BrowserMatch ^Mozilla/4 gzip-only-text/html 
        BrowserMatch ^Mozilla/4.0[678] no-gzip 
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html 
    </IfModule>
</IfModule>

配置信息可參考Apache Module mod_deflate

規則5、將樣式表放在頂部

將樣式表放在head標籤裏能夠避免白屏，這樣瀏覽器能更快的展示內容，用戶體驗更好
而將樣式表放在底部會致使瀏覽器阻止內容逐步呈現，爲避免當樣式變化時重繪頁面，瀏覽器會延遲顯示頁面中的元素

規則6、將腳本放在底部

在下載腳本時瀏覽器會阻塞並行下載，緣由：

1. 腳本可能會修改頁面內容，所以瀏覽器會等待
2. 須要保證腳本可以按照正確的順序執行

將腳本放到頁面底部，這不會阻止頁面內容呈現並且頁面中的可視組件能儘早下載

規則7、避免CSS表達式

表達式的問題在於對其進行的求值的頻率比人們指望的要高，它們不僅在頁面呈現和大小改變時求值，當頁面滾動、甚至用戶鼠標在頁面上移過期都要被求值。頻繁地求值計算會致使性能底下
解決方法：

• 避免使用css表達式
• 若必須使用css表達式，可以使用一次性表達式{background-color:expression(altBgcolor(this));}
• 使用事件處理器

規則8、使用外部的JS和CSS

好處：

1. 外部js和css文件有機會被瀏覽器緩存起來
2. 外部文件能夠提升頁面組件的重用率

規則9、減小DNS查找

方法：

• 經過使用Keep-Alive，重用現有鏈接避免重複DNS查找
• 使用較少的域名能夠減小DNS查找的數量（頁面性能須要在減小DNS查找和並行下載之間權衡）

規則10、精簡JavaScript和CSS

經過精簡從代碼中移除沒必要要的字符，註釋，空白符等，從而達到減少請求文件大小的目的
在實際開發中通常將js和css經過工具壓縮爲min文件

規則11、避免重定向

常見的重定向狀態碼有：

• 301 Moved Permancently
• 302 Moved Temporarily(Found)
• 304 Not Modified 並非真正的重定向，避免下載已經存在的緩存

重定向會延長從發出請求到請求資源被下載的這段時間
有一種重定向最浪費也發生的很頻繁 缺乏結尾的斜線
當缺乏結尾的斜線時它容許自動索引(自動轉到默認的index.html)而且可以得到與當前目錄相關的URL
避免重定向方法

• 經過這事Alias mod_rewrite等
• 若是域名變了可使用CNAME記錄

規則12、移除重複腳本

重複腳本損傷性能的兩種方式

• 帶來沒必要要的HTTP請求
• 執行腳本所浪費的時間

規則十3、配置或移除Etag

Etag是web服務器和瀏覽器用於確認緩存組件的有效性的一種機制
服務器在檢測緩存的組件是否和原始服務器上的組件匹配時有兩種方式：

• 比較最新修改時間
• 比較實體標籤

最新修改日期

原始服務器經過Last-Modified響應頭來返回組件的最新修改日期
當組件第一次被請求成功後瀏覽器緩存了該組件以及它的最新修改日期（容許緩存），當再次請求該組件時，瀏覽器會使用If-Modified-Since頭將最新修改時間和原始服務器上該組件的最新修改時間進行比較，若是相同則返回一個304，而不傳輸數據，瀏覽器將使用緩存數據。

實體標籤

ETag是惟一標識了一個組件的一個特性版本的字符串
ETag:"24-54c6a9bd53bd1"
當組件第一次被請求成功後瀏覽器緩存了該組件以及它的最新修改日期（容許緩存）還有ETag信息，當再次請求該組件時，瀏覽器會使用If-None-Match頭將ETag和原始服務器上該組件的ETag進行比較，若是相同則返回一個304，而不傳輸數據，瀏覽器將使用緩存數據。

ETag帶來的問題

當你使用服務器集羣時，相同的組件從一臺服務器帶另外一臺服務器，Aapache和IIS產生的ETag是不一樣的，這樣組件下載次數將增長，致使性能降低
當If-None-Match比If-Modified-Since共存時，只有If-Modified-Since和If-None-Match在徹底匹配時，服務器才能返回304。不然因爲If-None-Match比If-Modified-Since具備更高的優先級,ETag不一樣，服務器就會返回200

解決辦法

1. 配置ETag
   

FileEtag INode Mtime Size 
INode:文件的索引節點(inode)數  
MTime:文件的最後修改日期及時間  
Size:文件的字節數  
All:全部存在的域，等價於：FileETag INode MTime Size  
None:移除ETag

有網友建議只是用MTime和Size就行了，有待驗證

1. 移除ETag
   在Aapache配置文件按中添加FileETag none

規則十4、使用Ajax可緩存

若是使用ajax向服務器發起大量的GET請求則能夠爲其請求的資源設置長久的expires頭