Webブラウザの仕組み

こんにちは。フロントエンドの現場で日々ブラウザの機嫌とパフォーマンスに頭を悩ませている君なら、「カプセル化」という甘い響きに釣られてShadow DOMを導入したはいいものの、裏側でブラウザがどういう挙動をしているか気になったことが一度はあ...

やあ、お疲れ様。最近、チームのコードレビューをしていて「とりあえず `async` つけとけば速くなるっしょ」的なノリで `script` タグを書いてるコードを見かけてね、少しブラウザの裏側の動きを整理しておいた方がいいなと思ったんだ。フ...

フロントエンドの開発現場で、若手エンジニアから「なんかこのコード、たまに要素が取得できなくてエラーになるんです」「画面の初期化処理をどこで書くのが正解なんですか？」という質問を受けることはないだろうか。JavaScriptの実行タイミングと...

こんにちは。フロントエンドの現場で日々パフォーマンスチューニングに頭を悩ませている皆さん、お疲れ様です。今日も「なぜか俺の書いたコード、ハイスペックなMacBookでもたまにカクつくんだが……」なんて不可解な現象に直面していませんか？ ロー...

やあ、お疲れ様。最近、社内のモニタリングツールやGoogle Search Consoleで「INP（Interaction to Next Paint）」の数値が悪化して頭を抱えていないかい？「Core Web Vitalsの新しい主役」...

やあ。今日も今日とて、プロダクトのCore Web Vitalsのスコアボードとにらめっこってところか。LCP（Largest Contentful Paint）やCLSの数値改善に頭を悩ませているなら、君はもう一段上のフロントエンドの景色...

やあ。今日も今日とて、ユーザーが快適に使えるピカピカのUIを追求していることだろう。さて、君は最近、スマホでニュースサイトやECサイトを見ていて、「まさにリンクを押そうとした瞬間、広告が割り込んできやがって、全然関係ないボタンを押しちまった...

やあ。今日も今日とて、メモリを爆食いするブラウザの機嫌を取りながらコードを書いているかい？フロントエンドをやっていると、一度は直面するんだよね。「なんだかこのモーダルを開閉するたびに、画面全体がカクつくぞ」とか、「無限スクロールのリストで、...

こんにちは。フロントエンドチームのシニアアーキテクトとして、日々コードの海を泳いでいる私だ。君たちが書いたプロダクト、最近ユーザーから「なんかボタンを押してから画面がカクつく」「たまにスクロールが引っかかる」なんてクレームを受けていないかい...

やあ、よく来てくれた。フロントエンドの現場で「なぜかウチのWebアプリ、スマホでスクロールするとカクつくんだよね…」なんて頭を抱えていないかい？CSSの書き方をちょっと変えるだけで見違えるようにヌルヌル動くようになることもあれば、逆に不用意...