如何提升頁面加載速度(一)

前言：

在一樣的網絡環境下，兩個一樣能知足你的需求的網站，一個「Duang」的一下就加載出來了，一個糾結了半天才出來，你會選擇哪一個？研究代表：用戶最滿意的打開網頁時間是2-5秒，若是等待超過10秒，99%的用戶會關閉這個網頁。也許這樣講，各位還不會有太多感觸，接下來我列舉一組數據：Google網站訪問速度每慢400ms就致使用戶搜索請 求降低0.59%;Amazon每增長100ms網站延遲將致使收入降低1%;雅虎若是有400ms延遲會致使流量降低5-9%。網站的加載速度嚴重影響了用戶體驗，也決定了這個網站的生死存亡。

可能有人會說：網站的性能是後端工程師的事情，與前端並沒有多大關係。我只能說，too young too simple。事實上，只有10%~20%的最終用戶響應時間是用在從Web服務器獲取HTML文檔並傳送到瀏覽器的，那剩餘的時間去哪兒了？來瞄一下性能黃金法則：

只有10%~20%的最終用戶響應時間花在了下載HTML文檔上。其他的80%~90%時間花在了下載頁面中的全部組件上。

接下來咱們將研究一下前端攻城獅如何來提升頁面的加載速度。

1、減小HTTP請求

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

圖片地圖：

假設導航欄上有五幅圖片，點擊每張圖片都會進入一個連接，這樣五張導航的圖片在加載時會產生5個HTTP請求。然而，使用一個圖片地圖能夠提升效率，這樣就只須要一個HTTP請求。

​

服務器端圖片地圖：將全部點擊提交到同一個url，同時提交用戶點擊的x、y座標，服務器端根據座標映射響應

客戶端圖片地圖：直接將點擊映射到操做

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
     <area shape="rect" coords="180,139,14" href ="venus.html" alt="Venus" />
     <area shape="rect" coords="129,161,10" href ="mercur.html" alt="Mercury" />
     <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
     <area shape="rect" coords="140,0,110,260" href ="star.html" alt="Sun" />
</map>

使用圖片地圖的缺點：指定座標區域時，矩形或圓形比較容易指定，而其它形狀手工指定比較難

CSS Sprites

CSS Sprites直譯過來就是CSS精靈，可是這種翻譯顯然是不夠的，其實就是經過將多個圖片融合到一副圖裏面，而後經過CSS的一些技術佈局到網頁上。特別是圖片特別多的網站，若是能用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;
}

運行結果：

​

PS：使用CSS Sprites還有可能下降下載量，可能你們會認爲合併後的圖片會比分離圖片的總和要大，由於還有可能會附加空白區域。實際上，合併後的圖片會比分離的圖片總和要小，由於它下降了圖片自身的開銷，譬如顏色表、格式信息等。

字體圖標

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

合併腳本 和樣式表

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

然而合併全部文件對許多人尤爲是編寫模塊化代碼的人來講是不能忍的，並且合併全部的樣式文件或者腳本文件可能會致使在一個頁面加載時加載了多於本身所須要的樣式或者腳本，對於只訪問該網站一個（或幾個）頁面的人來講反而增長了下載量，因此你們應該本身權衡利弊。

2、使用CDN

若是應用程序web服務器離用戶更近，那麼一個HTTP請求的響應時間將縮短。另外一方面，若是組件web服務器離用戶更近，則多個HTTP請求的響應時間將縮短。

CDN（內容發佈網絡）是一組分佈在多個不一樣地理位置的Web服務器，用於更加有效地向用戶發佈內容。在優化性能時，向特定用戶發佈內容的服務器的選擇基於對網絡慕課擁堵的測量。例如，CDN可能選擇網絡階躍數最小的服務器，或者具備最短響應時間的服務器。

CDN還能夠進行數據備份、擴展存儲能力，進行緩存，同時有助於緩和Web流量峯值壓力。

CDN的缺點：

一、響應時間可能會受到其餘網站流量的影響。CDN服務提供商在其全部客戶之間共享Web服務器組。

二、若是CDN服務質量降低了，那麼你的工做質量也將降低

三、沒法直接控制組件服務器

3、添加Expires頭

頁面的初次訪問者會進行不少HTTP請求，可是經過使用一個長久的Expires頭，可使這些組件被緩存，下次訪問的時候，就能夠減小沒必要要的HTPP請求，從而提升加載速度。

Web服務器經過Expires頭告訴客戶端可使用一個組件的當前副本，直到指定的時間爲止。例如：

