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

2022-01-30 13:32:37 字數 2725 閱讀 1345

本文**自掘金專欄以及360奇舞週刊,作者 gladyu ,侵權刪。

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

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

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

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

在查詢慢速過程中收穫很多決定記錄下來。(在這裡強烈安利乙個可以檢測站點 全球各個地區載入時間的** ,真的強烈推薦)

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

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和優化後端效能。

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

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

下面以taobao為例,說一下過程(這裡指的是沒有快取的情況下)

1.輸入taobao.com後,直接為你服務的dns(簡稱為h吧)會將請求報告給最高等級伺服器"."(這些最高等級dns伺服器稱為root, 就是圖中最開始站在食物鏈頂端的13個,但並不是13臺機器,它們使用了任播 技術可以在全球設立映象節點,想想以現在的網路請求的量級來說13臺肯定不現實。具體的映象分布可以參考這裡 ,這些主機的內容都是同步的),然後最高等級伺服器告訴它你去找.com的dns,我不管。

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

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

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

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

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

生活在資訊 的今天,我們每天不得不面對和過濾海量的資訊 無疑是焦躁和浮動的,這就意味著使用者對你站點投入的時間可能是及其吝嗇的 當然91,pronhub等剛需站點除外 如何給使用者提供迅速的響應就顯得十分重要了,這可能成為你留住使用者的關鍵。即使 設計的再優秀,功能再完美,但是響應的巨慢,使用者的耐...

如何將檔案從stage移除

git將檔案分成三個階段 working directory stage repository 要進入repository之前,必須先進入stage,但實際上可能用了git add之後,才後悔發現這個檔案不應該進stage,必須從stage中移除,由於必須考慮該檔案是否已經存在於repository...

chrome如何分析頁面載入時間

以chrome為例,開發者模式中跟頁面載入時間相關的是network面板。當頁面的初始的標記被解析完成時,會觸發domcontentloaded,它在network面板上的兩個位置顯示 當頁面完全載入時觸發load事件,它顯示在三個地方 點選timing選項卡可以檢視單個資源的請求生命週期的明細分類...