優化網頁加載時間嘗試

頁面寫的再漂亮,功能再完美,但是響應的巨慢,用戶的耐心很快會被耗光,這可能成為他最后一次訪問,
在這里強烈安利一個可以檢測站點 全球各個地區加載時間的網站here,真的強烈推薦)

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

預備知識

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

DNS

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

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

CDN

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

由于篇幅的原因這里就不詳細介紹了。對它不熟悉的或者想要溫習一下的, 我覺得主要有兩個因素來判斷CDN服務的優劣---命中率和節點數量

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

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

網頁加載時間

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

開始分析

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

DNS Time

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

這里再次安利,推薦一個網站真的叼,既可以查看不同服務商的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臺機器,它們使用了任播技術可以在全球設立鏡像節點,想想以現在的網絡請求的量級來說13臺肯定不現實。具體的鏡像分布可以參考這里,這些主機的內容都是同步的) ,然后最高等級服務器告訴它你去找.com的DNS,我不管。
3.得到這個響應后,H又將請求報告給taobao,taobao告訴它,我不管,你去找我四個小弟吧

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

看到評論中有疑問,其實可以多試幾次,會分配到不同的小弟,但是都有淘寶的A記錄,所以都可以解析 也可以dig不同的ns4,ns5,ns6,ns7 具像化的看一看
最后
通過這次排查慢速的過程,不止學到了技術方面可以改進的地方,也真正認識到了對于網站來說,時間就是生命。加載時間長,用戶真的是不慣著你。 優秀的站點之所以優秀,就在于把每個細節都做的很優雅

文章有疏漏淺薄之處,請各位大神斧正
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,333評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,491評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,263評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,946評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,708評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,409評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,939評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,774評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,209評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,650評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2 373

推薦閱讀更多精彩內容