web前端效能優化

星夢花隨0823發表於2019-11-05
Web前端優化

無論是在工作中，還是在面試中，web前端效能的優化都是很重要的，那麼我們進行優化需要從哪些方面入手呢？本文將遵循yahoo前端效能團隊總結的34條黃金定律，哦不，現在是35條了。

網頁內容

1.減少HTTP請求次數。

減少頁面的HTTP請求數是個起點，這是提升站點首次訪問速度的重要指導原則。

相關的方案如下：

  • 合併檔案

  • CSS Sprites

  • 影像對映。

    可以把多張圖片合併成單張圖片，總大小是一樣的，但減少了請求數並加速了頁面載入。圖片對映只有在影像在頁面中連續的時候才有用，比如導航條。給image map設定座標的過程既無聊又容易出錯，用image map來做導航也不容易，所以不推薦用這種方式。

    具體用法見 HTML影像對映

  • 行內圖片（Base64編碼）

2.減少DNS查詢次數

相關方案如下：

  • DNS快取

  • 減少不同的主機名，從而減少DNS查詢

    減少不同主機名的數量同時也減少了頁面能夠並行下載的元件數量，避免DNS查詢削減了響應時間，而減少並行下載數量卻增加了響應時間。這是同時減少DNS查詢和允許高併發下載的折中方案。

3.避免頁面跳轉

當客戶端收到伺服器的跳轉回復時，客戶端再次根據伺服器回覆中的location指定的地址再次傳送請求，例如以下跳轉回復。

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
複製程式碼

當客戶端遇到這種回覆的時候，使用者只能等待客戶端再次傳送請求，有的網站甚至會一直跳n次，跳到他想帶你去的地方…當然在這個時候使用者看不到任何頁面內容，只有瀏覽器的進度條一直在重新整理。

重定向會拖慢使用者體驗，在使用者和HTML文件之間插入重定向會延遲頁面上的所有東西，頁面無法渲染，元件也無法開始下載，直到HTML文件被送達瀏覽器。所以要避免頁面跳轉。

4.快取Ajax

Ajax可以幫助我們非同步的下載網頁內容，但是有些網頁內容即使是非同步的，使用者還是在等待它的返回結果，例如ajax的返回是使用者聯絡人的下拉選單。所以我們還是要注意儘量應用以下規則提高ajax的響應速度。

相關方案如下：

  • 新增Expires或Cache-Control報文頭使響應可以被客戶端快取
  • Gzip壓縮傳輸檔案
  • 減少DNS查詢
  • 壓縮響應內容
  • 避免頁面跳轉
  • 配置ETags

5.延遲載入

這裡討論延遲載入需要我們知道我們的網頁最初載入需要的最小內容集是什麼。剩下的內容就可以推到延遲載入的集合中。

Javascript是典型的可以延遲載入內容。一個比較激進的做法是開發網頁時先確保網頁在沒有Javascript的時候也可以基本工作，然後通過延遲載入指令碼來完成一些高階的功能。

6.提前載入

與延遲載入目的相反，提前載入的是為了提前載入接下來網頁中訪問的資源

下面是提前載入的型別：

  • 無條件提前載入：當前網頁載入完成後，馬上去下載一些其他的內容。例如google會在頁面載入成功之後馬上去下載一個所有結果中會用到的image sprite。
    web前端效能優化
  • 有條件載入：根據使用者的輸入推斷需要載入的內容，雅虎的示例是search.yahoo.com
    web前端效能優化
  • 有預期的的載入：這種情況一般發生在網頁重新設計時，由於使用者經常訪問舊網頁，本地對舊的網頁內容快取充分從而顯得舊網頁速度很快，而新的網頁內容卻沒有快取，設計者可以在舊網頁的內容中預先載入一些新網頁中可能用到的內容，這樣新的網頁就會生下來一些需要下載的資源。

7.減少DOM元素數量

網頁中元素過多對網頁的載入和指令碼的執行都是沉重的負擔，500個元素和5000個元素在載入速度上會有很大差別。

想知道你的網頁中有多少元素，通過在瀏覽器中的一條簡單命令就可以算出，

document.getElementsByTagName('*').length

多少算是多了呢？雅虎在寫這篇文章的時候號稱主頁只有700多元素，但現在接近多了一倍。我們的網頁至少別比雅虎還多吧。。。

web前端效能優化

8.根據域名劃分內容

