ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）

フォントは「描画のプライド」を捨てろ：Webフォントの非同期地獄と戦うレンダリング戦略Webサイトのパフォーマンスを計測していて、こんな経験はないだろうか。「LCP（Largest Contentful Paint）は悪くないのに、ページが...

ブラウザの「画像」はなぜレンダリングのボトルネックになるのか：非同期デコードの深淵Webエンジニアが避けて通れない「画像」という存在。``タグを置けばブラウザがよしなに表示してくれる。そんな時代は、とっくの昔に終わりました。我々が向き合って...

レンダリングの聖域：GPUアクセラレーションという名の「メインスレッドからの逃走」Webブラウザのレンダリングパイプラインを語る際、多くのエンジニアは「CSSでアニメーションを動かす」ことと「GPUを使う」ことを同義に語りがちだ。しかし、実...

現代のブラウザレンダリングにおける「コンポジター」の深淵：GPUを使いこなすための戦略的最適化ブラウザのレンダリングパイプラインにおいて、最も誤解されやすく、かつパフォーマンスのボトルネックになりやすいのが「コンポジタースレッド」の挙動だ。...

`will-change`という「禁断の魔術」――ブラウザのレイヤー合成を極限まで制御するフロントエンドのパフォーマンスチューニングにおいて、`will-change`ほど誤解され、かつ強力な力を持つプロパティはない。「アニメーションがカク...

ブラウザの「再計算地獄」を断ち切る：CSS Containmentによるレンダリング・カプセル化の極意Webフロントエンドの世界で、我々が日々戦っているのは「DOMという巨大な重力」です。一つの要素のスタイルが変更されると、ブラウザのレンダ...

ブラウザの「心臓」をハックせよ：イベントループとレンダリングパイプラインの深淵フロントエンドのパフォーマンスチューニングにおいて、「なんとなく遅い」を「ここがボトルネックだ」と断言できるかどうか。それが、ジュニアとシニアを分かつ境界線です。...

ブラウザという「ブラックボックス」を解体する：DevTools Performanceタブで深淵を覗くフロントエンドエンジニアが「なんとなく重い」という感覚でパフォーマンスを語るのは、もう卒業しよう。ブラウザは魔法をかけているわけではない。...

ブラウザは「魔法の箱」ではない。それは、数百万行のC++で書かれた、極めて冷酷かつ精緻な物理シミュレーターだ。我々フロントエンドエンジニアが書くコードは、ブラウザという巨大なエンジンの中で、数ミリ秒単位のタスクとして断片化され、パイプライン...

メインスレッドを「聖域」として守り抜く：Web Workersによるレンダリングパイプラインの防衛戦フロントエンドの世界で「60fpsの壁」を突破し続けることは、一種の執念です。しかし、どれほどReactやVueでコンポーネントを最適化して...