質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CPU

CPUは、コンピュータの中心となる処理装置(プロセッサ)で中央処理装置とも呼ばれています。プログラム演算や数値計算、その他の演算ユニットをコントロール。スマホやPCによって内蔵されているCPUは異なりますが、処理性能が早いほど良いとされています。

OS

OS(オペレーティングシステム)は、システムソフトウェアの一種であり、一般的に、ハードウェアを直接的に管理・操作する最も中心的な機能を有するソフトウェアがオペレーティングシステムとして呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

1700閲覧

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

rtyep

総合スコア0

CPU

CPUは、コンピュータの中心となる処理装置(プロセッサ)で中央処理装置とも呼ばれています。プログラム演算や数値計算、その他の演算ユニットをコントロール。スマホやPCによって内蔵されているCPUは異なりますが、処理性能が早いほど良いとされています。

OS

OS(オペレーティングシステム)は、システムソフトウェアの一種であり、一般的に、ハードウェアを直接的に管理・操作する最も中心的な機能を有するソフトウェアがオペレーティングシステムとして呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/09/14 22:48

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/09/14 23:10

質問は何ですか?
m.ts10806

2020/09/15 00:03

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

2020/09/15 00:30

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

回答3

0

CPUが20%程上昇

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

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

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

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


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

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

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

イベントリスナ多重登録の例 : (5回登録)

javascript

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

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

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

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

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

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

投稿2020/09/15 00:37

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2020/09/15 00:23

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2020/09/14 23:44

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問