瀏覽器一般對同一個域的下載連線數有所限制，按照域名劃分下載內容可以瀏覽器增大並行下載連線，但是注意控制域名使用在2-4個之間，不然dns查詢也是個問題。

一般網站規劃會將靜態資源放在類似於static.example.com，動態內容放在www.example.com上。這樣做還有一個好處是可以在靜態的域名上避免使用cookie。後面我們會在cookie的規則中提到。

9.減少iframe數量

使用iframe要注意理解iframe的優缺點

優點：

  • 可以用來載入速度較慢的內容，例如廣告
  • 安全沙箱保護。瀏覽器會對iframe中的內容進行安全控制。
  • 指令碼可以並行下載

缺點：

  • 即使iframe內容為空也消耗載入時間
  • 會阻止頁面載入
  • 沒有語義

10.避免404

404我們都不陌生，代表伺服器沒有找到資源，我們要特別要注意404的情況不要在我們提供的網頁資源上，客戶端傳送一個請求但是伺服器卻返回一個無用的結果，時間浪費掉了。

更糟糕的是我們網頁中需要載入一個外部指令碼，結果返回一個404，不僅阻塞了其他指令碼下載，下載回來的內容(404)客戶端還會將其當成Javascript去解析。

css部分

11.避免CSS表示式

CSS表示式可以動態的設定CSS屬性，在IE5-IE8中支援，其他瀏覽器中表示式會被忽略。例如下面表示式在不同時間設定不同的背景顏色。

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
複製程式碼

CSS表示式的問題在於它被重新計算的次數遠比我們想象的要多，不僅在網頁繪製或大小改變時計算，即使我們滾動螢幕或者移動滑鼠的時候也在計算，因此我們還是儘量避免使用它來防止使用不當而造成的效能損耗。

如果想達到類似的效果我們可以通過簡單的指令碼做到

var currentTime = new Date().getHours();
if (currentTime%2) {
    if (document.body) {
        document.body.style.background = "#B8D4FF";
    }
}
else {
    if (document.body) {
        document.body.style.background = "#F08A00";
    }
}
複製程式碼

12.用代替@import

避免使用@import的原因很簡單，因為它相當於將css放在網頁內容底部。

13.避免使用Filters

AlphaImageLoad也是IE5.5 - IE8中支援，這種濾鏡的使用會導致圖片在下載的時候阻塞網頁繪製，另外使用這種濾鏡會導致記憶體使用量的問題。IE9中已經不再支援。

14.將樣式表置頂

經樣式表(css)放在網頁的HEAD中會讓網頁顯得載入速度更快，因為這樣做可以使瀏覽器逐步載入已將下載的網頁內容。這對內容比較多的網頁尤其重要，使用者不用一直等待在一個白屏上，而是可以先看已經下載的內容。

如果將樣式表放在底部，瀏覽器會拒絕渲染已經下載的網頁，因為大多數瀏覽器在實現時都努力避免重繪，樣式表中的內容是繪製網頁的關鍵資訊，沒有下載下來之前只好對不起觀眾了。

Javascript

15.去除重複指令碼

重複的指令碼不僅浪費瀏覽器的下載時間，而且浪費解析和執行時間。一般用來避免引入重複指令碼的做法是使用統一的指令碼管理模組，這樣不僅可以避免重複指令碼引入，還可以兼顧指令碼依賴管理和版本管理。

16.減少DOM訪問

通過Javascript訪問DOM元素沒有我們想象中快，元素多的網頁尤其慢，對於Javascript對DOM的訪問我們要注意應更迅速，應該：

  • 快取已經訪問過的元素
  • 先“離線”更新節點然後再加回DOM Tree
  • 避免通過Javascript修復佈局問題

17.使用智慧事件處理

這裡說智慧的事件處理需要開發者對事件處理有更深入的瞭解，通過不同的方式儘量少去觸發事件，如果必要就儘早的去處理事件。

有時候感覺頁面反映不夠靈敏，是因為有太多頻繁執行的事件處理器被新增到了DOM樹的不同元素上，這就是推薦使用事件委託的原因。如果一個div裡面有10個按鈕，應該只給div容器新增一個事件處理器，而不是給每個按鈕都新增一個。事件能夠冒泡，所以可以捕獲事件並得知哪個按鈕是事件源。

18.將指令碼置底

