カーソルに追従させるやつ、デベロッパーツールとかYouTubeの画面上で重くなる件

数年前にこういう拡張機能を作ってみた

これをリニューアルした時に気づいたんですが、addEventListener("mousemove")で追従させる処理がデベロッパーツールを開くとすんげー遅くなるっぽいです。

デベロッパーツールだけならいいんですけど、YouTubeの再生中とかも重い（なぜ）

topとleftを変えてるからかと思って、transform: translate()にしてみたけど一緒でした。

なので、addEventListener("mousemove")で変数のtop, leftだけ変動させて実際に値を適用させるのはrequestAnimationFrame()でループさせてる中で実行することにしてみた。

イメージ↓

const element = /* 追従させたいえれめんと */
let x = 0;
let y = 0;

addEventListener("mousemove", (event) => {
    x = event.clientX;
    y = event.clientY;
});

const move = () => {
    element.style.top = x;
    element.style.left = y;

    requestAnimationFrame(move);
};

move();

そしたらなめらかに動くようになりました。

why...

もしかしたらaddEventListenerは負荷が高いのかな...?