一字一圖,領略瀏覽器方向的優化
theme: channing-cyan highlight: a11y-dark
持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第3天,點選檢視活動詳情。
一字一圖,領略瀏覽器方向的優化
一、寫在前面
再過半個月,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 標籤在這方面的應用:
```html
```
tips:link,HTML 外部資源連結元素,規定了當前文件與外部資源的關係。
tips:注意到了嗎?這些具體落地的,使用在我們開發的應用程式上的技術上,是不是和前述的高談闊論“一字一圖”息息相關。
寫在後面
所以瞭解學習瀏覽器的優化機制策略手段,對我們做針對瀏覽器方向,在具體的應用程式上做優化是有意義的,因為它們是息息相關的。
總的來說,具體到每個文件頁面,我們應該關注以下這幾點:
-
儘可能早的讓關鍵資源出現在文件上,例如一些關鍵的 js 指令碼和 css 資源。
-
注意 css 渲染阻塞的特點,儘早載入交付它們。
-
注意合理安排 js 資源,合理利用 script 的 defer(延遲)和 async(非同步)屬性,考慮推遲或非同步獲取一些非關鍵指令碼資源,從而避免阻塞 CSSOM 和 DOM 的構建。
tips:所有有關瀏覽器的技術,都應該注意瀏覽器差異和瀏覽器相容性,本文提到的有關技術手段也不例外。
- 複習|js指令碼肯定會阻塞渲染?
- 雙18期|CSS揭祕之簡寫屬性
- 扁平資料轉tree與tree資料扁平化
- CSS揭祕之效能優化技巧篇
- 資料視覺化:核心、互動、分類與工具
- 哇,這個易用工具適合我這水平的人
- 前端技術圖譜:看看你學廢了哪些?
- 雙17期|跨域資源共享:跨域錯誤該前端還是後端處理?
- js對話資料庫體驗:hello-mysql
- CSS揭祕之控制繼承:height能變為可繼承嗎?
- 進階|監控上傳和下載進度
- 今日軟考|普通程式設計師或許更應考軟考
- 一字一圖,領略瀏覽器方向的優化
- 天天用可替換元素(replaced element),竟說不知道
- 不要再濫用css樣式!important規則了
- 適合非大廠的70 面試題(2022-5)
- 11種樣式選擇器與樣式優先順序計算
- 面試|變數提升與函式提升,挑戰下這幾個例子?
- 雙10期|基本物件Error及8種錯誤型別
- 社群資料說話,真的是前端最卷?