Webブラウザの仕組み 【入門編】 Display Locking APIの概念 – Webブラウザの仕組み実践ガイド
こんにちは！Webブラウザの奥深い世界へようこそ。フロントエンドの現場で日々コードを書いていると、「どうしてこのページ、こんなにスクロールがカクつくんだろう…」と冷や汗をかいた経験、ありませんか？特に、何千行もあるような巨大なリストや、無限...
ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）
Webブラウザの仕組み Webブラウザの仕組み 【入門編】 コンポジタースレッドの役割と責務 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Webサイトを作っていて、「あれ、なんかスクロールがカクカクするな……」「スマホでアニメーションを動かすと、妙に重いな……」と頭を抱えた経験、ありませんか？ 大丈夫...
Webブラウザの仕組み 【入門編】 画像デコードとネイティブLazy Loading – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたシニアアーキテクトの私です。Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな…」「ページの読み込みがもたつく原因って何だろう？」と悩んだことはありませんか？大丈夫です...
Webブラウザの仕組み 【入門編】 フォント読み込み戦略（font-display） – Webブラウザの仕組み実践ガイド
こんにちは！Web制作やフロントエンドの世界へようこそ。コードを書いていて、「よし、これで完璧！」とブラウザで表示した瞬間、なぜか数秒間文字が消えたり、別のフォントでパッと表示されたあとに突然別のフォントにカクンと切り替わったりして、モヤッ...
Webブラウザの仕組み 【入門編】 ペイントホールドとレイアウト安定性（CLS対策） – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクトの私です。Webサイトを作っていて、「あれっ、読み込み中のページをふと見たら、突然文字がガクッと下に押し出されて、クリックしたかったリンクと違う場所を押してしまった……！」なんてイライラした経験、あり...
Webブラウザの仕組み 【入門編】 メインスレッドのブロッキングとタスク分割 – Webブラウザの仕組み実践ガイド
こんにちは！Webブラウザの仕組みの裏側を覗き見する世界へようこそ。フロントエンドの現場で泥水をすすりながらコードを書いていると、「あれ？なんか画面がカクカクするぞ……」「ボタンを押したのに、数ミリ秒フリーズする……」なんて恐怖体験に必ず直...
Webブラウザの仕組み 【入門編】 リソースヒントの活用（preload, prefetch, preconnect） – Webブラウザの仕組み実践ガイド
こんにちは！Web制作やフロントエンドの世界へようこそ。私たちが普段何気なく使っているWebブラウザ。アドレスバーにURLを打ち込んで「Enter」を押した瞬間、画面が一瞬でパッと表示されますよね。あのスムーズな体験、実は裏側でブラウザがも...
Webブラウザの仕組み 【入門編】 Webフォントの読み込みとレンダリング挙動 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。Webサイトを作っていて、「おしゃれなフォントを指定したのに、ページを開いた瞬間に文字が消えたり、別のフォントに変わったりして、ガタッとレイアウトが崩れる…」なんて...
Webブラウザの仕組み 【入門編】 画像デコードとレンダリング – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた者です。Webサイトを作っていて、「画像が表示されるの、なんだか遅いな……」とか、「スクロールしたら、画像がパッと現れるのがカクつくんだよね」と感じたことはありませんか？HTM...
Webブラウザの仕組み 【入門編】 content-visibilityプロパティによるレンダリング抑制 – Webブラウザの仕組み実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。Webサイトを作っていて、「なんだか最近、ページが重いな……」「スマホでスクロールするとカクつくんだよな……」と頭を抱えた経験はありませんか？ ページの中に画像やカ...