#パフォーマンス
24 件
Three.js の浮島を静的サイトに載せる
浮島ページは自分のスクリプトだけを読み込みます。シーンは実行時に生成し、Three.js はこのページのチャンクにだけ入り、最初の HTML には空の舞台しかありません。
千二百インスタンス — 庭を数回の描画に収める
草六百、花百二十、苔石八十五、低木四十二。庭の密度は数を減らすのではなく、InstancedMesh で同じ種類を一描画にまとめて作ります。
3D の読み込み予算 — チャンク分割・可視になってから読み込み・止めどき
3D ページの費用は三つあります。ダウンロード、初回フレームのコンパイル、毎フレームの描画。それぞれに別々の予算を決めないと、見栄えが引っかかりに変わります。
big O の誤用：定数と前提が次数より結果を決めることが多い
O(n log n) の整列が O(n²) の挿入整列に負けることも、O(1) のハッシュ探索が配列の線形走査に負けることもあります。入力規模・定数・メモリ局所性を先に確認します。
デバウンスとスロットル：違いは「誰が実行時刻を決めるか」だけ
どちらも実行頻度を制限します。デバウンスは最後の呼び出しが、スロットルは固定の時間窓が時刻を決めます。選び間違えると、ドラッグが離した時だけ更新されたり、入力中に 200ms ごとに送信したりします。
ゲームループ：なぜ delta time が必須なのか
毎フレーム 5 ピクセル動かすと、60Hz では正常でも 144Hz では 2.5 倍速くなります。経過時間を掛けて物理をリフレッシュレートから切り離し、さらに上限を設けます。
HTTP キャッシュ：Cache-Control と ETag は半分ずつ担う
Cache-Control は「リクエストを送るか」を、ETag は「送った後で本文を省けるか」を決めます。混同すると片方を直しても直りません。
メモリ配置：同じアルゴリズムが十倍遅い原因はたいていキャッシュ
主記憶への一回のアクセスは数百サイクル、キャッシュ行の取得は一回です。逐次アクセスとランダムアクセスの差は次数を上回ることが多いです。
N+1 クエリ：ORM で最も典型的な性能の罠
100 件を取り出してから一件ずつ関連を引くと 101 回のクエリになります。直し方は三つだけです。先読み、一括取得、あるいは一回の JOIN。
レート制限：トークンバケットと漏れバケットの実際の違い
トークンバケットは突発を許し、漏れバケットは一定速度に均します。選び間違えると、正常な利用者が制限されたり、制限が機能しなかったりします。
スライディングウィンドウ：「窓が何を保つか」を先に決める
窓が成立するのは、窓の妥当性が左右の端に対して単調に変わる場合です。保つ状態と縮める条件を先に書き出せば、2 ポインタの二重構造は自然に O(n) に償却されます。
単調スタック：「次に大きい要素」を O(n²) から O(n) へ
各添字は高々 1 回 push され 1 回 pop されるので、二重ループに見える形が線形になります。左右で最初に大きい／小さいものを探す形なら、同じ雛形が使えます。
2 進数に 1 がいくつあるか：ループから SWAR まで
popcount には 3 通りあります。1 の個数だけ回すループ、表引き、そしてビット列を並列に数える SWAR。桁違いに差が出ますが、Rust と WebAssembly は既に単一命令として持っています。
Union-find：2 行の最適化で 1 回の操作がほぼ定数になる
経路圧縮は木を平らにし、サイズによる併合は木を高くしません。両方入れて初めて計算量が逆アッカーマン関数に落ち、実用上は 5 を超えません。
Islands は Web Components ではない：似て見えて別物の「必要なときだけ読み込む」
Islands はビルド時にどこに JS が要るか・いつハイドレートするかを決めます。Web Components は実行時にブラウザへ自立した要素を渡します。混同すると道具を選び間違えます。
静的サイトのキャッシュヘッダー：ハッシュ付きは永久、HTML は毎回確認
キャッシュ方針を決めるのはファイル名が内容で変わるかどうかで、サイズではありません。HTML を長くキャッシュすると、削除済みチャンクを指す古い入口を配ることになります。
WebAssembly が効く場面は、宣伝よりずっと少ない
WASM の利得は重い計算、まとまったデータ、少ない境界越えが揃ったときに出ます。O(n) の JavaScript ループを書き直しても、遅い読み込みと追いにくいスタックが残るだけです。
ヘッダーの高さを勘で書かない：ResizeObserver で実測して戻す
ナビの折り返し、遅れて届く Web フォント、内容の長さの変化で、CSS に書いた定数はすぐずれる。ResizeObserver で要素そのものを観測し、実測値を変数に書き戻す。
静的サイトの全文検索：索引はビルド時に、実行時にサーバーなし
静的サイトの検索は Algolia を繋がなくても作れます。索引をビルド時に生成し、検索は完全にブラウザ内で実行する——代償はビルドが数秒伸びるだけです。
Astro islands で初回 JS をゼロに近づける
「非同期読み込み」を「必要な時だけハイドレート」まで分解し、3層の遅延読み込みがそれぞれ何を解決するのかを実コードで説明します。
head の出典は一つ：SiteHead、JSON-LD のエスケープ、hreflang
三つの HTML シェルが一つのコンポーネントを共有し、head のタグをすべて出力します。データはサーバー層で組み立てます。JSON-LD の山括弧をエスケープする必要がある点も忘れずに。
静的サイトの公開は「フォルダを上げる」だけではない：キャッシュ、圧縮、正直な 404
静的ホスティングの罠はほぼ全部レスポンスヘッダーにあります。永久にキャッシュしてよいファイル、絶対にしてはいけないファイル、そして静的サイトが SPA 式フォールバックを使ってはいけない理由。
ビルド時のページネーション：静的サイトのページ送りにクエリ文字列を使わない理由
一覧はビルド時に静的なページへ分割され、N ページ目は実在のルートになります。クライアント側のページング処理もクエリ文字列も使わず、ただのリンクです。
アプリページに client:only を使わない：静的シェルと明示的なマウント
ゲームとツールのページは「シェル + createApp」で、client:only ではありません。読み込み・成功・失敗の三状態を自分で持ち、再試行ボタンも本当に動きます。