Webブラウザの仕組み 【実務・中級編】 containプロパティによるレンダリングの分離 – Webブラウザの仕組み実践ガイド
やあ。今日も今日とて、メモリを爆食いするブラウザの機嫌を取りながらコードを書いているかい？フロントエンドをやっていると、一度は直面するんだよね。「なんだかこのモーダルを開閉するたびに、画面全体がカクつくぞ」とか、「無限スクロールのリストで、...
ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）
Webブラウザの仕組み Webブラウザの仕組み 【実務・中級編】 メインスレッドのブロッキング防止 – Webブラウザの仕組み実践ガイド
こんにちは。フロントエンドチームのシニアアーキテクトとして、日々コードの海を泳いでいる私だ。君たちが書いたプロダクト、最近ユーザーから「なんかボタンを押してから画面がカクつく」「たまにスクロールが引っかかる」なんてクレームを受けていないかい...
Webブラウザの仕組み 【実務・中級編】 ペイント（Paint）とコンポジット（Composite）のプロセス – Webブラウザの仕組み実践ガイド
やあ、よく来てくれた。フロントエンドの現場で「なぜかウチのWebアプリ、スマホでスクロールするとカクつくんだよね…」なんて頭を抱えていないかい？CSSの書き方をちょっと変えるだけで見違えるようにヌルヌル動くようになることもあれば、逆に不用意...
Webブラウザの仕組み 【実務・中級編】 レイアウト（Reflow）の発生要因と回避策 – Webブラウザの仕組み実践ガイド
お疲れ様です。最近、社内のプロダクトで「なんかこのページ、スクロールがカクつくんだよね」って言われて、DevToolsのPerformanceタブを開いたら真っ赤なFlame Chartに絶望した……なんて経験、ありませんか？フロントエンド...
Webブラウザの仕組み 【実務・中級編】 ブラウザのキャッシュ戦略とレンダリングへの影響 – Webブラウザの仕組み実践ガイド
こんにちは。チームのパフォーマンスチューニングを任せたとき、誰もが最初は「JSのバンドルサイズを削ろう」「画像の遅延読み込みを入れよう」と頑張るよね。もちろんそれも大事なんだけど……ふと立ち止まって考えてみてほしい。「リロードした瞬間、なぜ...
Webブラウザの仕組み 【実務・中級編】 レンダリングブロックリソース（CSS/JS）の最適化 – Webブラウザの仕組み実践ガイド
やあ。今日も今日とて、プロダクトのパフォーマンスチューニングに頭を悩ませているところかい？「Lighthouseのスコアがどうしても上がらない」「なぜかファーストビューの表示がコンマ何秒か遅れる」――そんな壁にぶつかったとき、大抵のエンジニ...
Webブラウザの仕組み 【実務・中級編】 リソース優先度（Priority Hints）の制御 – Webブラウザの仕組み実践ガイド
やあ。最近、プロダクトのCore Web Vitals（特にLCP：Largest Contentful Paint）の数値改善に頭を悩ませていないかい？「画像やフォント、スクリプトを最適化したはずなのに、どうもLCPの数値が頭打ちになる…...
Webブラウザの仕組み 【実務・中級編】 ブラウザのプリロードスキャナ（Preload Scanner）の仕組み – Webブラウザの仕組み実践ガイド
やあ、調子はどうだい？今日もどこかのコードレビューで「なんでこの画像、読み込みが遅いんだよ……」なんて頭を抱えていたところじゃないか？フロントエンドのパフォーマンスチューニングを語るとき、私たちはついつい「JavaScriptのバンドルサイ...
Webブラウザの仕組み 【実務・中級編】 リフロー（再レイアウト）を発生させるプロパティ一覧 – Webブラウザの仕組み実践ガイド
やあ。最近、プロダクトのパフォーマンス改善に頭を悩ませているようだね。よし、今日はフロントエンドエンジニアなら誰もが一度はハマる、そして避けて通れない「リフロー（再レイアウト）」の魔物について話をしよう。「なぜかスクロールがカクつく」「アニ...
Webブラウザの仕組み 【実務・中級編】 レイヤー爆発（Layer Explosion）の回避 – Webブラウザの仕組み実践ガイド
フロントエンドの現場で頭を悩ませるパフォーマンス問題の一つに、「なぜかスクロールがカクつく」「メモリ消費量が跳ね上がり、最悪の場合はタブがクラッシュする」という現象があります。大体の原因をデベロッパーツールで追っていくと、決まって犯人はこい...