Expires: Fri, 18 Mar 2016 07:41:53 GMT

Expires缺點： 它要求服務器和客戶端時鐘嚴格同步；過時日期須要常常檢查

HTTP1.1中引入Cache-Control來克服Expires頭的限制，使用max-age指定組件被緩存多久。

Cache-Control： max-age=12345600

若同時制定Cache-Control和Expires，則max-age將覆蓋Expires頭

4、壓縮組件

從HTTP1.1開始，Web客戶端能夠經過HTTP請求中的Accept-Encoding頭來表示對壓縮的支持

Accept-Encoding: gzip,deflate

若是Web服務器看到請求中有這個頭，就會使用客戶端列出來的方法中的一種來進行壓縮。Web服務器經過響應中的Content-Encoding來通知 Web客戶端。

Content-Encoding: gzip

代理緩存

當瀏覽器經過代理來發送請求時，狀況會不同。假設針對某個URL發送到代理的第一個請求來自於一個不支持gzip的瀏覽器。這是代理的第一個請求，緩存爲空。代理將請求轉發給服務器。此時響應是未壓縮的，代理緩存同時發送給瀏覽器。如今，假設到達代理的請求是同一個url，來自於一個支持gzip的瀏覽器。代理會使用緩存中未壓縮的內容進行響應，從而失去了壓縮的機會。相反，若是第一個瀏覽器支持gzip，第二個不支持，大家代理緩存中的壓縮版本將會提供給後續的瀏覽器，而無論它們是否支持gzip。

解決辦法：在web服務器的響應中添加vary頭Web服務器能夠告訴代理根據一個或多個請求頭來改變緩存的響應。由於壓縮的決定是基於Accept-Encoding請求頭的，所以須要在vary響應頭中包含Accept-Encoding。

vary: Accept-Encoding

5、將樣式表放在頭部

首先說明一下，將樣式表放在頭部對於實際頁面加載的時間並不能形成太大影響，可是這會減小頁面首屏出現的時間，使頁面內容逐步呈現，改善用戶體驗，防止「白屏」。

咱們老是但願頁面可以儘快顯示內容，爲用戶提供可視化的回饋，這對網速慢的用戶來講是很重要的。

將樣式表放在文檔底部會阻止瀏覽器中的內容逐步出現。爲了不當樣式變化時重繪頁面元素，瀏覽器會阻塞內容逐步呈現，形成「白屏」。這源自瀏覽器的行爲：若是樣式表仍在加載，構建呈現樹就是一種浪費，由於全部樣式表加載解析完畢以前務虛會之任何東西

6、將腳本放在底部

更樣式表相同，腳本放在底部對於實際頁面加載的時間並不能形成太大影響，可是這會減小頁面首屏出現的時間，使頁面內容逐步呈現。

js的下載和執行會阻塞Dom樹的構建（嚴謹地說是中斷了Dom樹的更新），因此script標籤放在首屏範圍內的HTML代碼段裏會截斷首屏的內容。

下載腳本時並行下載是被禁用的——即便使用了不一樣的主機名，也不會啓用其餘的下載。由於腳本可能修改頁面內容，所以瀏覽器會等待；另外，也是爲了保證腳本可以按照正確的順序執行，由於後面的腳本可能與前面的腳本存在依賴關係，不按照順序執行可能會產生錯誤。

7、避免CSS表達式

CSS表達式是動態設置CSS屬性的一種強大而且危險的方式，它受到了IE5以及以後版本、IE8以前版本的支持。

p {
    width: expression(func(),document.body.clientWidth > 400 ? "400px" : "auto");
    height: 80px;
    border: 1px solid #f00;
}
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<script>
    var n = 0;
    function func() {
        n++;
        // alert();
        console.log(n);
    }
</script>

​

鼠標移動了幾回，函數的運行次數垂手可得的達到了幾千次，危險性顯而易見。

如何解決：

一次性表達式：

p {
    width: expression(func(this));
    height: 80px;
    border: 1px solid #f00;
}
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<script>
    var n = 0;
    function func(elem) {
        n++;
        elem.style.width = document.body.clientWidth > 400 ? '400px' : "auto";
        console.log(n);
    }
</script>

事件處理機制

用js事件處理機制來動態改變元素的樣式，使函數運行次數在可控範圍以內。

做者：MarcoHan
出處：
http://www.cnblogs.com/MarcoHan/p/5295398.html

---

 

​

識別圖中二維碼,領取python全套視頻資料