寫在前面的話
我會将過去幾年學到的 Canvas 制圖理論、實踐進行濃縮、并編輯成冊。希望通過體系化的内容組織助你快速入門、深入了解 Canvas。當然，因篇幅有限，本課程可能無法做到面面俱到，但是有了核心知識的積累，不論是繼續閱讀 Canvas 系列書籍，還是進一步擴充 Canvas 的學習領域、如 3D 制圖等，都能做到左右逢源。
本 Canvas 系列課程已經編輯成冊并陸續更新，下面是已更新章節傳送門：
《Canvas 自動化制圖必知必會-導讀篇》
《Canvas 上下文詳解》
《一文讀懂 Canvas 中的 scale 與 translate》
《一文讀懂 Canvas 中 rotate 與 skew 操作》
《Canvas 矩陣鏡像那些你不得不知的數學原理》
話不多說，直接進入正題。
本篇前言
研究發現：頁面加載速度在0-5s之間時，每額外增加1s的加載時間将會直接導緻網站的轉換效率下降4.42%，前5s的頁面加載時間對于站點轉化效率影響最大。是以，通過對頁面的HTML和CSS的有效組織會在一定程度上提升頁面的加載速度。
下面将重點介紹頁面中常見的HTML&CSS内容進行相應優化的手段。
1.懶加載
懶加載能有效縮短頁面渲染的關鍵路徑，進而提升頁面的加載速度。
1.1 CSS拆分
CSS檔案需要瘦身，進而盡快完成加載，而這可以通過媒體類型拆分、媒體查詢等手段提升頁面渲染。比如下面的CSS将會在所有的裝置上加載：
<!-- Loading and parsing styles.css is render-blocking -->
<link rel="stylesheet" href="styles.css" /> 列印裝置
如果一個CSS檔案隻需要作用于列印裝置，可以通過如下方法：
<!-- Loading and parsing print.css is not render-blocking -->
<link rel="stylesheet" href="print.css" media="print" /> 手機裝置
如果一個CSS檔案隻需要在手機上加載，可以通過如下方法進行聲明：
<!-- Loading and parsing mobile.css is not render-blocking on large screens -->
<link
rel="stylesheet"
href="mobile.css"
media="screen and (max-width: 480px)" /> 平闆
如果一個CSS檔案隻需要在平闆（Tablet Screens）上加載，可以通過如下方法進行聲明：
<!-- Loading and parsing tablet.css is not render-blocking on large screens -->
<link
rel="stylesheet"
href="tablet.css"
media="screen and (max-width: 1080px)" /> 手機橫屏豎屏
下面的CSS檔案隻在手機豎屏時候加載。
<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" /> 以上幾個示例表示：通過将CSS拆分成不同的檔案，主樣式檔案styles.css體積将會有效減少，實作按需加載的方式提升了頁面的整個加載速度。
1.2 font-display字型規則
對于@font-face規則來說，font-display屬性定義了浏覽器如何下載下傳和展示字型檔案，以及字型檔案在加載中、或者加載失敗時候使用的打底字型方案。相對于展示給使用者一個空白的螢幕而言，讓無樣式的文字較快出現在使用者視野中是使用者體驗的一種平衡。
@font-face {
font-family: "nunito", sans-serif;
font-weight: 400;
font-style: normal;
font-display: fallback;
}
1.3 HTML中的圖檔檔案
使用者在初始條件下僅僅需要看到位于首屏的圖檔，是以适當的将非首屏圖檔進行延遲加載是有必要的。使用loading="lazy"将會使得圖檔能按需加載，進而減少頁面加載時長，提升加載速率。
<img src="my-logo.png" alt="KOUSTAV" loading="lazy" /> 2.圖檔格式的正确選擇
盡量将圖檔格式儲存為.webp，webp已經漸漸成為網頁圖檔的标準。相對于PNG圖檔而言，WebP格式在檔案大小上會減少26%。而相對于JPEG圖檔來說，在相同的圖檔品質指數(SSIM)下體積将會減少25–34%。同時，WebP也支援動圖，而且比GIF和APNG更小。
2.1 WebP vs PNG圖檔對比
2.2 WebP vs JPEG圖檔對比
以上測試表明，webp的圖檔在同等品質下尺寸會更小，進而有效減少頁面加載時長。
當然也可以關注下.avif圖檔格式，在某些場景下.avif的圖檔表現會比.webp更加優秀，當然因為它出現的時間是在2019，是以在浏覽器的支援範圍上肯定沒有webp那麼廣泛。
2.3 使用picture标簽加載圖檔
a) 為不同媒體條件設定不同的圖檔位址（比如在小型裝置上做一個圖檔清晰度的降級，即下載下傳高清圖檔的縮略版）
b）提供不同圖檔格式的備選方案，比如在某些情況下webp格式的圖檔可能不支援
c）通過加載最适合使用者的圖像來節省帶寬，同時節省頁面加載時間
如果要為高 DPI (Retina) 裝置提供更高清晰度的圖像版本，請在 <img> 元素上使用srcset。浏覽器可以自動在低分辨率模式下選擇低分辨率圖檔版本而無需額外設定媒體查詢條件。
<picture>
<source srcset="my-logo-wide.webp" type="image/webp" media="(min-width: 600px)" />
<source srcset="my-logo-wide.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
<source srcset="my-logo-narrow.webp" type="image/webp" />
<img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture> 3.圖檔設定
因為圖檔在首次渲染之後需要異步加載（不阻塞關鍵渲染流程），如果不預先确定好圖檔尺寸會引起頁面重排。例如，經常遇到的圖檔加載完成後因尺寸變化導緻文字需要順次往下移動的情況。是以，一般情況下建議提前設定好圖檔的寬、高度屬性以便浏覽器在布局時預先為其預留白間。而對于背景圖background-image而言，使用打底的背景色進行填充也能讓圖檔加載時候頁面的可讀性增強。
4. HTML&CSS檔案壓縮
在HTML&CSS的壓縮方面可以選擇的工具很多，比如CodeBeautify、CSS Minifier等，這些工具能移除檔案中的無效字元，比如tab、換行、空格等等，進而提升頁面的加載速度
參考資料
https://levelup.gitconnected.com/html-css-features-tips-for-a-10x-fast-page-loading-speed-5fb6c2d88df8