Web前端最佳化，提高載入速度

標籤：httpwatch   時間   服務   檔案大小   blank   主機   文檔   限制   工具   

研究表明：使用者最滿意的開啟網頁時間是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%時間花在了下載頁面中的所有組件上。

 接下來我們將研究一下前端攻城獅如何來提高頁面的載入速度。 

一、減少HTTP請求

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

從WEB運行原理上講，IIS請求是無狀態的，在伺服器端一直是串連和關閉的不斷進行著，如果能減少伺服器請求，總的時間將會減少。

   之前我下載163郵箱的登陸頁面的圖片時發現，它們的只用到了一個圖片來完成整個頁面的所有圖片，當時我就納悶了，這跟平時做的網站不一樣呀。然來這樣做減少瀏覽器的請求次數，用httpwatch你會發現請求的總時間大大減少了。同樣的想法，在做css樣式，javascript代碼的時候也要做到儘可能的放在一個檔案下來減少WEB請求。

二、使用CDN

如果應用程式web伺服器離使用者更近，那麼一個HTTP請求的回應時間將縮短。另一方面，如果組件web伺服器離使用者更近，則多個HTTP請求的回應時間將縮短。

 CDN（內容發布網路）是一組分布在多個不同地理位置的Web伺服器，用於更加有效地向使用者發布內容。在最佳化效能時，向特定使用者發布內容的伺服器的選擇基於對網路慕課擁堵的測量。例如，CDN可能選擇網路階躍數最小的伺服器，或者具有最短回應時間的伺服器。

CDN還可以進行資料備份、擴充儲存能力，進行緩衝，同時有助於緩和Web流量峰值壓力。

CDN的缺點：

1、回應時間可能會受到其他網站流量的影響。CDN服務提供者在其所有客戶之間共用Web伺服器組。

2、如果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頭  四、壓縮組件   Jquery 作為JS最輕量級的類庫，它的原類庫是242KB，壓縮後的它竟只有91.6KB。     常見的壓縮公用程式有Google Closure Compiler、YUI Compressor、JsPacker、gzip。我常用的是gzip，因為它的壓縮率是最高的。用jdk壓縮後它會把一些空格去掉，把我們很長的變數名換成換成很短的字母來代替。 

五、將樣式表放在頭部

首先說明一下，將樣式表放在頭部對於實際頁面載入的時間並不能造成太大影響，但是這會減少頁面首屏出現的時間，使頁面內容逐步呈現，改善使用者體驗，防止“白屏”。

我們總是希望頁面能夠儘快顯示內容，為使用者提供可視化的回饋，這對網速慢的使用者來說是很重要的。

 將樣式表放在文檔底部會阻止瀏覽器中的內容逐步出現。為了避免當樣式變化時重繪頁面元素，瀏覽器會阻塞內容逐步呈現，造成“白屏”。這源自瀏覽器的行為：如果樣式表仍在載入，構建呈現樹就是一種浪費，因為所有樣式表載入解析完畢之前務虛會之任何東西  六、將指令碼放在底部（ 這樣做可以儘可能的先載入頁面的DOM結構，然後才可以級使用者體驗 ）

更樣式表相同，指令碼放在底部對於實際頁面載入的時間並不能造成太大影響，但是這會減少頁面首屏出現的時間，使頁面內容逐步呈現。

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

 下載指令碼時並行下載是被禁用的——即使使用了不同的主機名稱，也不會啟用其他的下載。因為指令碼可能修改頁面內容，因此瀏覽器會等待；另外，也是為了保證指令碼能夠按照正確的順序執行，因為後面的指令碼可能與前面的指令碼存在依賴關係，不按照順序執行可能會產生錯誤。   七、使用外部的JavaScript和CSS

內聯指令碼或者樣式可以減少HTTP請求，按理來說可以提高頁面載入的速度。然而在實際情況中，當指令碼或者樣式是從外部引入的檔案，瀏覽器就有可能緩衝它們，從而在以後載入的時候能夠直接使用緩衝，而HTML文檔的大小減小，從而提高載入速度。

影響因素：

1、每個使用者產生的頁面瀏覽量越少，內聯指令碼和樣式的論據越強勢。譬如一個使用者每個月只訪問你的網站一兩次，那麼這種情況下內聯將會更好。而如果該使用者能夠產生很多頁面瀏覽量，那麼緩衝的樣式和指令碼將會極大減少下載的時間，提交頁面載入速度。

2、如果你的網站不同的頁面之間使用的組件大致相同，那麼使用外部檔案可以提高這些組件的重用率。

載入後下載

 有時候我們希望內聯樣式和指令碼，但又可以為接下來的頁面提供外部檔案。那麼我們可以在頁面載入完成止嘔動態載入外部組件，以便使用者接下來的訪問。    八、精簡JavaScript 精簡精簡就是從代碼中移除不必要的字元以減少檔案大小，降低載入的時間。代碼精簡的時候會移除不必要的空白字元（空格，換行、定位字元），這樣整個檔案的大小就變小了。   九、使Ajax可緩衝

非同步與即時

 Ajax的一個明顯的優點就是向使用者提供了即時反饋，因為它非同步從後端web伺服器請求資訊。 使用者是否需要等待的關鍵因素在於Ajax請求是被動的還是主動的。被動請求是為了將來使用而預先發起的，主動請求是基於使用者當前的操作而發起的

什麼樣的AJAX請求可以被緩衝？

POST的請求，是不可以在用戶端緩衝的，每次請求都需要發送給伺服器進行處理，每次都會返回狀態代碼200。（可以在伺服器端對資料進行緩衝，以便提高處理速度）

GET的請求，是可以（而且預設）在用戶端進行緩衝的，除非指定了不同的地址，否則同一個地址的AJAX請求，不會重複在伺服器執行，而是返回304。

Ajax請求使用緩衝

在進行Ajax請求的時候，可以選擇盡量使用get方法，這樣可以使用用戶端的緩衝，提高請求速度。

 

Web前端最佳化，提高載入速度