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ブラウザの仕組み実践ガイド
やあ、よく来てくれました。フロントエンドの世界へようこそ。私はこれまで、数えきれないほどのWebサイトが「なぜか重い」「カクつく」と悲鳴を上げている現場に立ち会ってきました。ブラウザというやつは、表向きは涼しい顔をしてページを表示しています...
Webブラウザの仕組み 【入門編】 ペイントフラッシングの可視化 – Webブラウザの仕組み実践ガイド
やあ、ようこそ。私のラボへ。私は長年、Webブラウザという「巨大な迷宮」を設計し、時に壊し、そして作り直してきたチーフアーキテクトです。今日は、プログラミングを始めたばかりのあなたが、ブラウザという「魔法の箱」の中身をのぞき見するための、と...
Webブラウザの仕組み 【入門編】 強制同期レイアウトの検知と回避 – Webブラウザの仕組み実践ガイド
ようこそ、フロントエンドの奥深い世界へ。私はこれまで、数えきれないほどのWebサイトが「なぜか重い」「カクつく」という現場に立ち会い、ブラウザの内部で悲鳴を上げているコードたちを救い出してきました。今日は、初心者の方が必ずと言っていいほどぶ...
Webブラウザの仕組み 【入門編】 コンポジタースレッドの役割 – Webブラウザの仕組み実践ガイド
こんにちは、現場の最前線で戦うエンジニアの皆さん、そしてこれからWebの世界に飛び込もうとしている未来のアーキテクトの皆さん。「ブラウザの動きがカクつく」「スクロールが重い」……そんな壁にぶつかったことはありませんか？ 実は、私たちが普段何...
Webブラウザの仕組み 【入門編】 メインスレッドの役割と制約 – Webブラウザの仕組み実践ガイド
やあ、ようこそ。ブラウザという広大な宇宙の裏側へ。私は、長年ブラウザのレンダリングエンジンと格闘し、時にはその繊細さに涙し、時にはその合理的な美しさに救われてきた、一人のチーフアーキテクトです。今日は、フロントエンド開発者が必ず一度はぶつか...