Webブラウザの仕組み

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

フロントエンドのパフォーマンスチューニングを語るとき、私たちはついつい「JavaScriptのバンドルサイズを削ろう」「CSSは非同期で読み込もう」といった、エディタを開いて目に見えるコードの話に終始しがちだ。だが、ちょっと待ってほしい。ブ...

こんにちは。プロダクトのパフォーマンス改善で日々ブラウザの挙動と格闘している君なら、「なぜかこのアニメーションだけカクつくんだよな…」とDevToolsのパフォーマンスパネルを睨みつけた経験が一度はあるはずだ。DOMをいじり、レイアウトを計...

やあ。今日もどこかのコードレビューで「アニメーションがカクつくから何とかしてくれ」って泣きついてこられたところかい？よくある話だよね。スタイルの崩れやメモリリークも厄介だけど、一番ユーザーにストレスを与えるのは、やっぱり画面の「ガタつき（J...

お疲れ様です。今日のコードレビューで、また「やっちゃいけない場所でのレイアウト強制（強制同期レイアウト）」の臭うコードを見かけたので、少し時間をもらってこの話をしようと思います。フロントエンドをやっていると、「アニメーションがカクつく」「ス...

やあ、お疲れ様。最近、チームのコードレビューをしていて「うーん、惜しいな」と思うことがよくあるんだよね。みんな「JavaScriptの実行をいかに速くするか」「バンドルサイズをどう削るか」にはすごく敏感なんだけど、その一歩先、ブラウザが受け...

こんにちは。フロントエンドの現場で「なんでウチのサイト、初期表示がこんなにモタつくんだよ……」と頭を抱えた経験、君にもあるはずだ。Lighthouseを開けば「レンダリングをブロックしているリソースの排除」というお馴染みの赤字警告。今回は、...

やあ。今日もどこかのコードレビューで「なんでこんなところに`script`タグ置いてるんだよ……」と頭を抱えているところかい？フロントエンドをやっていると、画面が真っ白なまま数秒間固まる「ホワイトスクリーン問題」に一度は直面するはずだ。ユー...

フロントエンドエンジニアとして日々のUI構築やパフォーマンスチューニングに明け暮れていると、どうしても「JSの実行速度」や「Reactの再レンダリング」といった上位レイヤーに目が行きがちだ。だが、ちょっと待ってほしい。ブラウザが画面を表示す...

やあ、お疲れ様。最近、デザインカンプ通りのレイアウトがどうしても特定のブラウザだけ微妙に崩れる、なんて不具合に頭を悩ませていないかい？「俺の書いたCSSは完璧なはずなのに、なんでSafariだけ……」なんて、深夜のオフィスでひとり呟いた経験...