關於Web效能最佳化方案的詳細介紹

來源:互聯網
上載者:User

第一章 開啟網站慢現狀分析

在公司訪問部署在IDC機房的VIP網站時會感覺很慢。是什麼原因造成的?為了縮短頁面的回應時間,改進我們的使用者體驗,我們需要知道使用者的時間花在等待什麼東西上。

可以跟蹤一下我們的登入頁面,如所示

從我們可以分析知道,HTML文檔只佔了總回應時間的20%,其它80%回應時間用來下載JS、CSS、圖片等組件。所以WEB前端有很大的最佳化空間,我們將從WEB的前端最佳化、後端最佳化兩方面綜合考慮給出WEB的效能最佳化方案。

第二章 WEB前台的最佳化規則

一、盡量減少 HTTP 請求

有幾種常見的方法能切實減少 請求:

1、 合并指令碼跟樣式檔案,如可以把多個CSS 檔案合成一個,把多個 JS 檔案合成一個。

2、 CSS Sprites 利用 CSS background 相關元素進行背景圖絕對位置,把多個圖片合成一個圖片。

二、使用瀏覽器緩衝

在使用者瀏覽網站的不同頁面時,很多內容是重複的,比如相同的JS、CSS、圖片等。如果我們能夠建議甚至強制瀏覽器在本機快取這些檔案,將大大降低頁面產生的流量,從而降低頁面載入時間。

根據伺服器端的響應header,一個檔案對瀏覽器而言,有幾級不同的緩衝狀態。

1、伺服器端告訴瀏覽器不要緩衝此檔案,每次都到伺服器上更新檔案。

2、伺服器端沒有給瀏覽器任何指示。

3、在上次傳輸中,伺服器給瀏覽器發送了Last-Modified或Etag資料,再次瀏覽時瀏覽器將提交這些資料到伺服器,驗證本地版本是否最新的,如果為最新的則伺服器返回304代碼,告訴瀏覽器直接使用本地版本,否則下載新版本。一般來說,有且只有靜態檔案,伺服器端才會給出這些資料。

4、伺服器強制要求瀏覽器快取檔案,並設定了到期時間。在緩衝未到期之前,瀏覽器將直接使用本機快取檔案,不會與伺服器端產生任何通訊。

我們要做的是盡量強制瀏覽器到第四種狀態,特別是對於JS、CSS、圖片等變動較少的檔案。

三、使用壓縮組件

IE和Firefox瀏覽器都支援用戶端GZIP,傳輸之前,先使用GZIP壓縮再傳輸給用戶端,用戶端接收之後由瀏覽器解壓,這樣雖然稍微佔用了一些伺服器和用戶端的CPU,但是換來的是更高的頻寬利用率。對於純文字來講,壓縮率是相當可觀的。如果每個使用者節約50%的頻寬,那麼租用來的那點頻寬就可以服務多一倍的客戶,並且縮短了資料的傳輸時間。

四、圖片、JS的預載入

預載入映像最簡單的方法是在 JavaScript 中執行個體化一個新 Image() 對象,然後將需要載入的映像的 URL 作為參數傳入。

function preLoadImg(url) {var img = new Image();img.src = url;}


可以在登入頁面預載入JS和圖片

五、將指令碼放在底部

指令碼放在頂部帶來的問題,

1、 使用指令碼時,對於位於指令碼以下的內容,逐步呈現將被阻塞

2、 在下載指令碼時會阻塞並行下載

放在底部可能會出現JS錯誤問題,當指令碼沒載入進來,使用者就觸發指令碼事件。

要綜合考慮情況。

六、將樣式檔案放在頁面頂部

如果樣式表任在載入,構建呈現樹就是一種浪費,樣式檔案放在頁面底部可能會出現兩種情況:

1、 白屏

2、 無樣式內容的閃爍

七、使用外部的JS和CSS

將內聯的JS和CSS做成外部的JS、CSS。減少重複下載內聯的JS和CSS。

八、切分組件到多個域

