Webブラウザの仕組み 【実務・中級編】 画像デコードの非同期化（decoding属性） – Webブラウザの仕組み実践ガイド
やあ。今日も今日とて、プロダクトのパフォーマンスチューニングに頭を悩ませているところかい？「Lighthouseのスコアがあと少し伸びない」「なんだかスマホでスクロールした時にカクつく（フレームドロップする）瞬間がある」……フロントエンドの...
ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）
Webブラウザの仕組み Webブラウザの仕組み 【実務・中級編】 レンダリングパイプラインの各ステージ詳細 – Webブラウザの仕組み実践ガイド
こんにちは。フロントエンドの現場で日々、パフォーマンスチューニングや不可解な描画バグと格闘している君なら、一度は「なぜこのCSSを書いただけでブラウザが重くなるんだ？」と頭を抱えたことがあるはずだ。「CSSを書いたら画面が変わる」——それは...
Webブラウザの仕組み 【実務・中級編】 requestIdleCallbackによる低優先度タスクの実行 – Webブラウザの仕組み実践ガイド
フロントエンドの現場で、「なぜかUIがカクつく」「スクロールが重い」という相談を受けたとき、真っ先に疑うべきはメインスレッドの「過密スケジュール」です。ブラウザのレンダリングエンジンは、16.6ms（60fps）という過酷な締め切りの中で、...
Webブラウザの仕組み 【実務・中級編】 Intersection Observerによる遅延レンダリング – Webブラウザの仕組み実践ガイド
やあ。今日も今日とて、重い初期レンダリングのパフォーマンスチューニングに頭を悩ませているかい？「プロダクトの機能が増えるにつれて、初回ロード時のDOMツリーが数千ノードに膨れ上がり、メインスレッドが悲鳴を上げている……」「モーダルや無限スク...
Webブラウザの仕組み 【実務・中級編】 containプロパティによるレイアウトの分離（Containment） – Webブラウザの仕組み実践ガイド
【フロントエンドの処方箋】`contain`プロパティを制する者はブラウザのレンダリングを制すおい、調子はどうだい？最近、社内のレビューをしていて「なんかこのコンポーネント、インタラクションのたびにモッサリするな……」という画面によく遭遇す...
Webブラウザの仕組み 【実務・中級編】 ペイントフラッシングの可視化とデバッグ – Webブラウザの仕組み実践ガイド
フロントエンドのパフォーマンスチューニングで一番厄介なのは、「なぜか画面がカクつく」というフワッとした現象に直面したときだ。JavaScriptの実行時間は問題ない、メモリリークもしてない。なのに、スクロールするたびに微妙に引っかかる。大抵...
Webブラウザの仕組み 【実務・中級編】 GPUアクセラレーションと合成レイヤーの生成条件 – Webブラウザの仕組み実践ガイド
フロントエンドエンジニアとしてある程度経験を積んでくると、一度はぶち当たる壁がある。「アニメーションをガシガシ動かしていると、なぜかスマホ端末でスクロールがカクつく」「CPU使用率が跳ね上がってファンが回り出す」。この手のパフォーマンス問題...
Webブラウザの仕組み 【実務・中級編】 コンポジタースレッドの役割とタスク – Webブラウザの仕組み実践ガイド
おい、最近フロントエンドのパフォーマンスチューニングでこんな罠にハマってないか？「CSSの `transform` と `opacity` だけ使ってるからサクサク動くはずなのに、なぜか低スペック端末や画面いっぱいのリッチなUIでスクロール...
Webブラウザの仕組み 【実務・中級編】 FastDOMを用いたDOM操作のバッチ処理 – Webブラウザの仕組み実践ガイド
おい、調子はどうか。今日も元気にDOMをこねくり回しているかい？突然だが、フロントエンドの現場でこんなコードを見たことはないか？// やってしまいがちな「最悪のアンチパターン」const width = box.offsetWidth; /...
Webブラウザの仕組み 【実務・中級編】 OffscreenCanvasによるメインスレッド負荷軽減 – Webブラウザの仕組み実践ガイド
やあ、お疲れ様。最近、プロダクトのパフォーマンス改善に頭を悩ませているみたいじゃないか。「ユーザーインタラクションのレスポンスが悪い」「アニメーションがカクつく」「Core Web VitalsのINP（Interaction to Nex...