我是如何將頁面加載時(shí)間從6s降到2s的?
寫在前面
生活在信息爆炸的今天,我們每天不得不面對(duì)和過濾海量的信息--無疑是焦躁和浮動(dòng)的,這就意味著用戶對(duì)你站點(diǎn)投入的時(shí)間可能是及其吝嗇的(當(dāng)然91,pronhub等剛需站點(diǎn)除外)。
如何給用戶提供迅速的響應(yīng)就顯得十分重要了,這可能成為你留住用戶的關(guān)鍵。即使網(wǎng)站設(shè)計(jì)的再優(yōu)秀,功能再完美,但是響應(yīng)的巨慢,用戶的耐心很快會(huì)被耗光,這可能成為他最后一次訪問,這絕對(duì)不是危言聳聽,最近有幸參與到了公司海外站點(diǎn)項(xiàng)目,對(duì)于這點(diǎn)深有體會(huì)。
問題的復(fù)盤
某一天海外運(yùn)營告知說最近幾天的海外站點(diǎn)pv,uv下降嚴(yán)重,希望技術(shù)幫忙查看一下原因。WTF,這跟技術(shù)有毛線關(guān)系,該用的都用了,TM的頁面不吸引人,用戶不想來,我能怎么辦?事實(shí)證明不要太自信。
搬來梯子,熟練的打開海外站點(diǎn),速度還可以,這個(gè)時(shí)候差點(diǎn)就給pass了,幸好去看了一下世界各個(gè)地區(qū)的加載時(shí)間后發(fā)現(xiàn),有些地區(qū)的加載時(shí)間簡直不能看。好吧,實(shí)錘。
在查找慢速過程中收獲很多決定記錄下來。(在這里強(qiáng)烈安利一個(gè)可以檢測(cè)站點(diǎn) 全球各個(gè)地區(qū)加載時(shí)間的網(wǎng)站here,真的強(qiáng)烈推薦)
文章不包含壓縮文件、圖片,增加資源域名等等雅虎軍規(guī)中提到的內(nèi)容,因?yàn)槭沁@些都是必須的。如果你還沒有實(shí)踐的話,建議先遵循再來看。
預(yù)備知識(shí)
在開始分析和解決之前,慣例先來簡單介紹一下涉及的知識(shí)點(diǎn),這樣大家可能更加有代入感,也算有個(gè)鋪墊。
DNS
這個(gè)大家應(yīng)該是很熟悉的,每天都在用的東西。
說的通俗點(diǎn),它就是一個(gè)用來將ip地址和域名相互映射的數(shù)據(jù)庫,幫助人們更加方便的使用互聯(lián)網(wǎng),再也不用記住那些復(fù)雜的服務(wù)器地址,直接輸入服務(wù)器地址所綁定域名就可以訪問,例如 juejin.im,多好記。
CDN
內(nèi)容分發(fā)網(wǎng)絡(luò)(Content delivery network)其實(shí)就是一種透過互聯(lián)網(wǎng)互相連接的計(jì)算機(jī)網(wǎng)絡(luò)系統(tǒng)。利用最靠近每位用戶的服務(wù)器,更快、更可靠地將資源發(fā)送給用戶。特點(diǎn)就是高性能、可擴(kuò)展性及低成本。國內(nèi)兩云的這項(xiàng)服務(wù)打的不可開交。
由于篇幅的原因這里就不詳細(xì)介紹了。對(duì)它不熟悉的或者想要溫習(xí)一下的這邊來。我覺得主要有兩個(gè)因素來判斷CDN服務(wù)的優(yōu)劣---命中率和節(jié)點(diǎn)數(shù)量。
命中率意味著是否回源,回源的請(qǐng)求會(huì)打到你的服務(wù)器上,那么加載時(shí)間就取決與用戶與你服務(wù)器的通訊狀態(tài)了,說白了就是聽天由命。
節(jié)點(diǎn)數(shù)多意味著可供用戶選擇的響應(yīng)節(jié)點(diǎn)多,優(yōu)中選優(yōu),不必多說了,優(yōu)秀。
網(wǎng)頁加載時(shí)間
網(wǎng)頁加載時(shí)間其實(shí)可以看作是頁面響應(yīng)時(shí)間。那么,它是由哪些部分組成的?影響因素都有哪些?哪些我們是可以優(yōu)化的? 上一張神圖,幫助理解(這是優(yōu)化過后的截圖) 。
開始分析
說完了預(yù)備的知識(shí)點(diǎn),我們開始按照上圖開始擼一遍吧。
DNS Time
DNS lookup time,就是尋找域名對(duì)應(yīng)ip地址的過程,這個(gè)過程時(shí)間長短與選擇的服務(wù)商有關(guān)。在查慢速問題這個(gè)可能會(huì)被忽略,但是不同服務(wù)商差距那是相當(dāng)大,我們?cè)瓉磉x擇的那家,簡直不要太坑(就不點(diǎn)名了),后來換了 Cloudflare,瞬間清爽了。
這里再次安利,推薦一個(gè)網(wǎng)站真的叼,既可以查看不同服務(wù)商的DNS lookup time,還可以查看具體的波動(dòng),更加可以通過域名查看它在各個(gè)地區(qū)的DNS lookup time,簡直太好用了,趕緊保存吧。
上一組換之前和之后的對(duì)比圖:
全綠色了有沒有,看著有種很爽的感覺,你可以看一看這一項(xiàng)為我們省了多少時(shí)間。
Connect Time and SSl Time
一個(gè)是http網(wǎng)絡(luò)連接用時(shí),另一個(gè)是SSl協(xié)議用時(shí),優(yōu)化空間不大,pass。
Request Time
見名知意系列。
First Byte Time
表示瀏覽器在從服務(wù)器接收第一個(gè)字節(jié)數(shù)據(jù)之前需要等待多長時(shí)間。獲取該數(shù)據(jù)所需的時(shí)間越長, 顯示頁面所需的時(shí)間就越長。
這部分主要能做的就是使用CDN和優(yōu)化后端性能。
CDN 原來使用的是某云的服務(wù),查看日志發(fā)現(xiàn)命中率較低,回源較多,在加上節(jié)點(diǎn)數(shù)量一般。換成了aws,同樣為我們節(jié)省了很多加載時(shí)間(注冊(cè)和開通相對(duì)麻煩,但是為了用戶體驗(yàn),這些都是值得的)。
后端性能優(yōu)化 如何進(jìn)行后端優(yōu)化可以寫幾本書毫不夸張,但是我們做的就是加配置,有錢人性。啊哈哈哈哈
Response Time
這部分做的就是頁面的靜態(tài)化還有就是開啟服務(wù)端的gzip功能,具體方法請(qǐng)google。別小看這個(gè)功能,真真可以節(jié)約時(shí)間。
dig
想要深入理解DNS查詢過程和原理,這個(gè)命令是不可或缺的 。通過它你可以靈活、清晰的查看域名DNS解析及其過程,幫助理解。
下面以taobao為例,說一下過程(這里指的是沒有緩存的情況下)
1.輸入taobao.com后,直接為你服務(wù)的DNS(簡稱為H吧)會(huì)將請(qǐng)求報(bào)告給最高等級(jí)服務(wù)器"." (這些最高等級(jí)DNS服務(wù)器稱為root, 就是圖中最開始站在食物鏈頂端的13個(gè),但并不是13臺(tái)機(jī)器,它們使用了任播技術(shù)可以在全球設(shè)立鏡像節(jié)點(diǎn),想想以現(xiàn)在的網(wǎng)絡(luò)請(qǐng)求的量級(jí)來說13臺(tái)肯定不現(xiàn)實(shí)。具體的鏡像分布可以參考這里,這些主機(jī)的內(nèi)容都是同步的),然后最高等級(jí)服務(wù)器告訴它你去找.com的DNS,我不管。
2.得到這個(gè)響應(yīng)后,H又將請(qǐng)求報(bào)告給 .com,.com告訴它,你去找taobao的DNS吧,我不管。
3.得到這個(gè)響應(yīng)后,H又將請(qǐng)求報(bào)告給taobao,taobao告訴它,我不管,你去找我四個(gè)小弟吧。
- ns4.taobao.com.
- ns5.taobao.com.
- ns6.taobao.com.
- ns7.taobao.com.
最后被分配給了ns4,從這得到了最終ip,完成了DNS lookup。
看到評(píng)論中有疑問,其實(shí)可以多試幾次,會(huì)分配到不同的小弟,但是都有淘寶的A記錄,所以都可以解析 也可以dig不同的ns4,ns5,ns6,ns7 具像化的看一看。
最后
通過這次排查慢速的過程,不止學(xué)到了技術(shù)方面可以改進(jìn)的地方,也真正認(rèn)識(shí)到了對(duì)于網(wǎng)站來說,時(shí)間就是生命。加載時(shí)間長,用戶真的是不慣著你。 優(yōu)秀的站點(diǎn)之所以優(yōu)秀,就在于把每個(gè)細(xì)節(jié)都做的很優(yōu)雅。