Webブラウザの仕組み 【入門編】 display:noneとvisibility:hiddenのレンダリング上の違い – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Web制作やフロントエンドの勉強をしていると、必ずと言っていいほど出会うのが「要素を画面から消す方法」ですよね。CSSの `display: none;` と `v...
ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）
Webブラウザの仕組み Webブラウザの仕組み 【入門編】 CSSOMツリーの構築とスタイル解決 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできた者です。Webサイトを作っていて、「あれ？なんでこのCSS、効かないんだろう……？」と頭を抱えた経験、ありませんか？ 狙ったデザインにならないとき、私たちはついつい「CSSの書き方が悪いのかな...
Webブラウザの仕組み 【入門編】 スクリプト実行によるパーサーブロッキング – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で渡り歩いてきたチーフアーキテクトの私です。Webサイトを作っていて、「あれ、なんか画面が表示されるのが遅いな……」「JavaScriptを読み込ませたら、HTMLの読み込み...
Webブラウザの仕組み 【入門編】 HTMLパーサーのトークン化プロセス – Webブラウザの仕組み実践ガイド
こんにちは！Webブラウザの仕組みの旅へようこそ。フロントエンドのアーキテクトとして日々いろんなコードと格闘していますが、今回は「ブラウザが画面を表示するまでの一番最初の関所」、HTMLパーサーのトークン化プロセスについてお話ししますね。「...
Webブラウザの仕組み 【入門編】 ディスプレイロッキングの概念 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクトの私です。日々、Webサイトを作ったり、JavaScriptでガリガリとアニメーションを実装したりしていると、「なんだか最近、画面がカクつくぞ…？」という壁にぶつかることってありませんか？ ユーザーの...
Webブラウザの仕組み 【入門編】 投機的パース（Speculative Parsing） – Webブラウザの仕組み実践ガイド
こんにちは！Webブラウザの裏側の世界へようこそ。フロントエンドのアーキテクチャを長年見つめてきた私ですが、ブラウザという小さな宇宙が、画面の裏側でどれほど必死に、そして賢く私たちを助けてくれているかを知ると、今でもワクワクしてしまいます。...
Webブラウザの仕組み 【入門編】 ペイントホールディング（Paint Holding） – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクトの私です。Webサイトを作っていて、「リンクをクリックして次のページに移動するほんのコンマ数秒の間、画面が真っ白になって目がチカチカする……」そんなストレスを感じたことはありませんか？ユーザー側として...
Webブラウザの仕組み 【入門編】 スクリプトによるパースブロックの挙動 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Webサイトを作っていて、「あれ？なんだか画面が表示されるまでに変なタイムラグがあるな……」「JavaScriptを読み込ませたら、ページの表示がなんだかモッサリし...
Webブラウザの仕組み 【入門編】 ペイントとラスタライズの仕組み – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。Webサイトを作っていて、「なんだかこのアニメーション、カクカクするな…」「スマホだとスクロールが重いな…」と感じたことはありませんか？CSSやJavaScript...
Webブラウザの仕組み 【入門編】 CSSOMツリー構築プロセス – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。Webサイトを作るとき、私たちはHTMLで骨組みを書き、CSSで色や形を整えますよね。「文字を赤くする」「ボタンを丸くする」といった指示をブラウザに伝えると、画面が...