Webブラウザの仕組み 【入門編】 DOMツリー構築アルゴリズム – Webブラウザの仕組み実践ガイド
こんにちは！Webブラウザの仕組みの旅へようこそ。フロントエンドの現場で日々コードを書いていると、「画面がどうやって表示されているのか」なんて普段は忘れがちですよね。でも、ブラウザの裏側で何が起きているのかを知ることは、料理人が包丁の構造や...
Webブラウザの仕組み
Webブラウザの仕組み Webブラウザの仕組み 【入門編】 HTMLパースにおけるトークン化プロセス – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの世界へようこそ。チーフアーキテクトの私です。日頃何気なく書いているHTML。「``タグを閉め忘れたな」「ここに文字を入れたらちゃんと画面に出るな」なんて、当たり前のようにブラウザは表示してくれますよね。でも、ちょ...
Webブラウザの仕組み 【入門編】 Shadow DOMのレンダリングカプセル化 – Webブラウザの仕組み実践ガイド
こんにちは！Webブラウザの裏側の世界へようこそ。フロントエンドの現場でコードを書いていると、画面がどうやって画面に描き出されているのか、その魔法のような仕組みが気になりませんか？今回は、Webブラウザのレンダリングにおける「隠し味」であり...
Webブラウザの仕組み 【入門編】 content-visibilityによるレンダリング最適化 – Webブラウザの仕組み実践ガイド
こんにちは！Webの裏側を覗くのが大好きな、フロントエンド・アーキテクトの私です。日頃からモダンでリッチなWebサイトを作っていると、どうしても避けられない壁にぶつかりますよね。「ページが縦に長すぎて、スマホでのスクロールがカクカクする」「...
Webブラウザの仕組み 【入門編】 requestAnimationFrameとレンダリングループ – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Web制作やJavaScriptの勉強を少し進めると、「画面を滑らかに動かしたいなら `requestAnimationFrame` を使おうね」という話に必ず出会...
Webブラウザの仕組み 【入門編】 フォント読み込みとレンダリングへの影響 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた者です。Webサイトを作っていて、「おしゃれなフォントを読み込ませたら、なんだか表示されるまでの間テキストが消えてしまって焦った」「ページを開いた瞬間に文字がカクッと別の形に変...
Webブラウザの仕組み 【入門編】 リソースヒント（dns-prefetch, preconnect, prefetch） – Webブラウザの仕組み実践ガイド
こんにちは！Webブラウザの仕組みの裏側を覗く旅へようこそ。私たちが普段何気なく使っているWebブラウザ。アドレスバーにURLを打ち込んで「Enter」を押した瞬間、画面が表示されるまでに、実はブラウザのなかで目にも止まらぬ大いなるドラマが...
Webブラウザの仕組み 【入門編】 プリロードスキャナーの仕組み – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできた私ですが、Webブラウザって本当に面白い生き物（ソフトウェア）なんですよね。普段私たちが何気なく見ているWebサイトですが、画面が表示されるまでの裏側では、ブラウザがものすごい猛ダッシュで準備...
Webブラウザの仕組み 【入門編】 GPUアクセラレーションとコンポジット – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたシニア・アーキテクトの私です。Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな……」「アニメーションがちょっと重いな……」と頭を悩ませた経験はありませんか？ デベロッ...
Webブラウザの仕組み 【入門編】 ペイントとコンポジットレイヤーの仕組み – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Webサイトを作っていて、「なんだかこのアニメーション、カクカクするな……」「スマホでスクロールすると、妙に引っかかる感じがする……」なんて悩んだ経験はありませんか...