12/26

2025/12/26

ブログ見直し

microcms-sdkの依存削除し、Next.jsのfetch関数に書き直し。
スタイル見直し
ISR化。webhookでビルドが走るようにしていたのをやめた。毎回記事投稿ごとに全生成されるよりかは全然良いと思う。気軽に記事を手直しできるようになった。
結局デプロイ時に記事全生成されるのは気になったが、最初10件だけSSGしてみるようgenerateStaticParamsの配列をいじってデプロイしてみたけど10秒くらいしか時間は変わんなかった。
初期表示画面で最初の10件もクライアントレンダリングで取っていたが、ISR化して、初期表示を早くした。

パフォーマンス - addEventlistenerの第三引数

passive

scrollイベントやtouchmoveイベントは中身が終わってからスクロールとかされる。つまり内容が激重だとイベントも激重になる。
これは中身にpreventDefault()があるかどうかわからないから。

第三引数に{ passive: true } を渡すとpreventDefault()がないことを知らせることができる。

MDNによると、このオプションが指定されていない場合、既定で false になります。ただし、Safari 以外のブラウザーでは、wheel、mousewheel、touchstart、touchmove の各イベントでは true になります。

とのこと。

capture

ついでにこいつも。

親要素にclickイベントA,子要素にclickイベントBを設定していると、子要素をクリックした時B→Aと発火する。
親にどんどんたどることをバブリングという。

ちなみにこの時Bで止めたいときはstopPropagation()を使う。

captureを使うとA→Bになる。

タスクの分割

参考：https://web.dev/articles/optimize-long-tasks?hl=ja

まず前提に、関数は小さく分割するのが望ましい。
メインスレッドは一つのことしかしない。その間はユーザーのイベントハンドラーとかがブロックされる。
細かい関数に分けていると、その合間にイベントハンドラーやマイクロタスクを実行してくれる。
だが、一つの関数にいっぱい機能あるのも仕方ない。そんなときはsetTimeout(fn, 0)で少し遅延して誤魔化す。
その最近の代替がscheduler.yield()

ただし、safariが対応していないので注意。

暇なときに処理をお願いする

アイドル時間になってやっと呼ばれる処理をrequestIdleCallbackで書くことができる。
後でいい仕事など、どうでも良い処理を書くと良いかも。

最近では、scheduler.postTask(fn, {priority: "background"})が良い。

ブラウザ対応はどちらも同じ、safariのみ対応してない。

比較した人がいる。https://zenn.dev/anpan/articles/f66bb90ec0c322

DOM操作

Forced Synchronous Layoutという現象がある。
これはDOMをつくった後とかに、offsetHeightとか取得すると起こる。
そういう処理をrequestAnimationFrame()内で書くとDOMでちゃんと計算された後に発火するから回避できる。

DOMを追加する処理で起こしがちだから注意。

また、for分とかで大量にForcedSynchronousLayoutが起こることをLayoutThrassingという。
documentFragmentを使うと本には書いていたが、web.devによるとループ文の外で変数を格納してそれを使うか、requestAnimationFrameでfor分を書く。