使用RAIL模型優化web性能

簡介

RAIL模型是一種以用戶爲中心的性能模型。最終目標不是讓網站在任何設備上均可以運行很快，而是使用戶滿意。RAIL表明四個指標：

• Response 響應：在100ms內響應
• Animation 動畫：在10ms內生成一幀
• Idle 空閒：將推遲的工做分爲50ms的塊，利用空閒時間完成
• Load 加載：在1000ms內呈現內容

加載優化

能夠經過Lighthouse PageSpeed WebPageTest Pingdom等工具來檢測加載的時間。
加載的主要內容有：

文本內容

• 文本內容須要壓縮。在不影響代碼功能的狀況下，經過刪除空格縮進和沒必要要的字符來壓縮。能夠藉助不少壓縮的工具，好比Minifer、HTML Minifer等。
• 在服務端設置Gzip壓縮，Gzip擅長文本壓縮，能夠減小70%以上的體積，但對非文本的壓縮效果很很差，好比圖片。以apache服務器爲例，設置.htaccess文件以下

<IfModule deflate_module>
    # Enable compression for the following file types
    AddOutputFilterByType           \
     DEFLATE                        \
      application/javascript        \
      text/css                      \
      text/html                     \
      text/javascript               \
      text/plain                    \
      text/xml
</IfModule>

• 減小第三方庫的體積，好比，若是沒有使用到jQuery的大部分功能，僅僅是使用其單個功能，能夠用其餘方式來替代，而不是引入整個庫。

圖形內容

• 移除沒必要要的圖片，或者延遲其加載
• 選擇合適的圖片格式，在須要透明背景時選擇png，普通照片選擇jpg，動畫選擇gif。png的質量並無明顯比jpg好，適當的選擇jpg而不是png能夠大幅度減小圖片的體積。
• 刪除圖片的meta信息，meta信息包括相機硬件信息、時間戳、軟件信息、文件格式、地理信息等，對於大多數網站來講，這些信息都不重要。使用工具(VerExif)能夠移除這些信息，壓縮效果大約在10%左右。
• 減少圖片尺寸或裁剪圖片：根據設備使用尺寸合適的圖片；裁剪圖片，只保留關鍵的圖片內容；
• 壓縮圖片：使用在線工具tinypng能夠大幅度壓縮圖片，大約能夠壓縮50%~70%。

HTTP請求

全部的資源都須要從服務器請求，請求優化方式有：

• 合併文本文件
• 合併圖片資源，雪碧圖
• 使用HTTP2，HTTP2能夠多路請求，大大提高了HTTP的請求速度
• 將關鍵的script提取出來做爲內聯腳本，優先執行，而不是和其餘script一切放到外置文件中

HTTP緩存

當瀏覽器首次加載一個頁面時，會緩存頁面資源到http cache，這樣在下一次訪問這個頁面時，就能夠利用以前的緩存，從而加快訪問。

• 啓用緩存，緩存那些好久都不會改變的資源，好比網站logo
• 設置緩存頭，cache-control(no-cache no-store public private max-age)與expires

參考

Measure Performance with the RAIL Model