Webブラウザの仕組み 【入門編】 ペイント（描画）の仕組み – Webブラウザの仕組み実践ガイド
こんにちは！日々Webサイトの制作や開発に励んでいるみなさん、本当にお疲れ様です。「CSSをちょっと書き換えただけなのに、なぜか動きがカクつく…」「ブラウザの裏側って、一体どうやってあのカラフルな画面を作っているんだろう？」そんな疑問を持っ...
Webブラウザの仕組み
Webブラウザの仕組み Webブラウザの仕組み 【入門編】 レイアウト（リフロー）の仕組み – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできた者です。Webサイトを作っていて、「なんだか最近、スマホでスクロールするとカクつくんだよなぁ……」「JavaScriptでアニメーションを動かしたら、妙に動作が重いな……」なんて悩んだ経験はあ...
Webブラウザの仕組み 【入門編】 レンダーツリーの構築 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。Webサイトを作っていて、「なんだか最近、スマホでスクロールするとカクカクするな…」「CSSを変えただけなのに、なんで画面全体が重くなるんだろう？」なんて悩んだ経験...
Webブラウザの仕組み 【入門編】 CSSOMツリーの構築プロセス – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Webブラウザって、普段私たちが何気なく開いている画面の裏側で、実はものすごい量の仕事を猛スピードでこなしている職人の集団みたいなやつなんですよね。中でも「CSS（...
Webブラウザの仕組み 【入門編】 DOMツリーの構築プロセス – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクトの私です。日々、私たちが何気なくブラウザにURLを打ち込んだり、お気に入りのWebサイトを開いたりするとき、画面が一瞬で華やかに表示されますよね。でも、その裏側でブラウザくんがどれほど必死に汗をかいて...
Webブラウザの仕組み 【入門編】 クリティカルレンダリングパスの概念 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクチャの世界へようこそ。Webサイトを作っていると、「なんだかこのページ、表示されるまでに妙にもたつくな…」とか、「スマホでスクロールするとカクカクするな…」と感じた経験はありませんか？私たちが普段何気な...
Webブラウザの仕組み 【入門編】 レンダリングエンジンとイベントループの統合 – Webブラウザの仕組み実践ガイド
こんにちは！Web開発の世界へようこそ。フロントエンドのアーキテクトをしている者です。日頃、HTMLやCSS、そしてJavaScriptを書いていると、「あれ？なんでこのコードを書いたらいきなり画面が固まったんだろう？」「`setTimeo...
Webブラウザの仕組み 【入門編】 メモリ負荷とレンダリングパフォーマンス – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクトの私です。日々、モダンでリッチなWebサイトやアプリケーションを作っていると、「なんだか最近、スマホでこのページを見ると動きがカクカクするな……」「タブをたくさん開きすぎたら、突然ページが真っ白になっ...
Webブラウザの仕組み 【入門編】 GPUラスタライズのプロセス – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクトの私です。Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな……」「アニメーションがちょっと重い気がする」と感じたことはありませんか？コードは綺麗に書いたはずなのに、なぜか滑ら...
Webブラウザの仕組み 【入門編】 ブラウザの投機的パース（Speculative Parsing） – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクトの私です。日々、私たちが何気なくブラウザにURLを打ち込んだり、お気に入りのサイトを開いたりするとき、画面の裏側ではブラウザがものすごい猛ダッシュで仕事をしています。「HTMLを上から順に読んで、画面...