Web前端效能雜記

zzz紫川發表於2018-12-27

  前面說過,使用者感受的響應時間是取決於諸多因素的,我們幾乎不能得到真實的使用者響應時間。對於Web應用前端效能的研究也不是為了準備得到一個響應時間,其效能一部分取決於Web伺服器和應用伺服器(下載資源,執行等),另一部分取決於瀏覽器的實現機制、介面JS檔案的執行等,所以我們討論前端效能的目的是減少總的響應時間,或者說讓使用者“感覺很快”。

一、與前端效能相關的頭資訊

a)Accept-Encoding:編碼方式。是否支援壓縮,支援何種格式的壓縮;

b)Connetion:連線。是否持久連線;

c)Expires:返回資料的到期時間。與瀏覽器的快取機制有關,此處不細說,詳情請看http相關的頭域說明;

 

二、瀏覽器從輸入URL開始到頁面完全可用的大致過程

a)連線到URL所在伺服器;

b)獲取頁面對應的HTML文件;

c)解析文件並獲取所需要的資源;

d)頁面上的JS檔案與CSS檔案;

e)onload事件。

 

三、提高前端效能的常用方法

  從第二點的過程來看,主要有兩大思路:

①減少頁面載入所需要的時間:從請求的資料、請求的併發度以及網路傳輸時間等方面著手;

②提升使用者的觀感,讓使用者覺得頁面很快:讓頁面儘快開始顯示著手。

3.1  減少網路時間

①.使用DNS快取技術

②.減少需要傳輸檔案的尺寸

③.加快檔案傳輸速度

3.2  減少傳送的請求數量

①.利用瀏覽器快取

②.使用合併的圖片檔案

3.3  提高瀏覽器下載的併發度

①.JS檔案放在HTML文件的最後

②.使用多個域名

3.4  讓頁面儘早開始顯示

①.將樣式表的引用放在HTML文件的開頭(如放在<Head>標籤中)

②.將JS的引用放在HTML文件的最後

--------------------------------------------------------------分割線--------------------------------------------------------------

  對於協助測試前端效能的工具,有HttpWatch、Chrome自帶的開發者工具(F12)、Page Speed工具、YSlow等。我用過一段時間的YSlow,操作很簡單,而且也會給出優化前端效能的建議,有興趣的看客不凡去試試。安裝包大概需要點百度功底,教程的話,百度即可,看一遍就懂了。對於效能測試,我們平時更多的還是針對伺服器、資料庫等,此文記錄純為了解,開拓自身眼界。

 

____江湖沒什麼好,也就酒還行

相關文章