ブラウザレンダリング(解析:HTMLパース, DOM/CSSOMツリー構築)

スポンサーリンク
Webブラウザの仕組み

【実務・中級編】 画像デコードとネイティブLazy Loading – Webブラウザの仕組み実践ガイド

やあ。今日も今日とて、プロダクトのパフォーマンスチューニングに頭を悩ませているところかい?「LCP(Largest Contentful Paint)の数値がどうしても改善しない」「スマホでスクロールすると、なぜか画面がカクつく」。こうした...
Webブラウザの仕組み

【実務・中級編】 フォント読み込み戦略(font-display) – Webブラウザの仕組み実践ガイド

こんにちは。フロントエンドチームのシニアアーキテクトとして、日々ブラウザのパフォーマンスチューニングに明け暮れる君に、今日はWebフォントの読み込み戦略、特に`font-display`の深淵について話をしよう。「デザインカンプ通りにフォン...
Webブラウザの仕組み

【実務・中級編】 ペイントホールドとレイアウト安定性(CLS対策) – Webブラウザの仕組み実践ガイド

やあ。今日もレガシーとモダンが入り交じったコードベースの海で、CLS(Cumulative Layout Shift)の亡霊と戦っているところかい?「ページを開いた瞬間にボタンを押そうとしたら、急に画像が読み込まれて下のコンテンツがガクッと...
Webブラウザの仕組み

【実務・中級編】 メインスレッドのブロッキングとタスク分割 – Webブラウザの仕組み実践ガイド

やあ。今日も今日とてコードレビューに追われているかい?「なんだかこの画面、ボタンをクリックしてからモーダルが開くまで妙に引っかかるんだよね……」パフォーマンス計測ツールを開いてみたら、綺麗に赤いロングタスクのバーがそびえ立っている。……実務...
Webブラウザの仕組み

【実務・中級編】 リソースヒントの活用(preload, prefetch, preconnect) – Webブラウザの仕組み実践ガイド

やあ。今日も今日とてコードレビューに追われてお疲れさん。「Lighthouseのパフォーマンススコアが赤いままで、どうにかしてくれってマネージャーに詰められたんだよ……」なんて顔して席に戻ってきた後輩が、まさに君かい?まあ落ち着きなよ。We...
Webブラウザの仕組み

【実務・中級編】 Webフォントの読み込みとレンダリング挙動 – Webブラウザの仕組み実践ガイド

こんにちは。最近、社内の若手から「デザインカンプ通りに実装したはずなのに、ページを開いた瞬間にテキストがガタッと一瞬消えたり(あるいは変なフォントでチラついたり)、CLS(Cumulative Layout Shift)のスコアが怒られたり...
Webブラウザの仕組み

【実務・中級編】 画像デコードとレンダリング – Webブラウザの仕組み実践ガイド

おい、最近「なぜかスマホでスクロールするとカクつく」「Largest Contentful Paint (LCP) のスコアがどうしても改善しない」って悩んでないか?フロントエンドエンジニアとしてレイアウトやCSSの最適化をやり尽くした後に...
Webブラウザの仕組み

【実務・中級編】 content-visibilityプロパティによるレンダリング抑制 – Webブラウザの仕組み実践ガイド

フロントエンドのパフォーマンスチューニングにおいて、長年私たちは「DOMノードの数」と戦い続けてきました。「無限スクロールを実装したら、スクロールするたびにDOMが肥大化して、スマホのブラウザが盛大にフリーズした」「リッチなLP(ランディン...
Webブラウザの仕組み

【実務・中級編】 display:noneとvisibility:hiddenのレンダリング上の違い – Webブラウザの仕組み実践ガイド

やあ。今日も今日とてCSSとDOMの機嫌を取りながら、ブラウザの機密を暴く時間だな。フロントエンドをある程度やってくると、「要素を隠す」という要件に対して `display: none` を使うべきか、それとも `visibility: h...
Webブラウザの仕組み

【実務・中級編】 CSSOMツリーの構築とスタイル解決 – Webブラウザの仕組み実践ガイド

こんにちは。プロダクトのパフォーマンス改善や、「なぜかスタイルが意図通りに当たらない…」というデバッグ地獄に夜な夜なハマっていませんか?フロントエンド開発を長くやっていると、HTMLとCSSを書けばブラウザが勝手に画面を綺麗に描画してくれる...
スポンサーリンク