Web前端性能優化教程06:減少DNS查找、避免重定向

本文是Web前端性能優化系列文章中的第六篇,主要講述內容:減少DNS查找、避免重定向。完整教程可查看:Web前端性能優化

一、減少DNS查找

基礎知識

DNS(Domain Name System): 負責將域名URL轉化為服務器主機IP。

DNS查找流程:首先查看瀏覽器緩存是否存在,不存在則訪問本機DNS緩存,再不存在則訪問本地DNS服務器。所以DNS也是開銷,通常瀏覽器查找一個給定URL的IP地址要花費20-120ms,在DNS查找完成前,瀏覽器不能從host那裡下載任何東西。

TTL(Time To Live):表示查找返回的DNS記錄包含的一個存活時間,過期則這個DNS記錄將被拋棄。

影響DNS緩存的因素

1. 服務器可以設置TTL值表示DNS記錄的存活時間。本機DNS緩存將根據這個TTL值判斷DNS記錄什麼時候被拋棄,這個TTL值一般都不會設置很大,主要是考慮到快速故障轉移的問題。

2. 瀏覽器DNS緩存也有自己的過期時間,這個時間是獨立於本機DNS緩存的,相對也比較短,例如chrome隻有1分鐘左右。

3. 瀏覽器DNS記錄的數量也有限制,如果短時間內訪問瞭大量不同域名的網站,則較早的DNS記錄將被拋棄,必須重新查找。不過即使瀏覽器丟棄瞭DNS記錄,操作系統的DNS緩存也有很大機率保留著該記錄,這樣可以避免通過網絡查詢而帶來的延遲。

最佳實踐

當客戶端的DNS緩存為空時,DNS查找的數量與Web頁面中唯一主機名的數量相等。所以減少唯一主機名的數量就可以減少DNS查找的數量。

然而減少唯一主機名的數量會潛在地減少頁面中並行下載的數量,避免DNS查找降低瞭響應時間,但減少並行下載可能會增加響應時間。當頁面的組件量比較多的時候,可以考慮將組件分別放到至少2-4個主機名,已獲得最大收益。

延伸閱讀:

  • CloudXNS免費DNS服務:線路細分 宕機監控等
  • 減少域名DNS解析時間將網頁加載速度提升新層次
  • 盤點十大免費DNS域名解析服務:穩定、可靠
  • 國內免費DNS服務使用評測:360DNS、ZnDNS等

二、避免重定向

什麼是重定向?

重定向用於將用戶從一個URL重新路由到另一個URL。

常用重定向的類型

301:永久重定向,主要用於當網站的域名發生變更之後,告訴搜索引擎域名已經變更瞭,應該把舊域名的的數據和鏈接數轉移到新域名下,從而不會讓網站的排名因域名變更而受到影響。

302:臨時重定向,主要實現post請求後告知瀏覽器轉移到新的URL。

304:Not Modified,主要用於當瀏覽器在其緩存中保留瞭組件的一個副本,同時組件已經過期瞭,這是瀏覽器就會生成一個條件GET請求,如果服務器的組件並沒有修改過,則會返回304狀態碼,同時不攜帶主體,告知瀏覽器可以重用這個副本,減少響應大小。

重定向如何損傷性能?

當頁面發生瞭重定向,就會延遲整個HTML文檔的傳輸。在HTML文檔到達之前,頁面中不會呈現任何東西,也沒有任何組件會被下載。

來看一個實際例子:對於ASP.NET webform開發來說,對於新手很容易犯一個錯誤,就是把頁面的連接寫成服務器控件後臺代碼裡,例如用一個Button控件,在它的後臺click事件中寫上:Response.Redirect(“”);然而這個Button的作用隻是轉移URL,這是非常低效的做法,因為點擊Button後,先發送一個Post請求給服務器,服務器處理Response.Redirect(“”)後就發送一個302響應給瀏覽器,瀏覽器再根據響應的URL發送GET請求。正確的做法應該是在html頁面直接使用a標簽做鏈接,這樣就避免瞭多餘的post和重定向。

重定向的應用場景

1. 跟蹤內部流量

當擁有一個門戶主頁的時候,同時想對用戶離開主頁後的流量進行跟蹤,這時可以使用重定向。以yahoo.com為例,主頁新聞的鏈接主機名是/,後面跟著識別的參數,點擊後再產生一個301重定向,這樣就記錄瞭離開門戶主頁後的流量去向。  

我們知道重定向是如何損傷性能的,為瞭實現更好的效率,可以使用Referer日志來跟蹤內部流量去向。每個HTTP請求都有一個Referer表示原始請求頁(除瞭從書簽打開或直接鍵入URL等操作),記錄下每個請求的Referer,就避免瞭向用戶發送重定向,從而改善瞭響應時間。

2. 跟蹤出站流量

有時鏈接可能將用戶帶離你的網站,在這種情況下,使用Referer就不太現實瞭。

同樣也可以使用重定向來解決跟蹤出站流量問題。以百度搜索為例,百度通過將每個鏈接包裝到一個302重定向來解決跟蹤的問題,例如搜索關鍵字跟蹤出站流量,搜索結果的第一個URL為/link?url=後面跟著一連串字符,即使搜索結果並沒有變,但這個字符串是動態改變的,我認為這裡的搜索連接URL好像沒有改變的需要,不知道這裡起到怎樣的作用?

除瞭重定向外,我們還可以選擇使用信標(beacon)一個HTTP請求,其URL中包含有跟蹤信息。跟蹤信息可以從信標Web服務器的訪問日記中提取出來,信標通常是一個1px*1px的透明圖片,不過204響應更優秀,因為它更小,從來不被緩存,而且絕不會改變瀏覽器的狀態。

延伸閱讀:

  • 301跳轉常見問題匯總
  • 寫給新手站長:301重定向完整解析
  • 再談Canonical標簽:與301有何區別?