我是如何將頁面加載時間從6S降到2S的?


寫在前面

生活在信息爆炸的今天,我們每天不得不面對和過濾海量的信息--無疑是焦躁和浮動的,這就意味着用戶對你站點投入的時間可能是及其吝嗇的(當然有一些剛需站點除外)。

如何給用戶提供迅速的響應就顯得十分重要了,這可能成為你留住用戶的關鍵。即使網站設計的再優秀,功能再完美,但是響應的巨慢,用戶的耐心很快會被耗光,這可能成為他最后一次訪問,這絕對不是危言聳聽,最近有幸參與到了公司海外站點項目,對於這點深有體會。

問題的復盤

某一天海外運營告知說最近幾天的海外站點pv,uv下降嚴重,希望技術幫忙查看一下原因。WTF,這跟技術有毛線關系,該用的都用了,TM的頁面不吸引人,用戶不想來,我能怎么辦?事實證明不要太自信。

搬來梯子,熟練的打開海外站點,速度還可以,這個時候差點就給pass了,幸好去看了一下世界各個地區的加載時間后發現,有些地區的加載時間簡直不能看。好吧,實錘。

在查找慢速過程中收獲很多決定記錄下來。(在這里強烈安利一個可以檢測站點 全球各個地區加載時間的網站 https://www.dotcom-tools.com/website-speed-test.aspx ,真的強烈推薦)

文章不包含壓縮文件、圖片,增加資源域名等等雅虎軍規中提到的內容,因為是這些都是必須的。如果你還沒有實踐的話,建議先遵循再來看。

預備知識

在開始分析和解決之前,慣例先來簡單介紹一下涉及的知識點,這樣大家可能更加有代入感,也算有個鋪墊。

DNS

這個大家應該是很熟悉的,每天都在用的東西

說的通俗點,它就是一個用來將ip地址和域名相互映射的數據庫,幫助人們更加方便的使用互聯網,再也不用記住那些復雜的服務器地址,直接輸入服務器地址所綁定域名就可以訪問,例如 juejin.im,多好記。

CDN

內容分發網絡(Content delivery network)其實就是一種透過互聯網互相連接的計算機網絡系統。利用最靠近每位用戶的服務器,更快、更可靠地將資源發送給用戶。特點就是高性能、可擴展性及低成本。國內兩雲的這項服務打的不可開膠。

由於篇幅的原因這里就不詳細介紹了。對它不熟悉的或者想要溫習一下的 https://zh.wikipedia.org/wiki/%E5%85%A7%E5%AE%B9%E5%82%B3%E9%81%9E%E7%B6%B2%E8%B7%AF 。我覺得主要有兩個因素來判斷CDN服務的優劣---命中率和節點數量。

命中率意味着是否回源,回源的請求會打到你的服務器上,那么加載時間就取決與用戶與你服務器的通訊狀態了,說白了就是聽天由命。

節點數多意味着可供用戶選擇的響應節點多,優中選優,不必多說了,優秀。

網頁加載時間

網頁加載時間其實可以看作是頁面響應時間。那么,它是由哪些部分組成的?影響因素都有哪些?哪些我們是可以優化的? 上一張神圖,幫助理解(這是優化過后的截圖)

開始分析

說完了預備的知識點,我們開始按照上圖開始擼一遍吧

DNS Time

DNS lookup time,就是尋找域名對應ip地址的過程,這個過程時間長短與選擇的服務商有關。在查慢速問題這個可能會被忽略,但是不同服務商差距那是相當大,我們原來選擇的那家,簡直不要太坑(就不點名了),后來換了 Cloudflare,瞬間清爽了。

這里再次安利,推薦一個網站 https://www.dnsperf.com/ ,既可以查看不同服務商的DNS lookup time,還可以查看具體的波動,更加可以通過域名查看它在各個地區的DNS lookup time,簡直太好用了,趕緊保存吧。

上一組換之前和之后的對比圖

全綠色了有沒有,看着有種很爽的感覺,你可以看一看這一項為我們省了多少時間

Connect Time and SSl Time

一個是http網絡連接用時,另一個是SSl協議用時,優化空間不大,pass。

Request Time

見名知意系列。

First Byte Time

表示瀏覽器在從服務器接收第一個字節數據之前需要等待多長時間。獲取該數據所需的時間越長, 顯示頁面所需的時間就越長。

這部分主要能做的就是使用CDN和優化后端性能。

  • CDN 原來使用的是某雲的服務,查看日志發現命中率較低,回源較多,在加上節點數量一般。換成了aws,同樣為我們節省了很多加載時間(注冊和開通相對麻煩,但是為了用戶體驗這些都是值得的)

  • 后端性能優化 如何進行后端優化可以寫幾本書毫不誇張,但是我們做的就是加配置,有錢人性。啊哈哈哈哈

Response Time

這部分做的就是頁面的靜態化還有就是開啟服務端的gzip功能,具體方法請google。別小看這個功能,真真可以節約時間。

dig

想要深入理解DNS查詢過程和原理,這個命令是不可或缺的 。通過它你可以靈活、清晰的查看域名DNS解析及其過程,幫助理解。

下面以taobao為例,說一下過程(這里指的是沒有緩存的情況下)

1.輸入taobao.com后,直接為你服務的DNS(簡稱為H吧)會將請求報告給最高等級服務器"." (這些最高等級DNS服務器稱為root, 就是圖中最開始站在食物鏈頂端的13個,但並不是13台機器,它們使用了任播https://zh.wikipedia.org/zh/%E4%BB%BB%E6%92%AD 技術可以在全球設立鏡像節點,想想以現在的網絡請求的量級來說13台肯定不現實。具體的鏡像分布可以參考這里https://zh.wikipedia.org/wiki/%E6%A0%B9%E7%B6%B2%E5%9F%9F%E5%90%8D%E7%A8%B1%E4%BC%BA%E6%9C%8D%E5%99%A8 ,這些主機的內容都是同步的) ,然后最高等級服務器告訴它你去找.com的DNS,我不管。

2.得到這個響應后,H又將請求報告給 .com,.com告訴它,你去找taobao的DNS吧,我不管

3.得到這個響應后,H又將請求報告給taobao,taobao告訴它,我不管,你去找我四個小弟吧。

  • ns4.taobao.com.

  • ns5.taobao.com.

  • ns6.taobao.com.

  • ns7.taobao.com.

最后被分配給了ns4,從這得到了最終ip,完成了DNS lookup

看到評論中有疑問,其實可以多試幾次,會分配到不同的小弟,但是都有淘寶的A記錄,所以都可以解析 也可以dig不同的ns4,ns5,ns6,ns7 具像化的看一看。

最后

通過這次排查慢速的過程,不止學到了技術方面可以改進的地方,也真正認識到了對於網站來說,時間就是生命。加載時間長,用戶真的是不慣着你。 優秀的站點之所以優秀,就在於把每個細節都做的很優雅。

 

轉載:http://www.xjqyc.cn/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM