Webブラウザの仕組み

画面が「チラつく」正体：Webフォントとブラウザの孤独な戦いやあ。現場でCSSを書いていて「Webフォントが読み込まれるまでの数秒間、文字が消えたり、突然フォントが切り替わってレイアウトがガタついたりする現象」に悩まされたことはないかな？あ...

フロントエンドの世界に足を踏み入れてしばらく経つと、誰もが一度は「なぜCSSはこんなに複雑で、パフォーマンスを食うのか？」という壁にぶつかるはずだ。今日は、多くのエンジニアが「なんとなく」書いているCSSセレクタが、実はブラウザの心臓部でど...

ブラウザの「先読み」という魔法：投機的パース（Speculative Parsing）の正体やあ。フロントエンドの現場で日々コードを書いていると、「なぜこのスクリプトはレンダリングをブロックするのか」「どうすればLCP（Largest Co...

ブラウザの「メインスレッド」を制するものは、Webのパフォーマンスを制すフロントエンドの現場で、「なぜかUIがカクつく」「イベントハンドラが期待通りに動かない」といった壁にぶつかったことはないだろうか？多くのエンジニアが「ブラウザはコードを...

ブラウザの「裏の顔」を知る：コンポジットレイヤーとGPU合成の深淵フロントエンド開発の現場で、ふと「なぜかアニメーションがカクつく」「複雑なUIを表示するとスクロールが重い」といった壁にぶつかったことはないだろうか。多くのエンジニアは「CS...

「will-change」は魔法の杖ではない：GPUアクセラレーションの深淵と正しい付き合い方フロントエンドの現場で、「アニメーションがカクつくからとりあえず `will-change: transform` を入れておけ」というアドバイス...

INP（Interaction to Next Paint）を制する者は、UXの泥沼から脱出できるやあ。今日はフロントエンド開発の「ラスボス」とも言える、Interaction to Next Paint (INP) について語ろうと思う。...

なぜ、ユーザーは「ボタンを押そうとした瞬間に逃げられる」のか？ —— CLSとブラウザの裏側現場で戦うエンジニアなら一度は経験があるはずだ。読み込み終わったと思ったサイトで、急に広告や画像がドンと割り込んできて、クリックしようとしたリンクが...

ブラウザの「心の声」を聴く：Paint Timing APIでUXのボトルネックを暴くフロントエンド開発の現場で、「なんとなくサイトが重い」という定性的なフィードバックに悩まされたことはないだろうか。Lighthouseのスコアはそこそこな...

ブラウザの「呼吸」に合わせる：requestAnimationFrameでレンダリングの深淵を制御するやあ。今日もブラウザのレンダリングエンジンと格闘しているかい？フロントエンドの世界に足を踏み入れると、誰もが一度は「カクつくアニメーション...