Webブラウザの仕組み 【入門編】 リフロー（再レイアウト）を発生させるプロパティ一覧 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた者です。Web制作を学び始めると、「画面がカクカクする」「スマホでスクロールすると妙に重い」という、言い知れぬパフォーマンスの壁にぶつかりますよね。その原因の多くは、今回取り上...
ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）
Webブラウザの仕組み Webブラウザの仕組み 【入門編】 レイヤー爆発（Layer Explosion）の回避 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私です。Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな……」「突然ブラウザがフリーズして落ちたんだけど！」なんて恐怖体験、ありませんか？ デバッ...
Webブラウザの仕組み 【入門編】 画像デコードの非同期化（decoding属性） – Webブラウザの仕組み実践ガイド
こんにちは！Webブラウザの奥深い仕組みの世界へようこそ。フロントエンドの現場を長年歩んできた私ですが、今でもブラウザという巨大なエンジンが裏側でどれほど必死に働いてくれているかを知ると、愛おしさすら覚えます。さて、今回はWebサイトを作る...
Webブラウザの仕組み 【入門編】 レンダリングパイプラインの各ステージ詳細 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクトの私です。日頃からWebサイトを作ったり、ブラウザでいろんなページを巡ったりしていると、「リンクをクリックしたら、一瞬で画面が綺麗に表示されるのって、ぶっちゃけ凄くない？」って思いませんか？裏側では、...
Webブラウザの仕組み 【入門編】 requestIdleCallbackによる低優先度タスクの実行 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Webサイトを作っていて、「なんだか画面がカクつく」「ボタンを押してもワンテンポ遅れて反応する」なんてモヤモヤした経験、ありませんか？ 特にスマホでアクセスしたとき...
Webブラウザの仕組み 【入門編】 Intersection Observerによる遅延レンダリング – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。Webサイトを作っていて、「画像や重たいコンテンツを全部一気に読み込むせいで、最初の表示がカクカクする……」なんて悩みに直面したことはありませんか？「うわ、また初期...
Webブラウザの仕組み 【入門編】 containプロパティによるレイアウトの分離（Containment） – Webブラウザの仕組み実践ガイド
こんにちは！Webブラウザの仕組みの裏側を覗く旅へようこそ。日々のWeb制作、本当にお疲れ様です。「CSSを書いたら、なぜか意図しないところがガタガタ動いちゃった…」「ちょっとしたアニメーションを入れただけなのに、ページ全体のスクロールがカ...
Webブラウザの仕組み 【入門編】 ペイントフラッシングの可視化とデバッグ – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私です。日々、モダンなWebアプリケーションを作っていると、「なんだかこの画面、スクロールするたびにカクつくな…」「ボタンを押したときに、ほんの一瞬だけ引っかかる感じがする...
Webブラウザの仕組み 【入門編】 GPUアクセラレーションと合成レイヤーの生成条件 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクトの私です。Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな……」「アニメーションがイマイチなめらかじゃないな……」と頭を抱えた経験、ありませんか？ 大丈夫です、あなただけじゃ...
Webブラウザの仕組み 【入門編】 コンポジタースレッドの役割とタスク – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトです。Webサイトを作っていて、「よし、きれいなページができた！」とブラウザで表示させてみたはいいものの、なんだかスクロールがカクカクしたり、CSSアニメーションが引っかかる...