Webブラウザの仕組み 【テクニカル・上級編】 HTMLパースの仕組みとトークン化 – Webブラウザの仕組み実践ガイド
ブラウザの深淵：HTMLパーサーという名の「終わらない生存戦略」フロントエンドエンジニアの多くは、DOMを「JavaScriptから操作するデータ構造」だと捉えています。しかし、ブラウザのエンジン（BlinkやWebKit）にとって、HTM...
ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）
Webブラウザの仕組み Webブラウザの仕組み 【テクニカル・上級編】 ブラウザレンダリングパイプラインの全体像 – Webブラウザの仕組み実践ガイド
ブラウザという「魔法の黒箱」を解体する：レンダリングパイプラインの深淵へWebフロントエンドの世界に足を踏み入れて数年、多くのエンジニアは「ReactやVueが何をしてくれるか」に終始しがちだ。だが、我々のような職人が真に目を向けるべきは、...
Webブラウザの仕組み 【実務・中級編】 レンダリングエンジンとイベントループの統合 – Webブラウザの仕組み実践ガイド
やあ、よく来てくれた。現場でバリバリとコードを書いていると、一度はこんな謎にぶつかったことがあるはずだ。「あれ、このコード、非同期処理のつもりで書いたのに、なんで画面の描画が盛大にカクつくんだ？」「`Promise` と `setTimeo...
Webブラウザの仕組み 【実務・中級編】 メモリ負荷とレンダリングパフォーマンス – Webブラウザの仕組み実践ガイド
おい、ちょっといいか。最近、SPA（シングルページアプリケーション）でやたらとDOMを肥大化させたり、無限スクロールのリストを適当に実装して「なんか最近、ウチのサービス動作がカクつくんだよね〜、GC（ガベージコレクション）が仕事してないのか...
Webブラウザの仕組み 【実務・中級編】 GPUラスタライズのプロセス – Webブラウザの仕組み実践ガイド
おい、調子はどうか？今日も元気に `display: none;` と `visibility: hidden;` の違いで消耗してないか？フロントエンドをやっていると、どうしても「いかに綺麗なコンポーネントを書くか」「いかに状態管理を洗練...
Webブラウザの仕組み 【実務・中級編】 ブラウザの投機的パース（Speculative Parsing） – Webブラウザの仕組み実践ガイド
やあ。今日もレガシーなコードと最新のビルドツールに挟まれて、華麗にブラウザをハックしているかい？今回は、フロントエンドエンジニアなら絶対に知っておくべき、そして日々のパフォーマンスチューニングで強力な武器になる「投機的パース（Specula...
Webブラウザの仕組み 【実務・中級編】 CSS Containment仕様（containプロパティ） – Webブラウザの仕組み実践ガイド
やあ。今日も今日とてパフォーマンスチューニングの沼にハマっているかい？フロントエンドの現場にいると、「なんか最近、モーダルを開くたびに微小なカクつきがあるんだよな……」「無限スクロールの下の方でスクロールが重い……」なんて相談を、デザイナー...
Webブラウザの仕組み 【実務・中級編】 requestAnimationFrameとレンダリングサイクルの同期 – Webブラウザの仕組み実践ガイド
こんにちは。チームのコードレビューをしていて、未だに「アニメーションやっちゃう？ じゃあ取り敢えず `setInterval` か `setTimeout` で16ミリ秒ごとにゴリゴリ動かそうか」なんてコードを見かけると、思わずコーヒーカッ...
Webブラウザの仕組み 【実務・中級編】 Display Locking APIの概念 – Webブラウザの仕組み実践ガイド
おい、最近のWebアプリ、DOMが数万個に膨れ上がってメインスレッドがカクカクになる現象に悩まされてないか？ 「リッチなUIにしたい」「無限スクロールを実装したい」のは分かるが、ブラウザの身になってくれよ。画面の端っこで見えてすらいない孫要...
Webブラウザの仕組み 【実務・中級編】 コンポジタースレッドの役割と責務 – Webブラウザの仕組み実践ガイド
おい、調子はどうだい？今日も元気に `position: fixed;` のレイアウト崩れや、重いモーダルのカクつきと格闘していることだろう。フロントエンドのパフォーマンスチューニングを語るとき、私たちはついつい「JavaScriptをいか...