Webブラウザの仕組み

こんにちは。最近、社内の若手から「デザインカンプ通りに実装したはずなのに、ページを開いた瞬間にテキストがガタッと一瞬消えたり（あるいは変なフォントでチラついたり）、CLS（Cumulative Layout Shift）のスコアが怒られたり...

おい、最近「なぜかスマホでスクロールするとカクつく」「Largest Contentful Paint (LCP) のスコアがどうしても改善しない」って悩んでないか？フロントエンドエンジニアとしてレイアウトやCSSの最適化をやり尽くした後に...

フロントエンドのパフォーマンスチューニングにおいて、長年私たちは「DOMノードの数」と戦い続けてきました。「無限スクロールを実装したら、スクロールするたびにDOMが肥大化して、スマホのブラウザが盛大にフリーズした」「リッチなLP（ランディン...

やあ。今日も今日とてCSSとDOMの機嫌を取りながら、ブラウザの機密を暴く時間だな。フロントエンドをある程度やってくると、「要素を隠す」という要件に対して `display: none` を使うべきか、それとも `visibility: h...

こんにちは。プロダクトのパフォーマンス改善や、「なぜかスタイルが意図通りに当たらない…」というデバッグ地獄に夜な夜なハマっていませんか？フロントエンド開発を長くやっていると、HTMLとCSSを書けばブラウザが勝手に画面を綺麗に描画してくれる...

やあ。今日も元気にコード書いてるかい？フロントエンド開発をやっていると、一度は「なぜか画面の表示が妙に遅い」「JavaScriptのせいでレンダリングがブロックされている気がする」という壁にぶ当たるよな。特に、ユーザーが最初に目にするファー...

こんにちは。君たちのチームに参加して、ブラウザの内部挙動について熱く語るシニアアーキテクトの席をもらったよ。普段、何気なく書いているHTML。``タグを閉じ忘れたり、不審な階層でマークアップしたりしても、現代のブラウザは文句一つ言わずにいい...

こんにちは。君もそろそろ、複雑なSPA（シングルページアプリケーション）のパフォーマンスチューニングで泥を被る時期だな。「ユーザーがボタンを連打したときに画面がカクつく」「無限スクロールのリストの末尾にアイテムを追加した途端にメインスレッド...

こんにちは。チームのパフォーマンスチューニングを任されると、避けて通れないのが「ブラウザの裏側の挙動」の理解だよね。「なぜかウチのサイト、初期表示がもたつくんだよね……」「 Lighthouseのスコアを改善したいのに、どこから手をつけてい...

お疲れ。最近、社内のあちこちから「画面遷移の時に一瞬ホワイトアウトして目が痛い」「SPAのルーティングでちらつき（FOUC）が気になるんだけど何とかならない？」なんて相談を受けてないか？フロントエンドエンジニアとしてUIの滑らかさにこだわる...