全方位提速網站的技術手段

邱麗娟

【摘要】 平時我們搭建的一個網站，特別是較大的企業網站，都希望客戶訪問時能更快地響應。本文將從全方位的四個層次來討論怎樣提速網站。

【關鍵字】 網站提速 域名規劃 代理緩存 前端編譯 域名預解析 網站預連接 資源預加載

一般網站的技術架構：通過負載均衡設備接入外網請求，執行SSL解密，根據域名或URL分發請求；以Nginx為負載分發服務器；靜態資源與動態程序分開部署。

順應這一架構層次，本文從域名規劃、代理服務器端緩存、前端編譯、頁面制作四個層次闡述網站提速的技術手段。

一、域名規劃

瀏覽器有一個限制：針對一個遠程主機（域名），同時存在的并發請求數不能超出上限。換言之，將文件部署在不同的服務器（域名）上，將增強瀏覽器的并發能力。

以電商網站為例，規劃其域名：

www：網站首頁。

news：二級頁面。

app：移動App的服務端地址。

weixin：微信公眾號的服務端地址。

pdt-img-1：商品圖片服務器。為充分利用瀏覽器并發獲取圖片的能力，建立5個圖片服務器域名，即pdtimg-2、pdt-img-3、pdt-img-4、pdt-img-5。

二、 代理緩存

當使用Nginx作為Web請求和移動App請求的負載分發器時，在Nginx上配置代理緩存策略，定義負載分發器與應用服務器/靜態資源服務器之間的緩存規則，這樣在緩存過期之前負載分發器就不用從應用服務器/靜態資源服務器獲取文件。

proxy_cache_path data/cache/cache_my levels=1：2 keys_ zone=cache_my：200m inactive=1d max_size=1g；

server {

location ～* ＼.（？：ico|css|js|gif|jpe？g|png）$ {

include proxy.conf；

proxy_cache cache_my；

proxy_pass http：//my_servers；

}

}

當新應用發布時，要注意清除緩存目錄。

三、動靜分離/瀏覽器緩存/文件壓縮/圖片合并

減少靜態文件對應用服務器的影響、請求次數、網絡流量、連接次數，這些是前端開發的標準要求和強制要求。如果拿服務端代碼編譯來類比，就相當于對前端開發的成果文件（包括HTML、CSS、JS、圖片等）進行一次檢查和再處理，這正是“前端編譯”的觀點。FIS3是百度的前端編譯解決方案，可一次性達到上述四個目的。FIS3的統一配置文件是fis-conf.js。

3.1 實施動靜分離

在一個高并發的場景中，瀏覽器并發獲取資源，無疑將加速頁面的顯示，增強用戶體驗，但這又對服務器應對并發訪問的能力提出更高要求。根據文件類型，在服務端針對動、靜文件實施分開部署，動態文件部署在應用服務器，靜態文件部署在靜態資源服務器，正是為了降低應用服務器在I/O方面的消耗，從整體上增強服務端響應文件請求的能力。大型網站部署CDN的目的之一，便是分散部署靜態資源文件，結合智能DNS，就近返回靜態資源文件。

在fis-conf.js中配置規則，將*.js、*.css、*.png文件發布到另一個絕對路徑下，該路徑將來可以是靜態資源服務器上的任意路徑。

fis.match（‘*.{png，js，css}， {

release： ‘/static/$0

}）；

3.2 充分利用瀏覽器緩存

瀏覽器緩存的工作原理是，與服務器之間建立一種契約，服務器依據文件修改時間來決定是否需要向瀏覽器返回該文件。瀏覽器每次請求遠程文件時，從自身緩存中提取該文件的最后修改時間，放在If-Modified-Since頭中隨請求發出；服務器取出If-Modified-Since頭數據，比對最新的文件修改時間，如相同，說明文件未曾修改，返回304狀態代碼，如不同，則正常返回文件。在這種工作模式下，即使文件沒修改，瀏覽器也要發出一次請求。改進方案是，服務器告知瀏覽器文件將永不過期，服務器將能夠代表文件是否變動的標識（最后修改時間、內容哈希）作為文件URI的一部分，一旦文件內容改變，URI隨之變化，這樣瀏覽器根據文件URI便能判斷是否需要下載新的文件。

應用系統的靜態資源文件、商品圖片，均適用這一技巧。

fis.match（‘*.{js，css，png}， {

useHash： true

}）；

3.3 實施文件壓縮

文件GZIP壓縮是主流的Web服務器都支持的功能，其目的是減少網絡傳輸的字節數，因為相對壓縮和解壓的運算能力的消耗，網絡傳輸能力無疑是更大的制約。

fis.match（‘*.js， {//fis-optimizer-uglify-js插件進行壓縮，已內置

optimizer： fis.plugin（‘uglify-js）

}）；

fis.match（‘*.css， {//fis-optimizer-clean-css插件進行壓縮，已內置

optimizer： fis.plugin（‘clean-css）

}）；

fis.match（‘*.png， {//fis-optimizer-png-compressor插件進行壓縮，已內置

optimizer： fis.plugin（‘png-compressor）

}）；

3.4 實施圖片合并

一次Web請求，需要經歷域名解析、建立連接、傳輸內容三個階段，其中建立連接比較耗時，因此瀏覽器一般具有保持一段時間的長連接以供復用的機制。服務端將多張圖片合并成一個文件，正是一種主動減少連接次數的機制。

//啟用fis-spriter-csssprites插件

fis.match（‘：：package， {

spriter： fis.plugin（‘csssprites）

}）

//對CSS進行圖片合并

fis.match（‘*.css， {//給匹配到的文件分配屬性

useSprite： true

}）；

四、域名預解析/網站預連接/資源預加載

根據大型網站的監測結果，在一次資源請求的過程中，大量時間耗費在建立連接方面；對于初次請求一個新網站來說，域名解析也需要耗費一段時間；對于一次請求大文件的過程來說，需要耗費的時間相對更長，而在這段相對更長的時間內，用戶只能等待。針對域名解析、建立連接、資源文件加載這三個問題，分別開辟一個提前量，在用戶執行其它操作的間歇期，并行執行域名預解析、網站預連接、資源預加載。例如：

域名預解析：

網站預連接：

資源預加載：

目前并不是所有的瀏覽器都支持以上聲明，但是將有越來越多的瀏覽器支持。