關於瀏覽器資源載入

瀏覽器通常按照以下順序進行渲染。

- html 解析 (由上至下 head -> body) :

1. HTML 解析及 DOM 建立
2. CSS 檔案載入及套用 (阻擋渲染)
3. 腳本載入及執行 (阻擋渲染)

4. <body> 區段內容渲染 (圖片、文字等)

控制瀏覽器的資源優先順序可以最佳化頁面載入速度。

以下記錄可以改善渲染順序的主要屬性。

- JavaScript: async, defer, module
- CSS: preload, media
- 圖片: loading="lazy", srcset, sizes
- 其他: prefetch, preconnect, dns-prefetch

async ：與 html 解析並行下載，下載完成後立即執行。如果頁面的任何資源與此 js 相關，最好移除 async 標籤。

defer ：與 html 解析並行下載，html 解析完全結束後執行。= 順序保證。如果必須在 html 完全渲染後執行，最好新增 defer 標籤。

瀏覽器預設會先載入 html，如果 head 標籤內有 script 來源，則會阻擋渲染。新增上述兩個標籤可以防止阻擋 html 渲染。

styleshee ：預設值。阻擋渲染的元素，在必須載入 css 的情況下使用。

preload ：不阻擋渲染，預先下載。在 onload 事件發生時點變更為 stylesheet，套用樣式。

media: 符合螢幕尺寸條件時進行渲染。

loading="lazy"：圖片顯示在螢幕上時載入。(捲軸位置在圖片所在元素附近時)

srcset ：選擇符合螢幕尺寸的最佳圖片。(圖片容量最佳化)

sizes：提供提示，讓瀏覽器根據視窗大小選擇適當的圖片。

最後一個 img 標籤的情況下，如果有寬度為 480px 和 1024px 的圖片，則根據 size 屬性，如果 max-width 為 600px，則顯示 480px 的圖片，否則顯示 1024px 的圖片。

* 在電商網站中，一個頁面內可能有數十張圖片，因此減少圖片容量的效果非常顯著。

例如，搜尋結果畫面至少有 20 張以上的圖片，如果搜尋每天執行 100,000 次…

rel="prefetch"：在移動頁面之前預先下載資源，以改善下一頁的載入速度。

rel="preconnect"：預先設定特定連結的網路連線。(大型影片、字體等)

rel="dns-prefetch"：查詢外部資源的 dns，以更快地載入資源。(主要用於外部 CDN)

* preconnect vs dns-prefetch

preconnect 是 tcp 連線 (dns - tcp handshake - tls handshake)，因此是佔用瀏覽器資源的繁重操作。在需要快速載入外部資源時使用。(非常重要的資源，且此資源的快速渲染非常重要時)

dns-prefetch 只查詢 dns，因此操作較輕量。對於不重要的資源，以及日後載入時很適合。