Webブラウザの仕組み 【実務・中級編】 requestAnimationFrameとレンダリング同期 – Webブラウザの仕組み実践ガイド
やあ、お疲れ様。今日も元気にDOMと格闘してるかい？後輩くんから「なんかアニメーションがカクつくんです……CSSで頑張ってるんですけど」っていう相談をよく受けるんだよね。で、コードを見せてもらうと、大体犯人は `setInterval` や...
ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）
Webブラウザの仕組み Webブラウザの仕組み 【実務・中級編】 ペイントフラッシングとレンダリングデバッグ – Webブラウザの仕組み実践ガイド
やあ。最近、プロダクトのパフォーマンス改善に頭を悩ませているみたいだな。「DOM要素を少し動かしただけなのに、なぜかアプリ全体がカクつく」「スマホの実機でスクロールすると一瞬フリーズする」。この手のパフォーマンスの闇に直面したとき、君はどこ...
Webブラウザの仕組み 【実務・中級編】 CSS Houdiniがレンダリングパイプラインに与える影響 – Webブラウザの仕組み実践ガイド
こんにちは。チームのコードレビューをしていて、最近やけに「CSSの表現力の限界に悩む声」を聞くことが多い。「どうしてもこの複雑なグラデーションや、エッジの効いた有機的な背景をCSSだけで実現したいんだけど、結局重いSVGやCanvasをDO...
Webブラウザの仕組み 【実務・中級編】 Shadow DOMがレンダリングに与える影響 – Webブラウザの仕組み実践ガイド
こんにちは。フロントエンドの現場で日々ブラウザの機嫌とパフォーマンスに頭を悩ませている君なら、「カプセル化」という甘い響きに釣られてShadow DOMを導入したはいいものの、裏側でブラウザがどういう挙動をしているか気になったことが一度はあ...
Webブラウザの仕組み 【実務・中級編】 JavaScriptの実行タイミング制御（defer, async, type=module） – Webブラウザの仕組み実践ガイド
やあ、お疲れ様。最近、チームのコードレビューをしていて「とりあえず `async` つけとけば速くなるっしょ」的なノリで `script` タグを書いてるコードを見かけてね、少しブラウザの裏側の動きを整理しておいた方がいいなと思ったんだ。フ...
Webブラウザの仕組み 【実務・中級編】 ドキュメント読み込み状態とイベント – Webブラウザの仕組み実践ガイド
フロントエンドの開発現場で、若手エンジニアから「なんかこのコード、たまに要素が取得できなくてエラーになるんです」「画面の初期化処理をどこで書くのが正解なんですか？」という質問を受けることはないだろうか。JavaScriptの実行タイミングと...
Webブラウザの仕組み 【実務・中級編】 ロングタスク（Long Tasks）とレンダリングの競合 – Webブラウザの仕組み実践ガイド
こんにちは。フロントエンドの現場で日々パフォーマンスチューニングに頭を悩ませている皆さん、お疲れ様です。今日も「なぜか俺の書いたコード、ハイスペックなMacBookでもたまにカクつくんだが……」なんて不可解な現象に直面していませんか？ ロー...
Webブラウザの仕組み 【実務・中級編】 INP（Interaction to Next Paint）の仕組み – Webブラウザの仕組み実践ガイド
やあ、お疲れ様。最近、社内のモニタリングツールやGoogle Search Consoleで「INP（Interaction to Next Paint）」の数値が悪化して頭を抱えていないかい？「Core Web Vitalsの新しい主役」...
Webブラウザの仕組み 【実務・中級編】 ネイティブLazy Loadingとレンダリング – Webブラウザの仕組み実践ガイド
やあ。今日も今日とて、プロダクトのCore Web Vitalsのスコアボードとにらめっこってところか。LCP（Largest Contentful Paint）やCLSの数値改善に頭を悩ませているなら、君はもう一段上のフロントエンドの景色...
Webブラウザの仕組み 【実務・中級編】 レイアウトシフト（CLS）の発生メカニズム – Webブラウザの仕組み実践ガイド
やあ。今日も今日とて、ユーザーが快適に使えるピカピカのUIを追求していることだろう。さて、君は最近、スマホでニュースサイトやECサイトを見ていて、「まさにリンクを押そうとした瞬間、広告が割り込んできやがって、全然関係ないボタンを押しちまった...