前端如何進行頁面優化

參考：http://www.javashuo.com/article/p-vhrqdgxj-bx.html、站長之家：http://www.chinaz.com/tags/Webqianduanxingnengyouhua.shtmljavascript

一、性能優化的重要性

研究代表：用戶最滿意的打開網頁時間是2-5秒，若是等待超過10秒，99%的用戶會關閉這個網頁。列舉一組數據：Google網站訪問速度每慢400ms就致使用戶搜索請求降低0.59%;Amazon每增長100ms網站延遲將致使收入降低1%;雅虎若是有400ms延遲會致使流量降低5-9%。網站的加載速度嚴重影響了用戶體驗，也決定了這個網站的生死存亡。css

只有10%~20%的最終用戶響應時間花在了下載HTML文檔上（即從Web服務器獲取HTML文檔並傳送到瀏覽器的），其他的80%~90%時間花在了下載頁面中的全部組件上。html

進行頁面優化的方法以下：java

二、減小HTTP請求達到性能優化

上面說到80%~90%時間花在了下載頁面中的全部組件進行的HTTP請求上。所以，改善響應時間最簡單的途徑就是減小HTTP請求的數量次數jquery

2.一、使用字體圖標

在能夠大量使用字體圖標的地方咱們能夠儘量使用字體圖標，字體圖標能夠減小不少圖片的使用，從而減小http請求，字體圖標還能夠經過CSS來設置顏色、大小等樣式，何樂而不爲。web

2.二、合併腳本和樣式表

將多個樣式表或者腳本文件合併到一個文件中，能夠減小HTTP請求的數量從而縮短效應時間。瀏覽器

不過合併全部的樣式文件或者腳本文件可能會致使在一個頁面加載時加載了多於本身所須要的樣式或者腳本，對於只訪問該網站一個（或幾個）頁面的人來講可能致使反而增長了下載量。緩存

2.三、CSS Sprites技術

CSS Sprites在國內不少人叫css精靈，是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，而後經過CSS background背景定位技術技巧佈局網頁背景。這樣一來，特別是圖片特別多的網站，若是能用css sprites下降圖片數量，帶來的將是速度的提高。安全

示例代碼：性能優化

<div>
    <span id="image1" class="nav"></span>
    <span id="image2" class="nav"></span>
    <span id="image3" class="nav"></span>
    <span id="image4" class="nav"></span>
    <span id="image5" class="nav"></span>
</div>

.nav { width: 50px; height: 50px; display: inline-block; border: 1px solid #000; background-image: url('E:/1.png');
} #image1 { background-position: 0 0;
} #image2 { background-position: -95px 0;
} #image3 { background-position: -185px 0;
} #image4 { background-position: -275px 0;
} #image5 { background-position: -366px -3px;
}

三、使用CDN縮短HTTP請求的時間

若是應用程序web服務器離用戶更近，那麼一個HTTP請求的響應時間將縮短。另外一方面，若是組件web服務器離用戶更近，則多個HTTP請求的響應時間將縮短。CDN（內容發佈網絡）是一組分佈在多個不一樣地理位置的Web服務器，用於更加有效地向用戶發佈內容。在優化性能時，向特定用戶發佈內容的服務器的選擇基於對網絡擁堵的測量。例如，CDN可能選擇具備最短響應時間的服務器，由此縮短了HTTP請求的時間。

四、添加Expires頭來緩存組件

Expires存儲的是一個用來控制緩存失效的日期。當瀏覽器看到響應中有一個Expires頭時，它會和相應的組件一塊兒保存到其緩存中，只要組件沒有過時，瀏覽器就會使用緩存版本而不會進行任何的HTTP請求。Expires設置的日期格式必須爲GMT（格林尼治標準時間）。

Expires存在着明顯的不足：

（1）Expires頭使用的是一個特定的時間，要求客戶端和服務器端的時鐘嚴格同步。何爲嚴格同步？咱們知道客戶端的時間是能夠修改的，若是服務器和客戶端的時間不統一，這就致使有可能出現緩存提早失效的狀況，存在不穩定性。（2）假如Expires的日期到來了，那麼還須要在服務器配置中提供一個新的日期。

面對這種狀況，HTTP1.1引入了Cache-Control頭來克服Expires頭的限制。Cache-Control使用max-age制定組件被緩存多久，使用秒爲單位，例如Cache-Control：max-age=3600；表示組件將被緩存60分鐘。若是max-age和Expires同時出現，則max-age有更高的優先級，瀏覽器會根據max-age的時間來確認緩存過時時間。
Cache-Control和expires都是在server端配置。

五、壓縮組件

客戶端請求報文中包含Accept-Encoding表示客戶端能識別的壓縮方法，若是客戶端請求報文沒有包含Accept-Encoding首部，服務器就會假設客戶端可以接受任何編碼格式；服務器響應報文中包含Content-Encoding表示採用的壓縮方法。

（然而，一個統計代表，大約有15%的客戶端請求是沒有Accept-Encoding請求的，由於客戶端的一些web代理和PC安全軟件會移除瀏覽器發出的Accept-Encoding，由於監聽未經壓縮的響應會佔用更少的CPU資源，但卻無疑增長了網絡傳輸的時間。）

服務器壓縮文件請參考： https://blog.csdn.net/ygy162/article/details/51058979

六、將樣式表放在頭部（實現逐步渲染）

在有些低版本瀏覽器中，若是將樣式表放在底部的話，瀏覽器會等樣式表加載完畢後再渲染DOM。但若是將樣式表放在頭部的話，也是先加載css表，可是此時能夠實現逐步渲染DOM，由於瀏覽器不會等到全部的HTMl元素解析以後再構建和佈局dom樹，而是先把部份內容解析並顯示出來。

IE8如下(包括IE8)的工做方式是認爲若是css表仍在加載，構建呈現樹就是一種浪費，它認爲在全部樣式表加載並解析完畢以前無需繪製任何東西。因此直到css加載完畢整個瀏覽器顯示都是空白，由此可能形成「白屏」現象。

高版本瀏覽器不用等待樣式表加載完畢再渲染DOM樹，而是逐漸開始就渲染，這時當咱們將css放在底部，頁面也能夠逐步呈現。可是在css下載並解析完畢以後，已經呈現的文字和圖片就會使用新的樣式進行重繪，這就是「無樣式內容的閃爍」，這是一種很是很差的用戶體驗。

因此把樣式表放在頭部是最好的選擇。

七、將腳本放在底部（避免阻塞DOM解析）

javascript會阻塞dom的解析。當解析過程當中遇到<script>標籤的時候，便會中止解析過程，轉而去處理腳本，若是腳本是內聯的，瀏覽器會先去執行這段內聯的腳本，若是是外鏈的，那麼先會去加載腳本，而後執行。在處理完腳本以後，瀏覽器便繼續解析HTML文檔。

因此將腳本放在底部是最好的，若是要將腳本放在頂部的話可使用jQuery和JS中的load方法：

//在DOM加載後，所有內容加載前運行
$(document).ready(function(){}); //在所有內容加載後運行
window.onload = function(){};    // —-js 
$(window).load(function(){});　　 //---jquery