JavaScriptを用いてウェブサイトのUIを構築する際によく利用されるのが「React」というFacebook製のライブラリです。ReactではJSXという記法を用いてコンポーネントを構築していきますが、その際にどういう方法でスタイリングを行うかはユーザーの手に任されています。その中でも比較的多く用いられているのが「普通のCSSを利用する方法」と、スタイル設定もJavaScript内で完結させる「CSS in JS」の2つなのですが、この2つについてパフォーマンスへの影響はどれくらい違うのかをフロントエンドエンジニアのトーマス・プストニクさんが計測してブログにまとめています。 Real-world CSS vs. CSS-in-JS performance comparison - Tomas Pustelnik's personal website https://pustelto.
![ページを高速に表示するには「CSS in JS」と普通のCSSのどちらを使うべきなのか?](https://cdn-ak-scissors.b.st-hatena.com/image/square/2a91ad260d300462e8111f41af8fc747b71ce6ec/height=288;version=1;width=512/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2021%2F06%2F25%2Fcss-in-js-performance%2F00.png)