Webブラウザの仕組み

ペイントフラッシングと戦う夜：ブラウザの描画パイプラインをねじ伏せる技術フロントエンドのパフォーマンスチューニングにおいて、私たちは長らく「JavaScriptの実行時間を削ること」ばかりに囚われてきた。`requestAnimationF...

こんにちは。日々、ブラウザの描画スレッドとメインスレッドの細かな挙動に目を光らせているフロントエンド・アーキテクトの皆さん。私たちはこれまで、ブラウザが提供する硬直したレンダリングパイプラインの枠内でいかにパフォーマンスを絞り出すかに腐心し...

Shadow DOMとレンダリングの深層：カプセル化がブラウザエンジンに強いる「覚悟」こんにちは。ブラウザのC++ソースコードを眺めながらコーヒーを飲むのが日課のフロントエンド・アーキテクチャおたくです。モダンWeb開発において、Web C...

JavaScriptの実行タイミング制御：DOM、CSSOM、そしてメインスレッドの攻防戦フロントエンドのパフォーマンスチューニングにおいて、最も根が深く、かつ多くのエンジニアが感覚的なハックで済ませてしまいがちな領域がある。それが「Jav...

ライフサイクルの支配者たち：`DOMContentLoaded` と `load` が奏でるレンダリングの裏舞台こんにちは。日々、ブラウザのメインスレッドとメモリの最適化に頭を悩ませているフロントエンド・ギークの皆さん。ウェブページのパフォ...

ロングタスクの呪縛：メインスレッドを解放し、極限のレンダリングパフォーマンスを手に入れる方法こんにちは。日夜ブラウザのメインスレッドと格闘しているフロントエンド・アーキテクチャの住人の皆さん。「なぜリッチなUIを作ると、こんなにもカクつくの...

INP（Interaction to Next Paint）の深層：メインスレッドの支配者から降りるためのアーキテクチャ設計ブラウザのレンダリングパイプラインを愛してやまないエンジニア諸君。Core Web Vitalsの新たな主役、そして...

こんにちは、フロントエンドの深淵を覗くのが趣味のエンジニアの皆さん。ブラウザのレンダリングパイプラインを日々チューニングしていると、HTMLのパーサーがトークナイザーを通じて文字列をバリバリとバイト列からDOMノードへ変換していくあの瞬間が...

レイアウトシフト（CLS）の深層：ブラウザエンジンが嫌う「後出しジャンケン」のメカニズムと極限最適化こんにちは。日々、ピクセル単位のレンダリングパイプラインと格闘しているフロントエンド・アーキテクトの皆さん。ブラウザのレンダリングエンジン（...

containプロパティによるレンダリングの分離：ブラウザの再計算ループを断ち切るアーキテクチャこんにちは。日々、プロファイラーの炎と戦い、フレームレートのグラフが描くわずかなカクつきに精神をすり減らしているフロントエンドの皆さん。ブラウザ...