上次說到了性能優(yōu)化策略，根據(jù)網(wǎng)站的分層架構(gòu)，可以大致的分為 web 前端性能優(yōu)化，應(yīng)用服務(wù)器性能優(yōu)化，存儲服務(wù)器性能優(yōu)化三大類

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

瀏覽器訪問渲染優(yōu)化

減少 http 請求數(shù)

http 協(xié)議是無狀態(tài)的應(yīng)用層協(xié)議，每次 http 請求都會建立新的通信鏈路，并且在服務(wù)端，每個 http 連接都會開啟一個單獨的線程去處理請求，這都會產(chǎn)生額外的開銷

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

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

啟用壓縮

在服務(wù)端進行文件的壓縮，減少通信傳輸過程中的數(shù)據(jù)量

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

css，JavaScript 代碼優(yōu)化

css 代碼優(yōu)化：

盡量使用外部樣式，并且放在頁面頂部加載，一方面能夠及時渲染，另一方面能夠避免因某些樣式導(dǎo)致阻塞渲染

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

JavaScript 代碼優(yōu)化：

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

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

寫高性能的 JavaScript 代碼

使用瀏覽器緩存

一般來說，對于網(wǎng)站里面不經(jīng)常變化的靜態(tài)資源，更新頻率比較低，因此可以把這些資源緩存在瀏覽器中，能夠很好的改善性能

通過設(shè)置 http 頭里的 Cache-Control 和 Expires 屬性來設(shè)定瀏覽器緩存時間

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

CDN 加速

CDN的本質(zhì)也屬于緩存，內(nèi)容分發(fā)網(wǎng)絡(luò)，把數(shù)據(jù)緩存在里用戶近的地方，使用戶盡快的獲取數(shù)據(jù)

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

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

反向代理

傳統(tǒng)的代理服務(wù)器是當你請求不到所請求的資源時，由代理服務(wù)器幫你請求，你知道你請求的最終的服務(wù)器是誰，典型的例子就是VPN，通過代理服務(wù)器來請求到墻外的世界

而反向代理是當你請求一個地址時，你請求的是反向代理服務(wù)器，然后由反向代理服務(wù)器去請求其他服務(wù)器來獲取內(nèi)容，而你不知道最終是從哪一臺服務(wù)器獲取到的數(shù)據(jù)

反向代理 web 服務(wù)器接收 http 請求，然后進行請求轉(zhuǎn)發(fā)，獲取到內(nèi)容后返回給你，你只知道是由反向代理服務(wù)器給你的數(shù)據(jù)，而不知道數(shù)據(jù)源最終是從哪個服務(wù)器來的

反向代理服務(wù)器具有保護作用，來自互聯(lián)網(wǎng)的請求都需要經(jīng)過反向代理服務(wù)器，相當于在 web 服務(wù)器之間建立起了一道屏障

除了安全以外，可以在反向代理服務(wù)器上進行一些靜態(tài)資源的緩存，以此來提高訪問速度，減輕應(yīng)用服務(wù)器的負載壓力

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

除此之外，反向代理服務(wù)器還可以用來做負載均衡，通過負載均衡來構(gòu)建服務(wù)器集群，以此來提高系統(tǒng)的總體處理能力，進而應(yīng)用提高服務(wù)器處理高并發(fā)的能力

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

好了，關(guān)于 web 前端優(yōu)化就寫到這里，下次會繼續(xù)寫應(yīng)用服務(wù)器性能優(yōu)化，存儲服務(wù)器性能優(yōu)化