HTTP/1.1官方文件建議瀏覽器每個主機名下並行下載的檔案數不要超過兩個，如果圖片來自多個主機名，並行下載的數量就可以超過兩個。如果指令碼正在下載，瀏覽器就不開始任何其它下載任務，即使是在不同主機名下的。因為瀏覽器要在指令碼下載之後依次解析和執行。

因此對於指令碼提速，我們可以考慮以下方式，

  • 把指令碼置底，這樣可以讓網頁渲染所需要的內容儘快載入顯示給使用者。
  • 現在主流瀏覽器都支援defer關鍵字，可以指定指令碼在文件載入後執行。
  • HTML5中新加了async關鍵字，可以讓指令碼非同步執行。

19.使用外部Javascirpt和CSS檔案

使用外部Javascript和CSS檔案可以使這些檔案被瀏覽器快取，從而在不同的請求內容之間重用。

同時將Javascript和CSS從inline變為external也減小了網頁內容的大小。

使用外部Javascript和CSS檔案的決定因素在於這些外部檔案的重用率，如果使用者在瀏覽我們的頁面時會訪問多次相同頁面或者可以重用指令碼的不同頁面，那麼外部檔案形式可以為你帶來很大的好處。

但對於使用者通常只會訪問一次的頁面，例如microsoft.com首頁，那inline的javascript和css相對來說可以提供更高的效率。

20.精簡Javascript和CSS

精簡就是將Javascript或CSS中的空格和註釋全去掉，

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
複製程式碼

精簡後版本

body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}
複製程式碼

統計表明精簡後的檔案大小平均減少了21%，即使在應用Gzip的檔案也會減少5%。

例如我的網站上有5個CSS，4個Javascirpt，下面是分別經過bundling和minify之後的結果。

沒有任何處理之前

web前端效能優化

捆綁Javascript和CSS之後

web前端效能優化

精簡Javascript和CSS之後

web前端效能優化

圖片

21.優化影像

當美工完成了網站的圖片設計後，我們可以在上傳圖片之前對其做以下優化

  • 檢查GIF圖片中影像顏色的數量是否和調色盤規格一致。如果你發現圖片中只用到了4種顏色，而在調色盤的中顯示的256色的顏色槽，那麼這張圖片就還有壓縮的空間。

    可以使用imagemagick檢查：identify -verbose image.gif

  • 嘗試把GIF格式轉換成PNG格式，看看是否節省空間。大多數情況下是可以壓縮的。

    可以安全地把GIF格式轉換為PNG格式：convert image.gif image.png

  • 在所有的PNG圖片上執行pngcrush（或者其它PNG優化工具）。

    例如： pngcrush image.png -rem alla -reduce -brute result.png

  • 在所有的JPEG圖片上執行jpegtran。這個工具可以對圖片中的出現的鋸齒等做無損操作，同時它還可以用於優化和清除圖片中的註釋以及其它無用資訊

    jpegtran -copy none -optimize -perfect src.jpg dest.jpg

22.優化CSS Sprite

  • Sprite圖片中橫向排列一般都比縱向排列的最終檔案小
  • Sprite中把顏色較近的組合在一起可以降低顏色數，理想狀況是低於256色以便適用PNG8格式；
  • 不要在Sprite的影像中間留有較大空隙。這雖然不大會增加檔案大小,但對於使用者代理來說它需要更少的記憶體來把圖片解壓為畫素地圖。100×100的圖片為1萬畫素，1000×1000就是100萬畫素。

23.不要在HTML中縮放圖片

不要通過圖片縮放來適應頁面，如果你需要小圖片，就直接使用小圖片吧。

24.使用小且可快取的favicon.ico

網站圖示檔案favicon.ico，不管你伺服器有還是沒有，瀏覽器都會去嘗試請求這個圖示。所以我們要確保這個圖示

  • 存在
  • 檔案儘量小，最好小於1k
  • 設定一個長的過期時間

cookie

25.減少Cookie大小

Cookie被用來做認證或個性化設定，其資訊被包含在http報文頭中，對於cookie我們要注意以下幾點，來提高請求的響應速度，

  • 去除沒有必要的cookie，如果網頁不需要cookie就完全禁掉
  • 將cookie的大小減到最小
  • 注意cookie設定的域級別，必要情況下不要影響到其它子域
  • 設定合適的過期時間，比較長的過期時間可以提高響應速度。

26.頁面內容使用無cookie域名

