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

🛜 2023年8月5日

数年前にこういう拡張機能を作りました。

https://chromewebstore.google.com/detail/%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB%E3%82%92%E8%BF%BD%E5%BE%93%E3%81%99%E3%82%8B%E5%9B%9B%E8%A7%92%E3%81%84%E3%81%AE/nlfopomlpjjjlafgigcmmkjeaghbbjpn

この拡張機能はマウスカーソルの後ろを四角い図形がついてくるというお遊び高負荷拡張機能です。動作としては、addEventListener("mousemove")でマウスが動くごとに追従する四角い図形のtopとleftを書き換えていました。

コードの例

const element = /* 追従させたいえれめんと */

addEventListener("mousemove", (event) => {
    element.style.top = event.clientX;
    element.style.left = event.clientY;

    requestAnimationFrame(move);
});

これをリニューアルした時に気づいたんですが、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は特定の条件下で負荷が高くなるのかな。。。

実際の拡張機能はもっといろいろ間引いたり、なんやかんやしたり軽量化処理しているので、より負荷は軽減してると思いますが、めっちゃ重いです。なんとかならんかな。

https://chromewebstore.google.com/detail/%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB%E3%82%92%E8%BF%BD%E5%BE%93%E3%81%99%E3%82%8B%E5%9B%9B%E8%A7%92%E3%81%84%E3%81%AE/nlfopomlpjjjlafgigcmmkjeaghbbjpn