JS 中的 CSS

'CSS-in-JS' 是一個從樣式元件開始並在 Javascript 定義樣式的流程。

樣式元件、Emotion、Mantine 等

優點

1. 適用範圍較小。
   1. 如果使用css模組，也可以縮小css的範圍
2. 與元件定義在同一位置。 （並置）
3. 可以使用Javascript變數。

劣勢

1. 運行時開銷
2. 您必須下載CSS in JS庫檔。
   1. 情感為 7.9KB。
   2. Mantine 是 134KB！

巨大的缺點

1. 經常插入CSS規則會導致大量的計算工作。
   1. 情緒與 CSS 的比較
   2. 使用CSS時，效能提升約50%。
2. 使用SSR時，會出現各種各樣的問題。
   1. 如果您查看 Emotion 儲存庫，會發現很多問題。

CSS-in-JS 使用 Mantine（基於 Emotion）。
效能測量使用 React 開發工具。
效能測量目標是一個30 * 5的Table（元件名稱：SheetTable）。

按鈕時，將呈現上面的畫面
• 。
在 React Profiler 中開啟錄製並按下按鈕錄製螢幕渲染。
• 測量SheetTable的渲染時間。
• 共執行5次，取平均值。
CSS-in-JS (Mantine)

順風

結果

• 即使只更改一個單元格程式碼，效能也能顯著提高。 （當然，大部分都是細胞）
• 在 60Hz 顯示器上，1 幀為 16ms，但 3 幀 -> 2 幀

結論

• 除非需要使用JS變量，否則使用Tailwind。
• （補充）引進SSR，方便放棄CSS-in-JS。
• 參考號