Webブラウザの仕組み

やあ。今日もどこかのコードレビューで「とりあえず`defer`つけとけ」なんて雑な指示を出して、なぜそうなるのか説明に窮していないかい？フロントエンドエンジニアとして一歩先へ進み、パフォーマンスチューニングやCore Web Vitalsの...

やあ、今日もディスプレイの前でコードと格闘ご苦労さん。「動くものは作れるようになったけれど、どうも複雑なアニメーションを入れるとカクつくんだよな……」君がそんな壁にぶつかったとしたら、それはJavaScriptのアルゴリズムの問題だけじゃな...

やあ。今日もどこかのリポジトリで無限に増えるCSSの海と格闘していることだろう。「なんで俺が書いたスタイルが効かないんだよ！」「また詳細度のバグか？ 重要度（`!important`）で上書きしてしまえ！」……ちょっと待て。その場しのぎのハ...

こんにちは。フロントエンドの現場で日々、パフォーマンスチューニングや不可解なレンダリングバグと格闘している君なら、「DOM（Document Object Model）がどうやって作られているか」を一度は意識したことがあるはずだ。「HTML...

やあ。今日もどこかのコンポーネントの再レンダリングループや、バンドルサイズ肥大化と格闘していることだろう。フロントエンドエンジニアとしてある程度経験を積んでくると、「なぜ画面がこう描画されるのか」というブラウザの内部挙動にぶち当たる瞬間がや...

やあ、お疲れ様。最近、コンポーネント設計の話題になると必ず名前が挙がる「Shadow DOM」だけど、君はちゃんとその中身を理解して使いこなせているかい？「いや、なんとなくWeb ComponentsのスコープドCSSを作るためのものでしょ...

画面外の重いDOMをブラウザに無視させろ！`content-visibility`でレンダリングの限界を突破する実務テクニックこんにちは。プロダクトのパフォーマンス改善に日々頭を悩ませているフロントエンドエンジニアの皆さん、お疲れ様です。無...

お疲れ。最近、フロントエンドのコードレビューをしていて「うわ、またやってるな」って思う瞬間があるんだよね。何だと思う？そう、アニメーションやスクロール位置の監視のために、平然と `setInterval` や `setTimeout` を使...

こんにちは。フロントエンドの現場で日々、パフォーマンスチューニングやレンダリングの最適化と格闘している君なら、「Webフォントを読み込んだ瞬間に画面のテキストがガタッとズレる（レイアウトシフト）」あの不気味な現象に一度は頭を抱えたことがある...

フロントエンド開発の現場で、こんな壁にぶつかったことはないか？「Lighthouseのパフォーマンススコアを上げろって言われたから、とりあえず適当に `preconnect` や `prefetch` をヘッダーにベタベタ貼り付けた。でも、...