主要的目的是提高頁面組件並行下載能力。但不要跨太多網域名稱,建議採用2個子網域名稱。

九、精簡JS

可以做到兩個層級

1、精簡:從代碼中移除不必要的字元以減少其大小,

2、混淆:在精簡的同時,還會改寫代碼,函數、變數名被轉換成更短的字串

十、精簡CSS

從代碼中移除不必要的字元以減少其大小,

十一、 精簡圖片、Flash

對大圖片、Flash,要在效果和大小之間做出平衡。

第三章 程式的最佳化

第四章 資料庫的最佳化

附錄A 頁面請求分析

從輸入URL到頁面呈現需要下面5個步驟

1. 輸入URL地址或者點擊URL的一個連結

 2. 瀏覽器根據URL地址,結合DNS,解析出URL對應的IP地址

 3. 發送HTTP請求

 4. 開始串連請求的伺服器並且請求相關的內容

 5. 瀏覽器解析從伺服器端返回的內容,並且把頁面顯現出來

上面基本上就是一個頁面從請求到實現的基本過程,下面我們將剖析這個過程。

當輸入URL之後,瀏覽器就要知道這個URL對應的IP是什麼,只有知道了IP地址,瀏覽器才能準備的把請求發送到指定的伺服器的具體IP和連接埠號碼上面。瀏覽器的DNS解析器負責把URL解析為正確的IP地址。這個解析的工作是要花時間的,而且這個解析的時間段內,瀏覽器不是能從伺服器那裡下載到任何的東西的。瀏覽器和操縱系統提供了DNS解析緩衝支援。當獲得了IP地址之後,那麼瀏覽器就向伺服器發送HTTP的請求,過程如下:

1.瀏覽器通過發送一個TCP的包,要求伺服器開啟串連

2.伺服器也通過發送一個包來應答用戶端的瀏覽器,告訴瀏覽器串連開了。

3.瀏覽器發送一個HTTP的GET請求,這個請求包含了很多的東西了,例如我們常見的cookie和其他的head頭資訊。

這樣,一個請求就算是發過去了。

請求發送去之後,之後就是伺服器的事情了,伺服器端的程式把最後的結果發送到用戶端。

其實首先到達瀏覽器的就是html的那些文檔,所謂的html的文檔,就是純粹的html代碼,不包含什麼圖片,指令碼,CSS等的。也就是頁面的html結構。因為此時返回的只是頁面的html結構。這個html文檔的發送到瀏覽器的時間是很短的,一般是占整個回應時間的10%左右。

這樣之後,那麼頁面的基本的骨架就在瀏覽器中了,下一步就是瀏覽器解析頁面的過程,也就是一步步從上到下的解析html的骨架了。

如果此時在html文檔中,遇到了img標籤,那麼瀏覽器就會發送HTTP請求到這個img響應的URL地址去擷取圖片,然後呈現出來。如果在html文檔中有很多的圖片,flash,那麼瀏覽器就會一個個的請求,然後呈現,如果每個圖片都要請求,那麼就要進行之前說的那些步驟:解析url,開啟tcp串連等等。開啟串連也是要消耗資源的,就像我們在進行資料庫訪問一樣,我們也是儘可能的少開資料庫連接,多用串連池中的串連。道理一樣,tcp串連也是可以重用的。http1.1提出了持久串連(persistent connection)的概念,也就是說同一條 HTTP 串連,可以同時處理多個請求,減少tcp串連。

當頁面的html骨架載入了之後,瀏覽器就開始解析頁面中標籤,從上到下開始解析。

首先是head標籤的解析,如果發現在head中有要引用的JS指令碼,那麼瀏覽器此時就開始請求指令碼,此時整個頁面的解析過程就停了下來,一直到JS請求完畢。之後頁面接著向下解析,如解析body標籤,如果在body中有img標籤,那麼瀏覽器就會請求img的src對應的資源,如果有多個img標籤,那麼瀏覽器就一個個的解析,解析不會像JS那樣等待的,會並發的下載。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.