一字一圖,領略瀏覽器方向的優化
一、寫在前面
再過半個月,Internet Explorer 就正式退役了,曾經的瀏覽器霸主,服役超過25年的瀏覽器落幕。它的落幕可能有多方面因素綜合的結果,但瀏覽器效能和使用者體驗不符預期,必然是它被市場和使用者所“拋棄”的重要原因。
市面上的瀏覽器很多,據統計超過 8 0種,很多你可能都沒聽過,例如 greenbrowser,chromeplus(楓樹),
Lunascape,糖果瀏覽器,彗星瀏覽器,Gomodo Dragon,蜜蜂瀏覽器,Slim Browser等。
不管啥瀏覽器,也不過有多少種瀏覽器,瀏覽器效能永遠是避不開的話題,也常常是各大瀏覽器釋出會上“賣點”。
至此,瀏覽器效能重要性不言而喻了。
那麼接下來,就看看關於瀏覽器方向的優化,以及我們具體上能做些什麼。
tips:清楚本文是關於介紹瀏覽器方向的優化,對於讀懂本文並有所收穫很重要。
二、高談闊論:“一字一圖”
一字指的是“預”字,一圖指的是下面這張概括瀏覽器方向優化的腦圖。
聰慧的你,相信看出了一些東西。我們知道,不同的瀏覽器,它們的核心,它們的內部執行機制,可能是有所不同,這意味著在具體的優化技術上,可能要“因地制宜”,才能更好的奏效,是瀏覽器效能和使用者體驗得到提升。
儘管如此,從核心優化策略的角度看,也可以大致的將針對瀏覽器方向的優化分為兩類:
一是,文件類優化
二是,推測類優化
也就是說,關於瀏覽器方向的優化,在核心優化策略上,可以分為兩個方向,一是文件優化方向,二是瀏覽器推測性優化方向。
而在具體的技術手段上,主要分為下面這四種技術:
①頁面預渲染
頁面預渲染,是通過猜測你可能要訪問的目標,從而在隱藏的標籤頁中預先渲染整個頁面。當然,如果你是首次訪問某個目標,這可能不理想。注意,這是通過我們的一些表示,例如輸入部分關鍵字,此時我們還沒確定訪問,也還沒正式訪問,但瀏覽器通過一些線索,推測我們可能要訪問的目標,預先渲染了這些頁面。當用戶真正訪問瀏覽器猜中並提前渲染的目標頁面時,相信會有一種這個瀏覽器或這個站點響應速度真快的“錯覺”。我們無可否認,這是一種令大多數使用者滿意的表現,所以,頁面預渲染很棒。
②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 標籤在這方面的應用:
<!-- 預解析特定的域名 -->
<link rel="dns-prefetch" href="//example.com">
<!-- 預獲取某些頁面要用到的關鍵資源 -->
<link rel="subresource" href="//example.com/app.js">
<!-- 預獲取某些將來要用的資源,例如瀏覽器標籤上小 logo 圖示等 -->
<link rel="prerender" href="//example.com/logo.png">
<!-- 預渲染某些指定頁面 -->
<link rel="prefetch" href="//example.com/index.html">
複製程式碼
tips:link,HTML 外部資源連結元素,規定了當前文件與外部資源的關係。
tips:注意到了嗎?這些具體落地的,使用在我們開發的應用程式上的技術上,是不是和前述的高談闊論“一字一圖”息息相關。
- 不要在 Python 中使用迴圈,這些方法其實更棒!
- 分享 6 個 Vue3 開發必備的 VSCode 外掛
- 微服務架構的外部 API 整合模式
- 前端該如何優雅地 Mock 資料
- 微服務架構的通訊設計模式
- 我做了一個線上白板(二)
- 3 款非常實用的 Node.js 版本管理工具
- 636. 函式的獨佔時間 : 簡單棧運用模擬題
- TCP 學習筆記(三) 可靠傳輸
- 一文讀懂微服務架構的分解設計
- Python中常用最神祕的函式! lambda 函式深度總結!
- 技術分享| 小程式實現音影片通話
- Birdseye 極其強大的Python除錯工具
- Android技術分享| 影片通話開發流程(一)
- 細胞影象資料的主動學習
- React報錯之Cannot find name
- 智慧合約安全——私有資料訪問
- 30 個數據工程必備的Python 包
- 萬字長文Python面試題,建議先收藏
- 6個可解釋AI (XAI)的Python框架推薦