大多數網站的靜態資源都沒必要cookie，我們可以採用不同的domain來單獨存放這些靜態檔案，這樣做不僅可以減少cookie大小從而提高響應速度，還有一個好處是有些代理拒絕快取帶有cookie的內容，如果能將這些靜態資源cookie去除，那就可以得到這些代理的快取支援。

常見的劃分域名的方式是將靜態檔案放在static.example.com，動態內容放在www.example.com。

也有一些網站需要在二級域名上應用cookie，所有的子域都會繼承，這種情況下一般會再購買一個專門的域名來存放cookie-free的靜態資源。例如Yahoo!的yimg.com，YouTube的ytimg.com等。

移動端

27.保持單個內容小於25KB

這限制是因為iphone，他只能快取小於25K，注意這是解壓後的大小。所以單純gzip不一定夠用，精簡檔案工具要用上了。

28.打包組建成符合文件

把頁面內容打包成複合文字就如同帶有多附件的Email，它能夠使你在一個HTTP請求中取得多個元件。當你使用這條規則時，首先要確定使用者代理是否支援（iPhone不支援）。

伺服器

29.Gzip壓縮傳輸檔案

Gzip通常可以減少70%網頁內容的大小，包括指令碼、樣式表、圖片等檔案。Gzip比deflate更高效，主流伺服器都有相應的壓縮支援模組。

值得注意的是pdf檔案可以從需要被壓縮的型別中剔除，因為pdf檔案本身已經壓縮，gzip對其效果不大，而且會浪費CPU。

30.避免圖片src屬性為空

空的圖片src仍然會使瀏覽器傳送請求到伺服器，這樣完全是浪費時間，而且浪費伺服器的資源。尤其是你的網站每天被很多人訪問的時候，這種空請求造成的傷害不容忽略。

主要以兩種形式出現：

  • straight HTML

    <img src=””>

  • JavaScript

    var img = new Image();

img.src = “”;
複製程式碼

31.配置ETags

雖然標題叫配製ETags，但是這裡你要根據具體情況進行一些判斷。首先Etag簡單來說是通過一個檔案版本標識使得伺服器可以輕鬆判斷該請求的內容是否有所更新，如果沒有就回復304 (not modified)，從而避免下載整個檔案。

但是Etags的版本資訊即使主流伺服器也未能很好地支援跨伺服器的判斷，比如你從一個伺服器叢集中一臺得到Etags，然後傳送到了另一臺那麼校驗很有可能會失敗。

32.使用GET的Ajax請求

瀏覽器在實現XMLHttpRequest POST的時候分成兩步，先發header，然後傳送資料。而GET卻可以用一個TCP報文完成請求。另外GET從語義上來講是去伺服器取資料，而POST則是向伺服器傳送資料，所以我們使用Ajax請求資料的時候儘量通過GET來完成。

33.儘早flush輸出

網頁後臺程式中我們知道有個方法叫Response.Flush()，一般我們呼叫它都是在程式末尾，但注意這個方法可以被呼叫多次。目的是可以將現有的快取中的回覆內容先發給客戶端，讓客戶端“有活幹”。

那在什麼時候呼叫這個方法比較好呢？一般情況下我們可以在對於需要載入比較多外部指令碼或者樣式表時可以提前呼叫一次，客戶端收到了關於指令碼或其他外部資源的連結可以並行的先發請求去下載，伺服器接下來把後續的處理結果發給客戶端。

34.使用CDN（內容分發網路）

再次強調第一條黃金定律，減少網頁內容的下載時間。提高下載速度還可以通過CDN(內容分發網路)來提升。CDN通過部署在不同地區的伺服器來提高客戶的下載速度。如果你的網站上有大量的靜態內容，世界各地的使用者都在訪問，那CDN是必不可少的。事實上大多數網際網路中的巨頭們都有自己的CDN。我們自己的網站可以先通過免費的CDN供應商來分發網頁資源。

35.新增Expires或Cache-Control報文頭

這條規則分為兩個方面：

  • 對於靜態內容新增Expires，將靜態內容設為永不過期，或者很長時間以後。在IIS中設定Expires可以看Configure the HTTP Expires Response Header (IIS 7)。
  • 對於動態內容應用合適的Cache-Control，讓瀏覽器根據條件來傳送請求。關於asp.net的caching，可以看asp.net cache feature和asp.net caching best practices。

參考連結

相關文章