Webブラウザの仕組み 【実務・中級編】 ペイント（描画）の仕組み – Webブラウザの仕組み実践ガイド
やあ、調子はどうだい？ 普段、何気なくCSSを書いてブラウザに綺麗な画面を表示させているけれど、「CSSのプロパティを1行書き換えただけで、なぜか画面がカクつく…」なんて経験はないかな？「リフロー（Reflow）を避けて、リペイント（Rep...
Webブラウザの仕組み
Webブラウザの仕組み Webブラウザの仕組み 【実務・中級編】 レイアウト（リフロー）の仕組み – Webブラウザの仕組み実践ガイド
「画面がなんかガクつく」「スクロールやアニメーションが滑らかじゃない」――。フロントエンドの現場で誰もが一度は直面し、そして多くの若手が「なんとなく重いから、なんとなく軽そうなコードに書き換える」という暗中模索に陥る問題。その諸悪の根源の多...
Webブラウザの仕組み 【実務・中級編】 レンダーツリーの構築 – Webブラウザの仕組み実践ガイド
お疲れ様！日々のフロントエンド開発、楽しんでいるかな？VueやReact、Next.jsといったモダンなフレームワークを使っていると、私たちは「状態（State）」を更新するだけで、画面が魔法のように書き換わる恩恵に預かることができる。だけ...
Webブラウザの仕組み 【実務・中級編】 CSSOMツリーの構築プロセス – Webブラウザの仕組み実践ガイド
おい、調子はどうだ？日々、Reactのコンポーネント設計や、Tailwind CSSのユーティリティクラスの嵐と格闘ご苦労様。フロントエンドエンジニアとして中級からもう一段上のレイヤーへ突き抜けたいなら、「ブラウザが画面を光らせるまでの裏側...
Webブラウザの仕組み 【実務・中級編】 DOMツリーの構築プロセス – Webブラウザの仕組み実践ガイド
なぜ、あなたの書いたJavaScriptは時々「カクつく」のか？こんにちは。チームのコードレビューをしていて、`element.style.width = ...` と `element.offsetHeight` をひとつのループの中で交...
Webブラウザの仕組み 【実務・中級編】 クリティカルレンダリングパスの概念 – Webブラウザの仕組み実践ガイド
やあ。今日も今日とて、リポジトリのパフォーマンス改善に頭を悩ませているところかい？「なぜかウチのプロダクト、低スペックなモバイル端末だとスクロールがカクつくんだよな……」「CSSをいじっただけなのに、なんでこんなに重いんだ？」――フロントエ...
Webブラウザの仕組み 【実務・中級編】 レンダリングエンジンとイベントループの統合 – Webブラウザの仕組み実践ガイド
やあ、よく来てくれた。現場でバリバリとコードを書いていると、一度はこんな謎にぶつかったことがあるはずだ。「あれ、このコード、非同期処理のつもりで書いたのに、なんで画面の描画が盛大にカクつくんだ？」「`Promise` と `setTimeo...
Webブラウザの仕組み 【実務・中級編】 メモリ負荷とレンダリングパフォーマンス – Webブラウザの仕組み実践ガイド
おい、ちょっといいか。最近、SPA（シングルページアプリケーション）でやたらとDOMを肥大化させたり、無限スクロールのリストを適当に実装して「なんか最近、ウチのサービス動作がカクつくんだよね〜、GC（ガベージコレクション）が仕事してないのか...
Webブラウザの仕組み 【実務・中級編】 GPUラスタライズのプロセス – Webブラウザの仕組み実践ガイド
おい、調子はどうか？今日も元気に `display: none;` と `visibility: hidden;` の違いで消耗してないか？フロントエンドをやっていると、どうしても「いかに綺麗なコンポーネントを書くか」「いかに状態管理を洗練...
Webブラウザの仕組み 【実務・中級編】 ブラウザの投機的パース（Speculative Parsing） – Webブラウザの仕組み実践ガイド
やあ。今日もレガシーなコードと最新のビルドツールに挟まれて、華麗にブラウザをハックしているかい？今回は、フロントエンドエンジニアなら絶対に知っておくべき、そして日々のパフォーマンスチューニングで強力な武器になる「投機的パース（Specula...