小猿圈web前端之網站性能優化方案

如今前端不只要能作出一個網站頁面，還要把這個頁面作的炫酷，那須要很大程度的優化，那麼怎麼優化才更好呢？小猿圈總結了一下本身優化的方案，感興趣的朋友能夠看一下。

通常網站優化都是優化後臺，如接口的響應時間、SQL優化、後臺代碼性能優化、服務器優化等。高併發狀況下，對前端web優化也是很是重要的。

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

一、HTML CSS JS位置

通常須要將CSS放頁面最上面，即HEAD部分，而將JS代碼放頁面底部。由於頁面須要加載爲CSS才進行渲染，而JS若是不是在頁面加載以前就要執行就要放到頁面最底部，以避免在頁面展現以前因JS過多加載而影響頁面渲染速度。

二、引用文件位置

有一些插件須要引用到遠程的圖片、CSS、JS、圖標等，若是遠程的資源鏈接網速不佳，如國外的某些資源，會形成網頁阻塞，一樣也會形成頁面展現問題，儘可能能把引用遠程的資源能本地化。

三、減小後臺請求

每一個請求都是耗費資源影響系統性能的，因此，能減小後臺請求就減小。如，儘可能的將同一個資源（圖片、JS、CSS等）合併成一個文件，頁面只要請求一次便可，這樣就節省了不少http鏈接的開銷及往返的時間損耗。

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

四、壓縮傳輸

http壓縮能夠對純文本能夠壓縮至原內容的40%, 從而節省了60%的數據傳輸，GZIP是一種經常使用的壓縮編碼。所以，對文本類型的資源如CSS、JS、HTML啓用GZIP壓縮加速http傳輸速度。

五、減小cookie傳輸

cookie會包含在每次請求和響應中，若是cookie過多會影響http響應速度，因此高併發狀況下儘可能控制cookie的傳輸量，nginx對cookie傳輸默認是作了限制的。另外，像CSS、JS、圖片等靜態資源能夠啓用單獨域名，禁用cookie對靜態資源的傳輸，這樣就能大大提升效率。

六、瀏覽器緩存

高併發狀況下，能夠將一些不怎麼變更的東西緩存到瀏覽器cache中，或者一些活動內容能夠提早將內容在客戶端緩存起來，以避免活動開始大量請求涌入服務器。

七、CDN

以前的文章有講過CDN的概念，它就是一個靜態內容分發網絡，本質就是靜態資源的緩存，能夠將靜態資源放到CDN上，這樣，用戶就能離本身最近的地方獲取到資源，大大提升了用戶訪問速度。

八、反向代理

經常使用的反向代理nginx除了負載均衡功能，它也能夠經過配置緩存功能來加速請求響應速度，當用戶第一次訪問的時候靜態資源就能夠被緩存到反向代理服務器上，這樣其餘用戶的請求就能直接從反向代理服務器直接獲取返回，這樣也就直到了靜態資源緩存的做用。

以上是小猿圈web前端講師對於網站性能優化方案的介紹，你們學到了嗎？固然你們能夠在學習過程當中加一點本身工做的經驗，估計會有更好的優化方案，但願你們能作出更酷的頁面。