Webブラウザの仕組み

【フロントエンドの処方箋】`contain`プロパティを制する者はブラウザのレンダリングを制すおい、調子はどうだい？最近、社内のレビューをしていて「なんかこのコンポーネント、インタラクションのたびにモッサリするな……」という画面によく遭遇す...

フロントエンドのパフォーマンスチューニングで一番厄介なのは、「なぜか画面がカクつく」というフワッとした現象に直面したときだ。JavaScriptの実行時間は問題ない、メモリリークもしてない。なのに、スクロールするたびに微妙に引っかかる。大抵...

フロントエンドエンジニアとしてある程度経験を積んでくると、一度はぶち当たる壁がある。「アニメーションをガシガシ動かしていると、なぜかスマホ端末でスクロールがカクつく」「CPU使用率が跳ね上がってファンが回り出す」。この手のパフォーマンス問題...

おい、最近フロントエンドのパフォーマンスチューニングでこんな罠にハマってないか？「CSSの `transform` と `opacity` だけ使ってるからサクサク動くはずなのに、なぜか低スペック端末や画面いっぱいのリッチなUIでスクロール...

おい、調子はどうか。今日も元気にDOMをこねくり回しているかい？突然だが、フロントエンドの現場でこんなコードを見たことはないか？// やってしまいがちな「最悪のアンチパターン」const width = box.offsetWidth; /...

やあ、お疲れ様。最近、プロダクトのパフォーマンス改善に頭を悩ませているみたいじゃないか。「ユーザーインタラクションのレスポンスが悪い」「アニメーションがカクつく」「Core Web VitalsのINP（Interaction to Nex...

こんにちは。チームのコードレビューをしていて、`requestAnimationFrame` の使い方や、何となく実装したアニメーションがカクつく（スタッタリングする）現象に直面し、頭を抱えたことはないでしょうか。「ローカルのハイスペックマ...

こんにちは。フロントエンドチームのシニアアーキテクトとして、日々ブラウザという巨大で気まぐれなブラックボックスと格闘している者です。君もそろそろ、`setTimeout`や`setInterval`でアニメーションを無理やり動かそうとしてカ...

ブラウザの「裏切り」を味方につける：View Transitions API の深淵フロントエンドエンジニア諸君、日々DOMの操作やレンダリングパイプラインとの格闘、お疲れ様。「画面遷移を滑らかにしたい」という願いは、Web開発の黎明期から...

フロントエンドエンジニアの皆さん、日々のパフォーマンスチューニングお疲れ様です。Core Web Vitalsのスコアに一喜一憂し、メインスレッドのJank（カクつき）と格闘する日々を送っていることでしょう。さて、プロダクトの改修中、こんな...