你是來找茬的吧？對自己的博客進行調優

“作為博客園的使用者而不是開發者，就不能對博客進行調優了？看好了，我只示範一次。” —— 我說的 0x00 大綱 0x01 前言用過很多博客和寫作平臺，但是最終還是選擇了博客園，畢竟，自定義 CSS 和自定義 JS 是真的香！某天突發奇想，決定對自己的博客進行下優化，現將其中的一些心得與大家分享。 ...

“作為博客園的使用者而不是開發者，就不能對博客進行調優了？看好了，我只示範一次。” —— 我說的

0x00 大綱

0x00 大綱
0x01 前言
0x02 性能調優
0x03 無障礙閱讀改造
0x04 小結

0x01 前言

用過很多博客和寫作平臺，但是最終還是選擇了博客園，畢竟，自定義 CSS 和自定義 JS 是真的香！某天突發奇想，決定對自己的博客進行下優化，現將其中的一些心得與大家分享。裡面的一些方式方法可能不通用，但是思路可能會對各位有所啟發。說實話，自己的本職工作並不是前端，不想搞那麼複雜，就用 Edge 瀏覽器的開發者工具里的 lighthouse 評分和載入時間作為優化基準。

以博客的使用者而不是開發者身份去進行優化，究竟能做到何種程度，讓我們拭目以待。

0x02 性能調優

減少載入項

（減少載入時間約40ms）在博客園後臺-選項頁面中取消勾選“啟用數學公式支持”，點擊“保存”按鈕，刷新頁面後至少可以減少以下幾個載入項，節省頁面載入時間約40ms：
- MathJax.js
- TeX-AMS-MML_HTMLorMML.js
- extpfeil.js
- mediawiki-texvc.js
（減少載入時間約50ms）在博客園後臺-設置頁面中“代碼高亮”部分取消勾選“顯示行號”，如果你用的是 prism 引擎，可以減少兩個載入項：
- prism-line-numbers.css
- prism-line-numbers.js

減少網路傳輸量

博文圖片儘量採用 PNG 格式，內容色彩較少時可以使用索引顏色壓縮。舉個慄子，這是兩張內容和解析度一樣，格式不同的兩張二維碼圖片，可以看到 PNG 格式比 JPG 格式文件大小相差一個數量級：

降低渲染複雜度

博文和自定義 HTML 部分儘量減少 DOM 數量和嵌套。比如：

<div class="hint">HELLO WORLD</div>

如果能滿足效果，就不要寫成：

<div class="container">
    <div class="text">
        <span>HELLO WORLD</span>
    </div>
</div>

壓縮資源文件

對於自定義的 CSS 或 JS 文件進行壓縮，如果引用外部的 CSS 或 JS ，儘量使用其 min 版本。能省一個位元組是一個位元組。

減少字體引用

對於自定義的 CSS，儘量使用統一的字體定義，避免引入大量不同的字體。

body {font-family: Lato, PingFang SC, Microsoft YaHei, sans-serif;font-size: 14px;font-weight: 300;}

對於博客園中一些帶了字體定義樣式的部分，可以予以覆蓋，比如文章支持數和反對數裡面引入了 Verdara 字體，可以通過繼承body中定義的font-family進行覆寫：

.burynum,.diggnum{font-family:inherit;}

改善 CLS 佈局偏移

CLS（Cumulative Layout Shift），累積佈局偏移，是頁面在整個生命周期中發生的每個元素佈局變化的分數總和（分數越低越好）。這些變化會影響用戶正確閱讀內容和與頁面交互的能力。所謂改善 CLS 就是要儘量保持頁面上元素位置的穩定，避免頁面元素在渲染過程中大幅度偏移初始位置。

常見的影響 CLS 的因素有：

未指定寬高的圖片。
動態插入的內容（廣告、iframe等嵌入元素）。
Web 字體的載入。
阻塞 DOM 更新的操作（通常是關鍵樣式或關鍵腳本載入等待網路響應）。

