Webブラウザの仕組み

メインスレッドの死守：なぜ重いJSはレンダリングを殺すのか、そしてどうオフロードすべきかフロントエンドのパフォーマンスチューニングを語るとき、私たちは決まって「フレームレート」や「LCP（Largest Contentful Paint）」...

ピクセルが画面に届くまで：PaintとCompositeの深層と、レイヤー合成の最適化戦略こんにちは、フロントエンドのアーキテクチャの泥臭い裏側を愛してやまないエンジニアの皆さん。日夜、UIコンポーネントの設計や状態管理の最適化に奔走してい...

レイアウト（Reflow）という名の巨獣：ブラウザの内部構造から紐解くパフォーマンス・アーキテクチャこんにちは。日々、ピクセルパーフェクトとフレームレートの維持に魂を削っているフロントエンドの住人たちよ。ブラウザのレンダリングエンジン（Bl...

キャッシュ戦略とレンダリングの深層：ミリ秒を削り出すブラウザエンジニアリングウェブパフォーマンスの最適化を語る時、私たちは往々にして「いかにJavaScriptの実行時間を削るか」「いかにバンドルサイズを小さくするか」というアプリケーション...

レンダリングブロックの深層：なぜあいつらは画面描画を止めるのかこんにちは。日々、ブラウザのメインスレッドと冷徹に向き合っているフロントエンド・アーキテクチャの住人です。Webアプリケーションのパフォーマンスチューニングを語る時、誰もが口を揃...

リソース優先度のチューニングは、現代フロントエンドの「最後のフロンティア」であるブラウザのレンダリングエンジン（BlinkやWebkitなど）のソースコードを覗いたことがある者なら誰しも、ネットワーク層とパーサーの間で行われている、あの血の...

プリロードスキャナの内部アーキテクチャ：なぜあなたのWebサイトは「見えないボトルネック」で失速するのかこんにちは。ブラウザの内部構造やレンダリングエンジンの挙動を追いかけるのが生きがいのようなエンジニアなら、一度は「なぜHTMLのパースは...

レイアウトスラッシングの悪夢：なぜそのJSはブラウザを殺すのかこんにちは。日々、プロファイル結果の火焰のような炎（Flame Chart）と睨めっこし、1ミリ秒のレンダリング遅延を削り出しているフロントエンドアーキテクトだ。Webアプリケー...

レイヤー爆発（Layer Explosion）の深層：GPUの恩恵を毒に変える悪夢と、その鎮静化アーキテクチャこんにちは。日々、ブラウザという名の巨大で気まぐれな仮想マシンと格闘しているフロントエンド・アーキテクチャ愛好家の皆さん。リッチな...

ブラウザの裏側を覗く：`decoding`属性でメインスレッドの息継ぎを取り戻す方法こんにちは、アーキテクトの皆さん。日々、Webアプリケーションのパフォーマンスチューニングに明け暮れていることと思います。Lighthouseのスコアを睨み...