Webブラウザの仕組み

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

こんにちは。フロントエンドの奥の院へようこそ。日々、私たちはReactやVue、あるいはSvelteといったモダンなフレームワークの心地よい抽象化レイヤーのうえでコードを書き、美しくリッチなWebアプリケーションを組み上げています。しかし、...

こんにちは、チーフアーキテクトの私だ。日夜、膨大なJavaScriptの実行とDOMの海に頭を悩ませている君なら、一度はユーザーからの「なんだかこの画面、クリックしてから反応するまでに引っかかりがあるんだよね」という、胃に穴が開きそうなフィ...

はじめに：DOMの肥大化とメインスレッドの限界に抗うフロントエンドエンジニアなら誰もが一度は直面する悪夢がある。数千件のレコードを持つECサイトの商品一覧、あるいは際限なく続くタイムライン。初期表示で一気に数千のDOMノードを構築し、スタイ...

ブラウザの息の根を止めるな：`contain`プロパティが切り札となる、レンダリング・パイプラインの極限最適化Webフロントエンドの開発現場で、プロファイラを開いた瞬間に絶望した経験はないだろうか。わずか数ピクセルのアイコンの色を変えただけ...

ペイントフラッシングの深淵：ブラウザの再描画コストを暴き、支配する方法こんにちは。日夜ブラウザのレンダリングパイプラインとメモリの隅っこを睨みつけているフロントエンド・アーキテクトの私だ。モダンなWebアプリケーションのパフォーマンスチュー...

やあ、フロントエンドの深淵を覗く同志よ。今日も今日とて、ユーザーが体感する「なめらかな60fps（あるいは120fps）」の裏側で、ブラウザという名のモンスターがどれだけの苦悩を背負っているか、考えたことはあるかい？モダンなWebアプリケー...

コンポジタースレッドの深層：メインスレッドの呪縛を断ち切り、60/120fpsを死守するアーキテクチャこんにちは。日々、ブラウザのレンダリングパイプラインの最適化とメモリプロファイリングに情熱を燃やしているフロントエンド・アーキテクトです。...

こんにちは、フロントエンドの深淵を覗く旅へようこそ。日々、数百万行のJavaScriptと向き合い、フレームワークの背後でうなりを上げるBlinkやWebKitのレンダリングパイプラインに思いを馳せるあなたなら、一度は「なぜUIのちょっとし...

メインスレッドを解放せよ：OffscreenCanvasがもたらすWebレンダリングのパラダイムシフトこんにちは、フロントエンドアーキテクトの皆さん。日々、複雑化するWebアプリケーションのパフォーマンスチューニングに頭を悩ませていることだ...