CLS 對性能總分的影響很大，由於每個人的自定義樣式不盡相同，所以這一塊只能根據個人情況對症下藥了：

（降低 CLS 分數 0.002）儘可能地為圖片元素設置明確的寬度值和高度值，以減少佈局偏移並改善 CLS，比如首頁的頭像和名片：

<!-- 頭像 -->
<img width="230px" height="230px" alt="avatar" class="esa-profile-avatar" src="https://images.cnblogs.com/cnblogs_com/mylibs/1647185/o_200214034545avatar.png">

<!-- 名片 -->
<img width="230px" height="230px" class="esa-profile-avatar" title="商務合作請添加微信" alt="商務合作請添加微信" src="https://images.cnblogs.com/cnblogs_com/mylibs/1647185/o_221216003723_card(wechat).png">

在博客園後臺-設置頁面中“頁腳 HTML 代碼”處引入自定義 JS，而不是公告欄或者頁首。這也是官方推薦做法。
（降低 CLS 分數 0.006）通過 CSS 而不是 JS 控制側邊欄的顯示/隱藏：

為了獲得更好的閱讀效果和較大的閱讀版式，原先通過自定義 JS 動態隱藏了文章詳情頁的側邊欄，大概是這樣的代碼：
```
if($("#post_detail").length > 0) {
    $("#sideBar").hide();
    $(".forFlow").css({"margin-left: 0 !important"});
} else {
    $("#sideBar").show();
    $(".forFlow").css({"margin-left: 260px"});
}
```
由於自定義 JS 的載入時機較晚，所以頁面難免出現大幅的偏移調整，導致 CSL 分數暴漲。這樣子做是有歷史原因的，因為最開始 CSS 還沒有父選擇器，不能通過子元素類型來選擇父元素，在博客這裡也就不能通過div.forFlow容器中的子元素內容來控制div.forFlow的偏移和mainContent的兄弟元素側邊欄sideBar，好在後來:has()偽類選擇器橫空出世，我可以這樣子通過 CSS 來直接控制了：
```
#mainContent .forFlow {
    margin-left: 260px;
    max-width: 960px;
}

.forFlow:has(#post_detail) {
    margin-left: 0 !important;
}

#mainContent:has(#post_detail)+#sideBar {
    display: none !important;
}
```
當作為博客主頁顯示時，由於#post_detail元素不存在，因此，div.forFlow容器會向左偏移260像素，為側邊欄留出顯示空間；當用戶點擊文章進行閱讀時，#post_detail元素將被載入，兩個has()偽類選擇器生效，達到取消偏移量和隱藏側邊欄的效果，缺點就是到目前為止，不是所有瀏覽器都支持。比如火狐就不支持……在不支持的瀏覽器上，它是可容錯的，相當於這兩個樣式不存在，不會影響頁面的可訪問性。

以我自己的博客為例，可以看到在 Edge 和 Chrome 瀏覽器上，文章詳情頁中側邊欄是隱藏的，而在火狐瀏覽器上，側邊欄依然存在。

改善 FCP 首次內容繪製

FCP（First Contentful Paint），首次內容繪製，該指標測量頁面從開始載入到頁面內容的任何部分在屏幕上完成渲染的時間。對於該指標，“內容”指的是文本、圖像（包括背景圖像）、元素或非白色的元素。所謂改善 FCP 就是要讓瀏覽頁面的用戶儘快地看到頁面內容，即使此時頁面還未完全渲染完成——以此優化用戶體驗。

能做的也不多，暫時發現比較有優化價值的是 Web 字體，可以利用 font-display 這項 CSS 特性，確保文本在網頁字體載入期間始終對用戶可見。比如在用到了自定義 Web Font 的地方，加上font-display: swap;，註意要在@font-face定義裡面聲明，否則無效，像這樣：

