一字一圖,領略瀏覽器方向的優化

語言: CN / TW / HK

theme: channing-cyan highlight: a11y-dark


持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第3天,點選檢視活動詳情

一字一圖,領略瀏覽器方向的優化

一、寫在前面

再過半個月,Internet Explorer 就正式退役了,曾經的瀏覽器霸主,服役超過25年的瀏覽器落幕。它的落幕可能有多方面因素綜合的結果,但瀏覽器效能和使用者體驗不符預期,必然是它被市場和使用者所“拋棄”的重要原因。

市面上的瀏覽器很多,據統計超過 8 0種,很多你可能都沒聽過,例如 greenbrowser,chromeplus(楓樹), Lunascape,糖果瀏覽器,彗星瀏覽器,Gomodo Dragon,蜜蜂瀏覽器,Slim Browser等。

不管啥瀏覽器,也不過有多少種瀏覽器,瀏覽器效能永遠是避不開的話題,也常常是各大瀏覽器釋出會上“賣點”。

至此,瀏覽器效能重要性不言而喻了。

那麼接下來,就看看關於瀏覽器方向的優化,以及我們具體上能做些什麼。

tips:清楚本文是關於介紹瀏覽器方向的優化,對於讀懂本文並有所收穫很重要。

二、高談闊論:“一字一圖”

一字指的是“預”字,一圖指的是下面這張概括瀏覽器方向優化的腦圖。

image.png

聰慧的你,相信看出了一些東西。我們知道,不同的瀏覽器,它們的核心,它們的內部執行機制,可能是有所不同,這意味著在具體的優化技術上,可能要“因地制宜”,才能更好的奏效,是瀏覽器效能和使用者體驗得到提升。

儘管如此,從核心優化策略的角度看,也可以大致的將針對瀏覽器方向的優化分為兩類:

  • 一是,文件類優化

  • 二是,推測類優化

也就是說,關於瀏覽器方向的優化,在核心優化策略上,可以分為兩個方向,一是文件優化方向,二是瀏覽器推測性優化方向。

而在具體的技術手段上,主要分為下面這四種技術:

  • ①頁面預渲染

頁面預渲染,是通過猜測你可能要訪問的目標,從而在隱藏的標籤頁中預先渲染整個頁面。當然,如果你是首次訪問某個目標,這可能不理想。注意,這是通過我們的一些表示,例如輸入部分關鍵字,此時我們還沒確定訪問,也還沒正式訪問,但瀏覽器通過一些線索,推測我們可能要訪問的目標,預先渲染了這些頁面。當用戶真正訪問瀏覽器猜中並提前渲染的目標頁面時,相信會有一種這個瀏覽器或這個站點響應速度真快的“錯覺”。我們無可否認,這是一種令大多數使用者滿意的表現,所以,頁面預渲染很棒。

  • ②DNS 預解析

DNS 預解析,有點頁面預渲染的味道,當然,這一步通常發生在頁面預渲染的前面。它是一種通過推測使用者可能要訪問的域名,提前對這些域名進行解析,從而縮短使用者感知到的耗費時間,提升體驗的手段。既然是推測提前解析,那麼推測的依據是啥呢?這可能和瀏覽器的標籤頁,滑鼠懸浮指向,導航歷史等有關。我們知道,http 請求是存在DNS延遲的,而如果瀏覽器的推測正確,提前進行了 DNS 解析,這種延遲問題可以得到很好的處理。

  • ③TCP 預連線

瀏覽器推測性的提前開始 TCP 連線,就是所說的 TCP 預連線,它發生在 DNS 解析之後。TCP 預連線能帶來的好處是,假如瀏覽器的推測正確,那麼可以省下一次完整的 TCP 握手實踐。不要小瞧這一次握手的時間,這對機器而言,可以發生很多事,尤其是在“搶先佔位”這種方向上。

  • ④資源預取

和頁面相關的解析器,例如文件解析器、樣式解析器、指令碼解析器等,可以和網路協議層溝通,宣告預載入某些資源。某些資源,當然是指那些初始化渲染必要的資源,必要而又會阻塞繼續渲染的資源。

tips1:綜上圖文資訊,一字是四種技術手段的“預”,一圖是概括瀏覽器方向優化的腦圖。

tips2:上面提到的策略和手段,其實瀏覽器本身已經做了,或者說瀏覽器廠商已經做了。所以說這有點“高談闊論”的意思,而我們需要清楚這些機制和特點,從而做一些更具體的,普通開發人員能做的事情,從而提升經我們手上開發的應用的效能。

具體落地:一個 link 標籤

關於預載入預解析方面的技術 http 方向有,html 的 link 標籤也通過 ref=“prefetch”,ref=“prerender”,ref=“dns-prefetch” 來支援。

通過 link 標籤 ref 提示一些關鍵字,告訴瀏覽器為我們採用對應的優化機制。舉例 link 標籤在這方面的應用:

```html

```

tips:link,HTML 外部資源連結元素,規定了當前文件與外部資源的關係。

tips:注意到了嗎?這些具體落地的,使用在我們開發的應用程式上的技術上,是不是和前述的高談闊論“一字一圖”息息相關。

寫在後面

所以瞭解學習瀏覽器的優化機制策略手段,對我們做針對瀏覽器方向,在具體的應用程式上做優化是有意義的,因為它們是息息相關的。

總的來說,具體到每個文件頁面,我們應該關注以下這幾點:

  • 儘可能早的讓關鍵資源出現在文件上,例如一些關鍵的 js 指令碼和 css 資源。

  • 注意 css 渲染阻塞的特點,儘早載入交付它們。

  • 注意合理安排 js 資源,合理利用 script 的 defer(延遲)和 async(非同步)屬性,考慮推遲或非同步獲取一些非關鍵指令碼資源,從而避免阻塞 CSSOM 和 DOM 的構建。

tips:所有有關瀏覽器的技術,都應該注意瀏覽器差異和瀏覽器相容性,本文提到的有關技術手段也不例外。