8條關於Web前端效能的優化建議

一般網站優化都是優化後臺，如介面的響應時間、SQL優化、後臺程式碼效能優化、伺服器優化等。高併發情況下，對前端web優化也是非常重要的。

下面說說幾種常見的優化措施。

1、HTML CSS JS位置

一般需要將CSS放頁面最上面，即HEAD部分，而將JS程式碼放頁面底部。因為頁面需要載入為CSS才進行渲染，而JS如果不是在頁面載入之前就要執行就要放到頁面最底部，以免在頁面展示之前因JS過多載入而影響頁面渲染速度。

2、引用檔案位置

有一些外掛需要引用到遠端的圖片、CSS、JS、圖示等，如果遠端的資源連線網速不佳，如國外的某些資源，會造成網頁阻塞，同樣也會造成頁面展示問題，儘量能把引用遠端的資源能本地化。

3、減少後臺請求

每個請求都是耗費資源影響系統效能的，所以，能減少後臺請求就減少。如，儘量的將同一個資源（圖片、JS、CSS等）合併成一個檔案，頁面只要請求一次即可，這樣就節省了很多http連線的開銷及往返的時間損耗。

另外一方面，如果是關於抽獎、搖一搖、秒殺等功能，可以限制發往後臺的頻率，如前端操作10次才往後端發一次請求，這樣從前端就做到了後臺的流量控制，把流量控制到訪問的最外層是最好的，儘量不要讓請求落到底層。

4、壓縮傳輸

http壓縮可以對純文字可以壓縮至原內容的40%, 從而節省了60%的資料傳輸，GZIP是一種常用的壓縮編碼。因此，對文字型別的資源如CSS、JS、HTML啟用GZIP壓縮加速http傳輸速度。

5、減少cookie傳輸

cookie會包含在每次請求和響應中，如果cookie過多會影響http響應速度，所以高併發情況下儘量控制cookie的傳輸量，nginx對cookie傳輸預設是做了限制的。另外，像CSS、JS、圖片等靜態資源可以啟用單獨域名，禁用cookie對靜態資源的傳輸，這樣就能大大提高效率。

6、瀏覽器快取

高併發情況下，可以將一些不怎麼變動的東西快取到瀏覽器cache中，或者一些活動內容可以提前將內容在客戶端快取起來，以免活動開始大量請求湧入伺服器。

7、CDN

之前的文章有講過CDN的概念，它就是一個靜態內容分發網路，本質就是靜態資源的快取，可以將靜態資源放到CDN上，這樣，使用者就能離自己最近的地方獲取到資源，大大提高了使用者訪問速度。

8、反向代理

常用的反向代理nginx除了負載均衡功能，它也可以通過配置快取功能來加速請求響應速度，當使用者第一次訪問的時候靜態資源就可以被快取到反向代理伺服器上，這樣其他使用者的請求就能直接從反向代理伺服器直接獲取返回，這樣也就直到了靜態資源快取的作用。

我大概列了這些，其實還有很多優化手段，大家有更好的建議的話，可以在下方留言。