Webブラウザの仕組み

スポンサーリンク
Webブラウザの仕組み

【実務・中級編】 ペイント(描画)の仕組み – Webブラウザの仕組み実践ガイド

やあ、調子はどうだい? 普段、何気なくCSSを書いてブラウザに綺麗な画面を表示させているけれど、「CSSのプロパティを1行書き換えただけで、なぜか画面がカクつく…」なんて経験はないかな?「リフロー(Reflow)を避けて、リペイント(Rep...
Webブラウザの仕組み

【実務・中級編】 レイアウト(リフロー)の仕組み – Webブラウザの仕組み実践ガイド

「画面がなんかガクつく」「スクロールやアニメーションが滑らかじゃない」――。フロントエンドの現場で誰もが一度は直面し、そして多くの若手が「なんとなく重いから、なんとなく軽そうなコードに書き換える」という暗中模索に陥る問題。その諸悪の根源の多...
Webブラウザの仕組み

【実務・中級編】 レンダーツリーの構築 – Webブラウザの仕組み実践ガイド

お疲れ様!日々のフロントエンド開発、楽しんでいるかな?VueやReact、Next.jsといったモダンなフレームワークを使っていると、私たちは「状態(State)」を更新するだけで、画面が魔法のように書き換わる恩恵に預かることができる。だけ...
Webブラウザの仕組み

【実務・中級編】 CSSOMツリーの構築プロセス – Webブラウザの仕組み実践ガイド

おい、調子はどうだ?日々、Reactのコンポーネント設計や、Tailwind CSSのユーティリティクラスの嵐と格闘ご苦労様。フロントエンドエンジニアとして中級からもう一段上のレイヤーへ突き抜けたいなら、「ブラウザが画面を光らせるまでの裏側...
Webブラウザの仕組み

【実務・中級編】 DOMツリーの構築プロセス – Webブラウザの仕組み実践ガイド

なぜ、あなたの書いたJavaScriptは時々「カクつく」のか?こんにちは。チームのコードレビューをしていて、`element.style.width = ...` と `element.offsetHeight` をひとつのループの中で交...
Webブラウザの仕組み

【実務・中級編】 クリティカルレンダリングパスの概念 – Webブラウザの仕組み実践ガイド

やあ。今日も今日とて、リポジトリのパフォーマンス改善に頭を悩ませているところかい?「なぜかウチのプロダクト、低スペックなモバイル端末だとスクロールがカクつくんだよな……」「CSSをいじっただけなのに、なんでこんなに重いんだ?」――フロントエ...
Webブラウザの仕組み

【実務・中級編】 レンダリングエンジンとイベントループの統合 – Webブラウザの仕組み実践ガイド

やあ、よく来てくれた。現場でバリバリとコードを書いていると、一度はこんな謎にぶつかったことがあるはずだ。「あれ、このコード、非同期処理のつもりで書いたのに、なんで画面の描画が盛大にカクつくんだ?」「`Promise` と `setTimeo...
Webブラウザの仕組み

【実務・中級編】 メモリ負荷とレンダリングパフォーマンス – Webブラウザの仕組み実践ガイド

おい、ちょっといいか。最近、SPA(シングルページアプリケーション)でやたらとDOMを肥大化させたり、無限スクロールのリストを適当に実装して「なんか最近、ウチのサービス動作がカクつくんだよね〜、GC(ガベージコレクション)が仕事してないのか...
Webブラウザの仕組み

【実務・中級編】 GPUラスタライズのプロセス – Webブラウザの仕組み実践ガイド

おい、調子はどうか?今日も元気に `display: none;` と `visibility: hidden;` の違いで消耗してないか?フロントエンドをやっていると、どうしても「いかに綺麗なコンポーネントを書くか」「いかに状態管理を洗練...
Webブラウザの仕組み

【実務・中級編】 ブラウザの投機的パース(Speculative Parsing) – Webブラウザの仕組み実践ガイド

やあ。今日もレガシーなコードと最新のビルドツールに挟まれて、華麗にブラウザをハックしているかい?今回は、フロントエンドエンジニアなら絶対に知っておくべき、そして日々のパフォーマンスチューニングで強力な武器になる「投機的パース(Specula...
スポンサーリンク