@font-face {font-family: Material Symbols Outlined;font-display: swap;font-style: normal;font-weight: 300;src: url(https://cdn.cnblogs.com/iconfonts/iconfont-chnmig.ttf) format("truetype");}

直接減少 FCP 時間約60ms！但這還不是極限，大部分小伙伴引入的自定義字體多是 IconFont 之類的圖標字體，但是一個圖標字體裡面可能有上百個冗餘圖標，我們往往只使用了其中的某幾個。利用神器icomoon，我們可以只將自己用到的圖標封裝成自定義的字體，甚至可以將其以 base64 編碼的形式，內嵌到自定義樣式中，這可以帶來數量級的載入時間提升（取決於原字體的大小）。以我自己的博客為例，將僅用到的12個圖標轉換成自定義字體後，首頁的 FCP 時間減少了將近200ms：

@font-face {font-family: 'iconfont-mylibs';src: url('data:font/woff;charset=utf-8;base64,(限於篇幅，此處省略數據定義)') format('woff');font-weight: 300;font-style: normal;font-display: swap;}

0x03 無障礙閱讀改造

此部分主要參照標準為 WCAG 2.1 (AA), WCAG 2.0 (AA)

媒體查詢

通過@media媒體查詢適配不同解析度的終端設備，以保證用戶在不同的設備上，都能獲得較佳的瀏覽體驗。

色彩分離度

原主題在白天和黑夜模式共用一個主題顏色#2d8cf0，色彩分離度不是很好，尤其是小字體的時候，很容易導致閱讀困難。遂將原主題白天模式前景色調整為#0f73e1，使其與背景色有更強的區分度，夜間模式時保持原來的顏色不變。關於採用何種前景色和後景色才具有良好分離度，可以使用這個鏈接裡面的工具，提供動態參照對比。

正確使用滑鼠手勢

在自定義 HTML 和樣式時，註意正確使用滑鼠手勢。比如在超鏈接和按鈕上使用手形游標，在可選文本上使用文本游標，在非交互元素上使用預設游標等等。

類型	說明
auto	預設值。瀏覽器根據當前情況自動確定滑鼠游標類型。
all-scroll	有上下左右四個箭頭，中間有一個圓點的游標。用於標示頁面可以向上下左右任何方向滾動。
col-resize	有左右兩個箭頭，中間由豎線分隔開的游標。用於標示項目或標題欄可以被水平改變尺寸。
crosshair	簡單的十字線游標。
default	客戶端平臺的預設游標。通常是一個箭頭。
hand	豎起一隻手指的手形游標。就像通常用戶將游標移到超鏈接上時那樣。
move	十字箭頭游標。用於標示對象可被移動。
help	帶有問號標記的箭頭。用於標示有幫助信息存在。
no-drop	帶有一個被斜線貫穿的圓圈的手形游標。用於標示被拖起的對象不允許在游標的當前位置被放下。
not-allowed	禁止標記（一個被斜線貫穿的圓圈）游標。用於標示請求的操作不允許被執行。
pointer	和hand一樣。豎起一隻手指的手形游標。就像通常用戶將游標移到超鏈接上時那樣。
progress	帶有沙漏標記的箭頭游標。用於標示一個進程正在後臺運行。
row-resize	有上下兩個箭頭，中間由橫線分隔開的游標。用於標示項目或標題欄可以被垂直改變尺寸。
text	用於標示可編輯的水平文本的游標。通常是大寫字母I的形狀。
vertical-text	用於標示可編輯的垂直文本的游標。通常是大寫字母I旋轉90度的形狀。
wait	用於標示程式忙用戶需要等待的游標。通常是沙漏或手錶的形狀。
*-resize	用於標示對象可被改變尺寸方向的箭頭游標。w-resize\|s-resize\|n-resize\|e-resize\|ne-resize\|sw-resize\|se-resize\|nw-resize
*url (url)*	用戶自定義游標。使用絕對或相對url地址指定游標文件(尾碼為.cur或者.ani)。