性能比較之後，我決定放棄 CSS-in-JS

以下爲譯文：
CSS-in-JS 技術在前端工具中佔有重要的一席之地，而且這種趨勢在近期內還將持續。尤其是在 React 世界中。根據 2020 年 CSS 的使用狀況調查，在參與調查的 11492 人中，只有 14.3% 沒有聽說過 Styled Components（一個占主導地位的 CSS-in-JS 庫），超過 40% 的人都使用過該庫。

很長一段時間以來，我一直想深入比較一下 CSS-in-JS 庫（比如比較 Styled Components 與一個很好的 CSS 庫）的性能。可是很遺憾，我未能在實際的項目中進行比較，畢竟這不是一個簡單的測試場景。於是，我決定自己動手。我將一個真實的應用 從 Styled Components 遷移到了 Linaria（它會在構建時提取 CSS）。在用戶機器上不需要運行時生成樣式。

在開始比較之前，首先聲明一下，我並不討厭 CSS-in-JS。我承認 CSS-in-JS 的開發者體驗很棒，而且繼承自 React 的組合模型也很棒。它可以爲開發人員提供一些不錯的優勢。但是，我想從用戶的角度來看，這個偉大的開發者體驗的代價是什麼？

如果你十分關心網站的加載性能，則請不要使用運行時 CSS-in-JS。JS 代碼越少，網站的加載速度就越快。我們對此無能爲力。如果你想看一看具體的數字，則請繼續閱讀。

一、測試內容以及方法

我測試的應用是一個非常標準的 React 應用。使用 Create React App 項目引導，使用了 Redux，而樣式也採用了 Styled components（版本 5）。這個應用非常大，有許多頁面、可定製的儀表板、客戶主題等。由於是用 CRA 構建的，因此沒有服務器端渲染，一切都在客戶端上渲染（這是一個 B2B 應用，因此這不是必需的）。

我以這個應用爲基礎，並利用 Linaria 替換了 Styled Components，Linaria 有一個類似的 API。我以爲整個轉換會很容易，但事實證明一點都不容易。我總共花費了兩個多月的時間，才遷移了幾個頁面。

我使用 Chrome 開發工具在兩個最常用的頁面上運行了幾個測試。每項測試我都會運行 3 遍，然後求平均值。此外，我還將 CPU 限速設置爲 4 倍，將網絡限速設置爲速度非常慢的 3G。在性能測試中，我使用了單獨的 Chrome 配置文件，其中沒有任何擴展。測試內容：

  1. 網絡（JSS 與 CSS 資產的大小、覆蓋範圍、請求數量）；

  2. Lighthouse 審計（使用移動設備設置進行性能審計）；

  3. 性能分析（頁面加載測試，拖放交互測試）。

二、網絡測試

首先我們從網絡測試開始。CSS-in-JS 的優點之一是沒有未使用的樣式，是嗎？其實，不完全是。雖然你只激活了頁面上使用的樣式，但也可以下載不需要的樣式。只不過不是將它們放在單獨的 CSS 文件中，而是放在 JS 包中。

下面是使用 Styled Component 和 Linaria 構建的同一個主頁的比較數據。斜線前的數字是經過壓縮的大小，而斜線後是未壓縮的大小。

主頁網絡統計數據比較搜索頁面網絡統計數據比較

儘管 CSS 負載增加了很多，但是兩個測試用例下載的數據總量都減少了（但差異幾乎可以忽略不計）。但更重要的是，Linaria 的 CSS 和 JS 總量少於 Styled Component 中的 JS 代碼量。

三、覆蓋範圍

比較覆蓋範圍的時候，我們發現 Linaria 有很多未使用的 CSS（大約 55kB），而 Styled Component 有 6kB（這些 CSS 主要來自 npm 包，而非 Styled Components 本身），Linaria 未使用的 JS 代碼量比 Styled Component 少了 20kB。但 Linaria 中未使用資產的總體規模更大。這是外部 CSS 的弊端之一。覆蓋範圍比較 – 主頁覆蓋範圍比較 - 搜索頁面

四、Lighthouse 性能審計

提起性能，就不得不使用 Lighthouse 了。下面的圖表顯示了比較結果（3 次比較的平均值）。除了一些 Web 的關鍵性能指標之外，我還比較了主線程的工作（解析、編譯和執行資產的時間，其中最大的部分是 JS，但它涵蓋了佈局和樣式計算、繪圖等）和 JS 的執行時間。我省略了累計佈局偏移，因爲這個值幾乎爲零，而且 Linaria 和 Styled Component 之間幾乎沒有區別。如上圖所示，在大多數關鍵性能指標中，Linaria 的表現更好，而且在有些指標上佔很大優勢。例如，主頁的 LCP 快了 870 毫秒，在搜索頁面上快 1.2 秒。不僅頁面使用普通 CSS 渲染的速度更快，而且需要的資源也更少。阻塞時間和執行所有 JS 所需的時間分別減少了 300 毫秒和大約 1.3 秒。

五、性能分析

Lighthouse 提供了許多性能方面的見解。但如果想深入瞭解細節，開發工具中的性能選項卡纔是最好的選擇。你可以通過性能選項卡確認 Lighthouse 的結果。你可以通過下圖看到詳細信息。使用 Styled Component 構建的頁面擁有更多長時間運行的任務。與 Linaria 相比，這些任務需要更長的時間才能完成。

爲了讓你看到確切的數據，下面的表格詳細比較了 Styled Component（頂部）和 Linaria（底部）加載主頁的性能。
六、用戶交互比較
下面我們來比較一下用戶交互。我測量了拖放活動的性能。總體結果如下。

拖放比較
七、總結
如你所見，運行時 CSS-in-JS 會對網頁性能產生顯著的影響，主要會影響網速較慢或數據費用較高的低端設備和地區。因此，我們應該進一步思考我們使用的工具和方式。出色的開發人員體驗不應以犧牲用戶體驗爲代價。

我認爲開發人員應該更加謹慎地考慮我們選擇的工具對項目造成的影響。我不會在下一個新項目中使用運行時 CSS-in-JS。我會使用舊的 CSS，或者使用一些其他方式來代替 CSS-in-JS。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/8WUSEDBc-dY6ZnJA-oqOSg

猜你喜歡