Web前端效能優化
Web前端效能優化
1.減少http請求數量
1.1 圖片地圖
在圖片的指定區域指定超連結，把圖片合併在一起，通過熱點點選超連結，間接減少了客戶端請求伺服器圖片的數量
1.2 精靈圖(Sprite)
把多張小圖拼成一張大圖片，通過css來控制什麼地方具體顯示什麼圖片，裁剪出想要圖片，減少伺服器圖片請求
1.3 字型圖示
使用@font-face能夠載入伺服器端的字型檔案，讓客戶端顯示客戶端所沒有安裝的字型，可以實現向量圖示，一次載入反覆使用多個圖示，相當於圖示都變成了字型。可以將多個小圖示定義在一個字型中，減少圖示的請求次數。
如阿里巴巴向量圖
1.4 內聯資源
將一些小的資原始檔序列化成base64的編碼，放在CSS樣式或頁面中，在客戶端再解析，優點是合併了小的檔案，減少請求，把二進位制變成了字串方便儲存，但是會出一個沒有意義的長字串影響開發時閱讀程式碼，另外在某些情況下將失去圖片的快取
1.5 合併資源
將多個小的，散的css、js檔案合併，可利用工具。把多個請求變為一個請求
1.6 壓縮
使用者請求的資源越小速度將越快，網路頻寬佔用越小，但是壓縮將佔用更多的CPU資源，壓縮與解壓也是需要成本的。
1.7GZIP壓縮
GZIP，即網頁壓縮，是由WEB伺服器和瀏覽器之間共同遵守的協議
Gzip通常可以減少70%網頁內容的大小，包括指令碼、樣式表、圖片等檔案
1.8 優化影象
轉換圖片格式，壓縮圖片體積
1.9 減少cookie傳輸
CDN（內容分發網路）
基本思路是儘可能避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定，它是一個經策略性部署的整體系統，包括分散式儲存、負載均衡、網路請求的重定向和內容管理4個要件。
本質是一個快取，而且將資料快取在離使用者最近的地方，使使用者以最快速度獲取資料，即所謂網路訪問第一跳
反向代理
使用者發起的請求會先在反向伺服器上尋找快取，可以直接從反向代理伺服器中返回。來自網際網路的訪問請求必須經過代理伺服器，相當於在web伺服器和可能的網路攻擊之間建立了一個屏障
除外，代理伺服器也可以通過配置快取功能加速web請求