JavaScript(Ajax)やCSSアニメーションを多用したサイトでファンがものすごい勢いで回り始めます

Question

前提・実現したいこと

JavaScript(Ajax)やCSSアニメーションを多用したサイトを作っておりますが、
ファンがものすごい勢いで回り始めます
CPUが20%程上昇しています
Ajaxは5秒に1度程度で、CSSアニメーションは結構使ってるほうです
調べたところ、CSSアニメーションはGPUに負荷がかかるとようですが、
CPU上昇と関係あるのでしょうか？

Comments

[退会済みユーザー]

質問は何ですか？

[m.ts10806]

プログラミングと関係ないんでは

[m.ts10806]

せめて環境含めて再現可能、問題切り分け可能な情報でもあれば良いのですけど、現時点では皆無ですしね

Answer 1

CPUが20%程上昇

考えられることは、２つです。

1. マシンスペックがやたらと低い
2. JavaScript コードに問題がある

JavaScript(Ajax)やCSSアニメーションを多用したサイト

おそらく、2. の JavaScript コードの問題 と思いますので、
目的のパフォーマンスを得られるようにコードを修正してください。

---

すぐに思いつくのは以下の２点です。

1. 無用な addEventListener() を繰り返している

addEventListener() は、適切に利用しないとリスナの多重登録を引き起こします。
2. １フレームで時間のかかる処理を実行している。
連続して発火する resize イベントなどで大掛かりな処理を定義しているなども同様です。

イベントリスナ多重登録の例 : （５回登録）

window.addEventListener("DOMContentLoaded", () => {
  for( let i = 0; i< 5; ++i ) {
    document.body.addEventListener("click", (evt)=>{
      console.log(i, evt.type, evt.currentTarget.nodeName);
    })
  }
});

このコードで、表示されているページ上を１回クリックしてみてください。

0 "click" "BODY"
1 "click" "BODY"
2 "click" "BODY"
3 "click" "BODY"
4 "click" "BODY"

1回のクリックに対して、登録を繰り返した回数分のリスナ実行が確認できます。

このように、設計を蔑ろにしたイベント実装は、CPUの使用率が激増し、ユーザビリティを損ないます。

※ご質問に示された内容では、回答できる事は以上です。

Answer 2

なんとも言えませんがご自身で作っているサイトなら、
一度まっさらにした上でCSSアニメを順につけてきCPU稼働が急にあがるものがあれば
それに対して対応すればいいでしょう。
またブラウザによるかもしれませんので検証ブラウザは多めに

Answer 3

アプリケーションごとのCPU, GPU, RAM使用率をご確認ください。
関係ないとは言い切れませんが、質問者さんのPCスペックや、どのようなサイトを閲覧しているのかがわからないため、適切な回答ができません。