Webブラウザの仕組み

フロントエンドの最前線で戦う君たちへ。「CSSなんてただのスタイル定義だろう？」なんて思っていたら大間違いだ。ブラウザのレンダリングエンジンにとって、CSSセレクタの解釈は、数千、数万のノードがひしめくDOMの荒野を駆け抜ける、極めてシビア...

Shadow DOMの「分離」を極める——ブラウザのレンダリングパイプラインをハックする技術やあ。現場でCSSのクラス名汚染に頭を抱えたり、意図しないスタイル漏洩に夜も眠れない日々を過ごしてはいないか？「Web Componentsはオワコ...

ブラウザの「インクリメンタルパース」を知れば、パフォーマンスチューニングはもっと面白くなる現場で「なぜかLCP（Largest Contentful Paint）が悪いんだよね」なんて頭を抱えることはないだろうか？ 多くのエンジニアは「画像...

「なぜあのサイトは崩れるのか？」――ブラウザのパースモードが隠し持つ狂気と正気現場でフロントエンドをしていると、たまに遭遇するじゃないですか。「モダンなCSSを書いているのに、なぜかボックスモデルの計算がズレる」「なぜか特定のブラウザだけ画...

やあ。今日は少し「ブラウザの深淵」の話をしようか。君たちが普段書いているJavaScriptやCSSが、ブラウザという名の巨大なエンジンの中でどう扱われているか。これを知っているかどうかで、パフォーマンスチューニングの「打率」は劇的に変わる...

ブラウザの「レイヤー」を制する者は、60fpsを制する：コンポジットの深淵へようこそやあ。現場でバリバリコードを書いている君なら、一度は「ブラウザの描画が重い」という壁にぶつかったことがあるはずだ。アニメーションがカクつく、スクロールが引っ...

ブラウザの「ペイント」を制するものは、Webの描画性能を制するやあ。現場でCSSをいじっていて、「なぜか表示が一瞬カクつく」「特定の要素を動かすと全体が重くなる」なんて経験はないかな？多くのエンジニアはDOMやCSSOMの構築までを意識する...

レイアウト（リフロー）は「ブラウザの重労働」――なぜ我々はそれを避けなければならないのかやあ。今日もフロントエンドの戦場に立っている諸君、お疲れ様。画面の中のピクセルを自在に操る我々だが、裏側でブラウザがどれほど必死に計算をしているか、意識...

ブラウザの「首を絞めるな」：クリティカルレンダリングパスを極める技術やあ。現場でコードを書いていて、「なぜかFCP（First Contentful Paint）が遅い」「Lighthouseのスコアが改善しない」と頭を抱えたことはないかな...

プリロードスキャナー：ブラウザが裏側で「先読み」する泥臭い努力の正体やあ。フロントエンドの現場で日々パフォーマンスチューニングに頭を悩ませている諸君、お疲れ様。今日は、Webブラウザという「魔法の箱」が、裏側でどれほど必死に君たちのコードを...