參考：http://www.rzrgm.cn/MarcoHan/p/5295398.html、站長之家：http://www.chinaz.com/tags/Webqianduanxingnengyouhua.shtml

1、性能優化的重要性

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

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

進行頁面優化的方法如下：

1. 讓傳輸的數據包更小（壓縮文件/圖片）：圖片壓縮和文件壓縮
2. 減少網絡請求的次數：雪碧圖/精靈圖
3. 減少渲染的次數：緩存（HTTP緩存、本地緩存、Vue的keep-alive緩存等）
4. 避免渲染阻塞：CSS放在HTML的head中 JS放在HTML的body底部
5. 避免無用渲染：懶加載

2、減少HTTP請求達到性能優化

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

2.1、使用字體圖標

在可以大量使用字體圖標的地方我們可以盡可能使用字體圖標，字體圖標可以減少很多圖片的使用，從而減少http請求，字體圖標還可以通過CSS來設置顏色、大小等樣式，何樂而不為。

2.2、合并腳本和樣式表

將多個樣式表或者腳本文件合并到一個文件中，可以減少HTTP請求的數量從而縮短效應時間。

不過合并所有的樣式文件或者腳本文件可能會導致在一個頁面加載時加載了多于自己所需要的樣式或者腳本，對于只訪問該網站一個（或幾個）頁面的人來說可能導致反而增加了下載量。

2.3、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;
}

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

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

4、添加Expires頭來緩存組件

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

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

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