一、服務端開啟gzip壓縮
GZip壓縮的基本流程
- Web服務器接收到瀏覽器的HTTP請求后，檢查瀏覽器是否支持HTTP壓縮（Accept-Encoding 信息）；
- 如果瀏覽器支持HTTP壓縮，Web服務器檢查請求文件的后綴名；
- 如果請求文件是HTML、CSS等靜態文件，Web服務器到壓縮緩沖目錄中檢查是否已經存在請求文件的最新壓縮文件；
- 如果請求文件的壓縮文件不存在，Web服務器向瀏覽器返回未壓縮的請求文件，并在壓縮緩沖目錄中存放請求文件的壓縮文件；
- 如果請求文件的最新壓縮文件已經存在，則直接返回請求文件的壓縮文件；
- 如果請求文件是動態文件，Web服務器動態壓縮內容并返回瀏覽器，壓縮內容不存放到壓縮緩存目錄中。
服務器開啟gzip壓縮的步驟
可以在nginx環境下、apache2.2、apache2.4環境下開啟gzip壓縮，現主要針對apache2.2環境下開啟gzip壓縮：
- 修改 /etc/httpd/conf/http.conf
去掉 #LoadModule headers_module modules/mod_headers.so 前面的注釋#
去掉 #LoadModule deflate_module modules/mod_deflate.so 前面的注釋#
去掉 #LoadModule filter_module modules/mod_filter.so 前面的注釋#
在文件末尾添加如下：
<ifmodule mod_deflate.c>
DeflateCompressionLevel 9
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE image/gif image/png image/jpeg image/swf image/jpeg image/bmp
</ifmodule>
- 重啟apache
二、服務端開啟cdn加速
三、靜態文件存放在單獨域名的服務器上
- 避免請求靜態資源文件（最主要是圖片和css，對于js 文件，如果涉及讀寫cookie,那么還是要謹慎處理）時，攜帶cookie信息，增加請求損耗；
- 突破瀏覽器并發限制 (你隨便挑一個 G家的 url: https://lh4.googleusercontent.com/-si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4換成 lh3,lh6啥的，都照樣能夠訪問，像地圖之類的需要大量并發下載圖片的站點，這個非常重要。)
三、壓縮、合并請求
使用gulp或webpack工具：
- 壓縮js、html、css文件；
- 合并js、css以減少請求數；
- 將低于10kb的圖片轉為base64格式到html中，減少并發數；
四、管理端限制上傳圖片的大小
后臺控制圖片壓縮率（順便介紹給運營用的一個壓縮工具：http://zhitu.isux.us/）
四、客戶端預加載
五、客戶端懶加載
基于原生JS：
lazysizes效果演示
lazysizes github工程
六、提高渲染速度
- js放到頁面底部，body標簽底部
- css放到頁面頂部，head標簽里
七、異步加載js
Require.JS 按需加載
拓展資料
移動H5前端性能優化指南
Web性能優化：圖片優化
WebP 探尋之路
淺談瀏覽器http的緩存機制
常見的前端性能優化手段都有哪些？都有多大收益？
前端性能優化相關
性能輔助工具
智圖-Webp
谷歌 PageSpeed Insights(網頁載入速度檢測工具，需要翻墻)
入門Webpack，看這篇就夠了
前端構建工具gulpjs的使用介紹及技巧
Gulp 入門指南
