Webブラウザの仕組み 【実務・中級編】 Shadow DOMのレンダリングカプセル化 – Webブラウザの仕組み実践ガイド
やあ、お疲れ様。最近、コンポーネント設計の話題になると必ず名前が挙がる「Shadow DOM」だけど、君はちゃんとその中身を理解して使いこなせているかい？「いや、なんとなくWeb ComponentsのスコープドCSSを作るためのものでしょ...
ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）
Webブラウザの仕組み Webブラウザの仕組み 【実務・中級編】 content-visibilityによるレンダリング最適化 – Webブラウザの仕組み実践ガイド
画面外の重いDOMをブラウザに無視させろ！`content-visibility`でレンダリングの限界を突破する実務テクニックこんにちは。プロダクトのパフォーマンス改善に日々頭を悩ませているフロントエンドエンジニアの皆さん、お疲れ様です。無...
Webブラウザの仕組み 【実務・中級編】 requestAnimationFrameとレンダリングループ – Webブラウザの仕組み実践ガイド
お疲れ。最近、フロントエンドのコードレビューをしていて「うわ、またやってるな」って思う瞬間があるんだよね。何だと思う？そう、アニメーションやスクロール位置の監視のために、平然と `setInterval` や `setTimeout` を使...
Webブラウザの仕組み 【実務・中級編】 フォント読み込みとレンダリングへの影響 – Webブラウザの仕組み実践ガイド
こんにちは。フロントエンドの現場で日々、パフォーマンスチューニングやレンダリングの最適化と格闘している君なら、「Webフォントを読み込んだ瞬間に画面のテキストがガタッとズレる（レイアウトシフト）」あの不気味な現象に一度は頭を抱えたことがある...
Webブラウザの仕組み 【実務・中級編】 リソースヒント（dns-prefetch, preconnect, prefetch） – Webブラウザの仕組み実践ガイド
フロントエンド開発の現場で、こんな壁にぶつかったことはないか？「Lighthouseのパフォーマンススコアを上げろって言われたから、とりあえず適当に `preconnect` や `prefetch` をヘッダーにベタベタ貼り付けた。でも、...
Webブラウザの仕組み 【実務・中級編】 プリロードスキャナーの仕組み – Webブラウザの仕組み実践ガイド
フロントエンドのパフォーマンスチューニングを語るとき、私たちはついつい「JavaScriptのバンドルサイズを削ろう」「CSSは非同期で読み込もう」といった、エディタを開いて目に見えるコードの話に終始しがちだ。だが、ちょっと待ってほしい。ブ...
Webブラウザの仕組み 【実務・中級編】 GPUアクセラレーションとコンポジット – Webブラウザの仕組み実践ガイド
こんにちは。プロダクトのパフォーマンス改善で日々ブラウザの挙動と格闘している君なら、「なぜかこのアニメーションだけカクつくんだよな…」とDevToolsのパフォーマンスパネルを睨みつけた経験が一度はあるはずだ。DOMをいじり、レイアウトを計...
Webブラウザの仕組み 【実務・中級編】 ペイントとコンポジットレイヤーの仕組み – Webブラウザの仕組み実践ガイド
やあ。今日もどこかのコードレビューで「アニメーションがカクつくから何とかしてくれ」って泣きついてこられたところかい？よくある話だよね。スタイルの崩れやメモリリークも厄介だけど、一番ユーザーにストレスを与えるのは、やっぱり画面の「ガタつき（J...
Webブラウザの仕組み 【実務・中級編】 レイアウト（リフロー）の発生条件と最適化 – Webブラウザの仕組み実践ガイド
お疲れ様です。今日のコードレビューで、また「やっちゃいけない場所でのレイアウト強制（強制同期レイアウト）」の臭うコードを見かけたので、少し時間をもらってこの話をしようと思います。フロントエンドをやっていると、「アニメーションがカクつく」「ス...
Webブラウザの仕組み 【実務・中級編】 レンダーツリー構築プロセス – Webブラウザの仕組み実践ガイド
やあ、お疲れ様。最近、チームのコードレビューをしていて「うーん、惜しいな」と思うことがよくあるんだよね。みんな「JavaScriptの実行をいかに速くするか」「バンドルサイズをどう削るか」にはすごく敏感なんだけど、その一歩先、ブラウザが受け...