前端頁面性能優化

部署（如何進行網站性能優化）

站點在提供服務的時候，儘量的可靠和快速。

性能

提升性能，最簡單的也是最顯著的方法就是：減小HTTP請求數量。每個HTTP請求除了有TCP開銷之外，還含有大量的頭信息。保存最小的獨立連接數能夠保證用戶的頁面加載速度更快。這顯然涉及到了服務器須要傳輸的數據量的問題。讓頁面和其起源文件保持較小的體積將減小網絡用時--對任何互聯網上的應用而言，這纔是真正的瓶頸。

按照靜態資源的分類，能夠分爲js、css、img,那麼就能夠從這三個方面入手。

將多個腳本文件合成一個腳本文件，或者將多個css合併成一個樣式表，能減小頁面渲染所須要的Http連接數量。使用css Sprites 技術合併多張小圖爲一張大圖，而後使用css的background-image和background-position屬性在頁面中顯示對應的圖片。只須要設定圖片須要顯示的尺寸和背景位置的偏移座標。

爲了加速頁面渲染，現代瀏覽器並行下載所須要的資源。可是，在所用的樣式表和腳本下載完成以前，頁面是不會開始渲染的，有些瀏覽器更是變本加厲，在處理任何javascript文件時，都會阻塞其下載其餘資源的下載。解決方案爲設置屬性defer（es5以前），或者設置async（es5）

緩存

緩存就是將最近請求的資源存儲到本地，以便接下來的請求可以從磁盤中使用這些資源，而不用再次去下載。明確地告訴瀏覽器什麼是能夠被緩存的是很重要的。有些瀏覽器會使用本身默認的緩存策略，但也不能就此徹底依賴它，同時也要兼顧其餘的瀏覽器。

此處，須要在後臺在http響應頭中，相對當前日期設置一個表示「很遠的未來」失效的日期。可是，當文件本緩存以後，噹噹前資源被修改以後，瀏覽器的資源不是最新的，而強制刷新有時候都沒法完成（在服務端也有緩存），此時能夠在引用資源文件的url查詢參數中添加文件修改的時間，即添加所謂的版本號。固然，此處也能夠設置last-modifed。

代碼壓縮

此處的壓縮主要指的是藉助於前端工具的壓縮，壓縮js,css,將小圖片轉換爲base6四、、、

Gzip

瀏覽器經過在發送請求的時候增長Accept-Encoding頭信息來識別本身支持的壓縮方式：

Accept-Encoding:gzip,deflate

若是服務器看到這條頭信息，而且支持列出的壓縮方式，它將會對相應結果進行壓縮，而且經過Content-Encoding頭信息表示其壓縮方式。

Content-encoding:gzip

而後，瀏覽器才能正確地解碼，獲得解碼後的相應。顯然，壓縮數據能夠減小網絡傳送的時間，Gzip一般能減小70%的體積，巨大的體積壓縮減極大地加速了網站的加載速度。

使用CDN

內容分發網絡（CDN）爲你的站點提供靜態資源內容服務，以減小他們加載的時間。