ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）

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

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

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

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

こんにちは。プロダクトのフロントエンドを預かる身として、日々「画面いっぱいに広がるリッチなUI」と格闘していることだろう。しかし、どんなにモダンでイケてるSaaSを作ろうとも、ビジネスの現場では避けて通れない「悪魔の要件」が必ずやってくる。...

やあ。最近、プロダクトのパフォーマンス改善やセキュリティ監査で頭を悩ませていないかい？「またサードパーティのウィジェットが重くてメインスレッドが死んでるぞ」なんて、夜中にSentryからアラートが飛んできたりしてね。今回は、フロントエンドエ...

やあ、お疲れ様。最近、君が書いたダッシュボード画面、なんだかスクロールするたびに微かに「カクつく」ってテスターからバグチケットが上がってきてなかったかい？「いやいや、CSSの `will-change` も仕込んだし、無駄な再描画は避けてる...

お疲れ様です。今日のコードレビューの前に、少しブラウザの裏側の話をさせてほしい。実務でフロントエンドをやっていると、なぜか「スマホで特定のモーダルを開いた瞬間にカクつく」「無限スクロールのリストが重い」といったパフォーマンスの壁にぶぶつかる...

フロントエンドの開発現場で、ふと「なんかこのインタラクション、妙にもたつくな……」と感じてパフォーマンスパネルを開いてみたら、Style Recalc（スタイル再計算）の処理時間がフレームレートの限界（16.6ms）を軽く超えて赤く染まって...

こんにちは。君の書いた前回のプルリクエスト、ロジックは綺麗にまとまっていたけれど、低スペックなモバイル端末で検証したかい？ユーザーがボタンをタップした瞬間、画面が数秒間フリーズして「クソアプリだな」ってブラウザを閉じられそうなポイントがいく...