変化する文書からテキスト範囲を再発見するアンカリング
DOM 座標だけでは壊れるハイライト復元を、引用・文脈・位置 selector の重み付きスコアと信頼しきい値で解決する方法
Browser カテゴリーの知識文書です。
DOM 座標だけでは壊れるハイライト復元を、引用・文脈・位置 selector の重み付きスコアと信頼しきい値で解決する方法
メモリを共有できない拡張機能の実行空間を、メッセージ API、runtime 検証、handler ルーティング、応答エンベロープ、変更通知で安全につなぐ方法
blur や Enter が変換途中の文字を確定保存してしまう理由と、イベント順序の仮定ではなく変換状態で直す方法
ネイティブアプリのようなローディングスプラッシュを初回ペイントから表示しつつクローラーには隠すには、SSR マークアップや UA 分岐ではなく body 最上部のインラインブロッキングスクリプトでノードを注入する。UA ゲートが静的キャッシュを壊す理由
LCP が遅いのに画像は小さく TBT がほぼゼロなら、ボトルネックはダウンロードではなく、LCP 要素がクライアントコンポーネントで hydration がペイントを妨げていることだ。診断とサーバー化の処方
createObjectURL を useMemo で生成し useEffect で revoke すると発生する断続的な画像崩れと、サーバープロキシ画像は直接 URL でレンダリングしてレースを根本から取り除くパターン
オフラインシェル(offline shell)フォールバックをすべてのリクエストに掛けると、画像・API の失敗に HTML を返して <img> が崩れキャッシュが汚染される。シェルフォールバックは request.mode が navigate の文書リクエストにだけ掛ける
CSS duration リセットだけでは JS スプリング・Observer ベースのページ遷移は止まらないため、matchMedia で明示的にゲートするパターン
非同期キャッシュ削除と stale-while-revalidate が重なるとき、generation で遅れて終わったリクエストの再保存を防ぐパターン
Canvas 2D グラフノードの色・きらめきを ID ハッシュで安定化し、globalAlpha・shadow 状態を復元するパターン
Service Worker Cache Storage でキャッシュを即返却しバックグラウンドで最新化する SWR パターンと、容量・セキュリティ上の注意点
animation-timeline view() と animation-range entry でスクロール進入の fade/slide を JS なしで作るパターン
optional display で遅延した webfont の swap を防ぎ、タグ・本文の layout shift(CLS)を減らすタイポグラフィ戦略
カスタムドラッグ・リサイズをモバイルで安定させる pointercancel、touch-action、coarse-pointer hover フォールバック
React commit は子 DOM から先に付けるため、子 useLayoutEffect の時点で祖先 ref が null でありうる — 祖先 DOM 副作用は useEffect に遅延する
position:fixed アンカーに一度だけ測った座標で貼り付けたポップオーバー・ツールバーがスクロール後にテキストから離れる原因と、scroll/resize 再測定パターン
テキスト選択ベースのフローティングツールバーを mousedown/mouseup ゲートの代わりに selectionchange で駆動する理由と、ハイブリッドエディタの所有権パターン
リッチテキストエンジンがフォーカス中に Mod-Z/Y を preventDefault する際、chainCommands で document undo へ明示的に委譲するパターン
CJK IME の composition session と contenteditable/React エディターで、commit defer・mount-once により変換の崩れを防ぐ原理
ブラウザネイティブのドラッグセッション API。OS ドラッグループと DataTransfer を通じてサブツリー境界を越える移動を実装する
user-select:none はドラッグ選択を防ぐだけで Selection/クリップボードからテキストを完全には除外せず、除外するには CSS generated content の方が安全
ローディングスケルトンが最終UIと異なる領域を占有するときにCLSが発生する原因と、高さ・幅を予約する処方
開発サーバー trace の outlier を避け、N 回の median で before/after を比較する実験設計
Lighthouse Performance スコア、カテゴリ audit、Chrome trace の ms がそれぞれ異なる計測であることを見分ける方法
ブラウザが HTML・CSS・JS を受け取って最初の画面ピクセルを描くまでに通る段階と、その経路を短くする方法