前端知識筆記 - 性能

前端知識筆記 - 性能

本文章總結 https://github.com/thedaviddias/Front-End-Checklist
內部，非原創性內容。

最佳實踐

全局目標

• 第一幅有意義的繪圖在 1s 內
• 對於平均配置交互時間應該小於 5s （平均配置批 200$ 內的安卓設備在慢 3G 網絡 400ms RTT 和 400kpbs 的傳輸速度）
• 嚴格限制文件大小在 170kb 之內（gzip 後）, 可使用 npx size-limit --why 查看佔用狀況（https://evilmartians.com/chronicles/size-limit-make-the-web-lighter），至關於 vue 提供的 report 選項。

其餘

• HTML 進行壓縮
• 使用懶加載，包括圖片，script，css 等。參見各自的優化方式
• cookie 大小限制。cookie 大小每一個不要超過 4096 byte，域名下不要超過 20 個 cookie
• 第三方組件：第三方的 iframe 或者組件若是依賴外部 js 可使用靜態組件替代，減小調用

爲即將到來的請求優化

DNS 解析(dns-prefetch)

即將進行解析的域名進行獲取

<link rel="dns-prefetch" href="https://example.com">

預鏈接(preconnect)

對於即將請求的服務提早進行 DNS 查找， TCP 握手和 TLS 協商

<link rel="preconnect" href="https://example.com">

預獲取(prefetching)

<link rel="prefetch" href="image.png">

預加載（preloading）

要在 body 中加載的進行提早加載

<link rel="preload" href="app.js">

preload 和 prefetch 的使用區別

本部分提取 https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf 的主要內容

prefetch 和 preload 區別： preloading 是聲明未獲取，會強制瀏覽器發起請求進行加載，不會阻塞文檔的 onload 事件。 prefetch 則是告訴瀏覽器該資源可能用到，由瀏覽器決定什麼時候獲取。

preload 可提高 10% 交互時間，

何時使用 preload 和 prefetch

preload 資源僅限於該資源加載的可能性很是高時，prefetch 用於未來可能被使用時。

瀏覽器緩存策略

chrome 有四種策略： HTTP 緩存，內存緩存，service Worker 緩存，和Push 緩存。兩種資源最終均使用 HTTP 緩存

是否最終緩存取決於緩存策略。

chrome 對於 preload 和 prefetch 的加載優先級

preload 使用 as 會和對應的類型加載優先級相同，不然會優先於 XHR。具體優先級可在 devtools 中添加priority 列。

圖片（在當前視圖中的）在加載過程當中是有相對比較高的優先級，因此最好對圖片實行懶加載。

使用預加載是否會浪費帶寬？

使用 preload 或 prefetch ，可能會致使浪費帶寬，尤爲是沒有設置資源緩存的時候。
chrome 在使用 preload 加載腳本，但3秒內沒有使用它時會有警告。

出現兩次獲取資源的緣由

• 不要使用 prefetch 做爲 preload 的 fallback。
• 不要 preload 同時使用 fetch()。這個是 bug， xhr 沒有該問題，會命令緩存
• 提供 as 參數，不然可能會下載兩次。
• preload 字體不使用 crossorigin 會致使兩次獲取。
• 有 integrity 屬性的資源沒法利用 preload 的資源，會兩次獲取(注： integrity 是資源的一個摘要，防止資源被惡意篡改)

最後要注意： 不要給全部資源添加 preload，只爲最近要加載的資源設置。

是否應該爲我全部的資源添加 preload ? 有沒有限制只 preload 最多 6 條的原則？

這個取決於你服務器有多少資源要加載和你用戶的帶寬以及其餘的一網絡情況。

極可能用到的請使用 preload，其餘重要的使用 prefetch。對於 script 來說，preLoad 關鍵的 bundle 比使用 <script async></script> 要好的多，同時你能夠 preload 圖片、樣式，字體、媒體等。須要本身明確你頁面中最早用到哪一個資源。

prefetch 有特殊的屬性要注意

chrome 中，若是用戶從一個頁面中 prefetch 了一個資源，跳轉到新頁面時還會在 flight 狀態，請求不會結束。另外， prefetch 的資源不論是否設置了緩存，都會在 net-stack 中緩存至少 5 分鐘。

使用 js 實現的 preload 和 rel=preload 或者 preload 的header 有什麼區別？

preload 是和 js 處理執行是解耦的，preload 標記會被 chrome 掃描，也就無論 preload 標籤在 HTML 什麼問題，都會被提早捕獲。這種實現比 js 實現更爲強大

是否應該使用 http2 的 push 功能來替代 preload?

使用 push 的狀況在於你知道確切的資源加載順序，有 service worker 來攔截可以被緩存的請求。preload 可以將開始下載的時間提早到最開始的 request，不論是否爲第三方資源。

這種要根據特性來， preload 在於和執行解耦，且有緩存策略，它的執行不會阻止執行其餘內容。

push 不能使用第三方，直接下發資源對於瀏覽器來說迴路更短，但它只在你明確知道你在作什麼的時候才能提升性能。

什麼是連接的 preload 頭？和 preload 的標籤有什麼區別？和 HTTP2 的 push 有什麼關係？

請求頭的方式：

Link: <https://example.com/other/styles.css>; rel=preload; as=style

區別在於：使用 headers 時可能會觸發 HTTP2。使用 tag 不會觸發 push.

如何對 rel=preload 連接進行瀏覽器是否支持檢測？

const preloadSupported = () => {
  const link = document.createElement('link');
  const relList = link.relList;
  if (!relList || !relList.supports)
    return false;
  return relList.supports('preload');
};

可否對已經加載的 preload css 樣式進行設置爲 stylesheet？

preLoad 是基於異步的載入，能夠在 onload 時設置

<link rel="preload" href="style.css" onload="this.rel=stylesheet">

其餘 preload 應用

用於加載 web 字體，異步加載 css，當前頁的 js 腳本加載

支持 preload 和 prefetch 的瀏覽器

preload 支持 50%， prefetch 70%, 可參考 can i use

各種型的性能最佳實踐

其餘基礎性能提升

HTML

清理註釋，壓縮 HTML

CSS

• Concatenation: 全部 CSS 樣式合在一塊兒
• Minification： 壓縮 css
• Non-blocking: 不阻塞 DOM 進行加載樣式，能夠考慮使用 loadCSS 進行加載
• Unused CSS：移除不使用的 CSS 代碼，使用 devTool 中的 coverage 來查看, 與代碼集成 PurgeCSS 或 purifyCSS

圖片

• 優化，使用 webp 等格式
• 使用 Sprite 圖
• 懶加載

js

• js 文件合併
• 最小化壓縮
• 不阻止渲染加載
• 優化和更新 js 庫