大型網站技術架構（3）：WEB 前端性能優化

作者：Arno

上次說到了性能優化策略，根據網站的分層架構，可以大致的分為 web 前端性能優化，應用伺服器性能優化，存儲伺服器性能優化三大類。

這次來說一下 web 前端性能優化，一般來說，web 前端就是應用伺服器處理之前的部分，包括瀏覽器渲染、載入，前端視圖模型，圖片視頻資源，CDN 服務等，主要優化方法就是優化瀏覽器訪問渲染過程，使用反向代理，使用 CDN 服務等。

瀏覽器訪問渲染優化

減少 http 請求數

http 協議是無狀態的應用層協議，每次 http 請求都會建立新的通信鏈路，並且在服務端，每個 http 連接都會開啟一個單獨的線程去處理請求，這都會產生額外的開銷。

主要手段就是去合并壓縮 css，JavaScript，圖片文件，把需要的 css，JavaScript，圖片資源進行合并減少建立的連接請求數。

同時使用 http 的 keep-alive 來進行連接的復用，以此來減少建立的 http 連接數，提高訪問性能。

啟用壓縮

在服務端進行文件的壓縮，減少通信傳輸過程中的數據量。

對於文本文件，壓縮率能夠達到 80% 以上，因此在服務端啟用 gzip 壓縮是一個很好的選擇，但啟用壓縮的同時也會給伺服器帶來額外的開銷，所以要具體情況具體分析。

css，JavaScript 代碼優化

css 代碼優化：

盡量使用外部樣式，並且放在頁面頂部載入，一方面能夠及時渲染，另一方面能夠避免因某些樣式導致阻塞渲染

壓縮合并 css 文件，盡量精簡文件，減少通信傳輸數據量和請求連接數

JavaScript 代碼優化：

因為 JavaScript 代碼邊載入邊解析，解析的過程會阻塞瀏覽器渲染，因此把 JavaScript 代碼放在頁面底部載入

同樣的壓縮合并 JavaScript 文件，盡量精簡文件，減少通信傳輸數據量和請求連接數

寫高性能的 JavaScript 代碼

使用瀏覽器緩存

一般來說，對於網站裡面不經常變化的靜態資源，更新頻率比較低，因此可以把這些資源緩存在瀏覽器中，能夠很好的改善性能。

通過設置 http 頭裡的 Cache-Control 和 Expires 屬性來設定瀏覽器緩存時間。

另外還有 Etags 和 opcode 的緩存，根據具體情況進行選擇吧。

CDN 加速

CDN 的本質也屬於緩存，內容分發網路，把數據緩存在里用戶近的地方，使用戶儘快的獲取數據。

因為 CDN 都是部署在網路運營商的機房，這些運營商又同時為用戶提供網路服務，因此用戶請求的路由會優先到達 CDN 伺服器，如果存在請求的資源的話，就直接返回，最短路徑返迴響應，加速用戶訪問速度，同時還能夠為中心機房減輕壓力。

CDN 一般用來緩存靜態資源，css，Script 腳本，靜態頁面，圖片等，這些內容修改頻率很低但是訪問請求頻率很高，因此放在 CDN 上能夠很好的改善訪問速度。

反向代理

傳統的代理伺服器是當你請求不到所請求的資源時，由代理伺服器幫你請求，你知道你請求的最終的伺服器是誰，典型的例子就是 VPN，通過代理伺服器來請求到牆外的世界。

而反向代理是當你請求一個地址時，你請求的是反向代理伺服器，然後由反向代理伺服器去請求其他伺服器來獲取內容，而你不知道最終是從哪一台伺服器獲取到的數據。

反向代理 web 伺服器接收 http 請求，然後進行請求轉發，獲取到內容後返回給你，你只知道是由反向代理伺服器給你的數據，而不知道數據源最終是從哪個伺服器來的。

反向代理伺服器具有保護作用，來自互聯網的請求都需要經過反向代理伺服器，相當於在 web 伺服器之間建立起了一道屏障。

除了安全以外，可以在反向代理伺服器上進行一些靜態資源的緩存，以此來提高訪問速度，減輕應用伺服器的負載壓力。

當然，有些動態資源也可以緩存在代理伺服器上面，比如說熱門的詞條，帖子，博客等，這些資源的請求量可能非常非常的大，如果每次都走一遍流程的話會造成很大的壓力，同時，當這些動態內容發生改變時，會通知反向代理伺服器緩存失效，代理伺服器會重新緩存動態資源。

除此之外，反向代理伺服器還可以用來做負載均衡，通過負載均衡來構建伺服器集群，以此來提高系統的總體處理能力，進而應用提高伺服器處理高並發的能力。

PS：使用 ajax 也是提高用戶體驗很好的方法，不過 ajax 對於 SEO 並不友好，所以需要用到 SEO 的地方還是要考慮好是否要用 ajax。

好了，關於 web 前端優化就寫到這裡，下次會繼續寫應用伺服器性能優化，存儲伺服器性能優化。

在微信公眾號內回複數字「1」

小編拉你進粉絲微信群

不是在文章評論里回復

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！