前面說過,使用者感受的響應時間是取決於諸多因素的,我們幾乎不能得到真實的使用者響應時間。對於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,操作很簡單,而且也會給出優化前端效能的建議,有興趣的看客不凡去試試。安裝包大概需要點百度功底,教程的話,百度即可,看一遍就懂了。對於效能測試,我們平時更多的還是針對伺服器、資料庫等,此文記錄純為了解,開拓自身眼界。
____江湖沒什麼好,也就酒還行