javascript - フリーズなどの問題を引き起こす悪い JS を検出する

Question

正常に動作するように見える JS スクリプトを作成しました。ただし、ランダムな時点でブラウザがフリーズします。後者は特に、モバイル デバイスですぐにまたは頻繁に発生します。どの部分が台無しになっているのかを確認するツールはありますか。つまり、RAM/CPU が多すぎる可能性がありますか?

Chrome DevTools に「プロファイル」などがあることは知っていますが、問題がどこにあるかを確認するのに十分な経験がありません。これが正しい場合、何か指針はありますか?

前もって感謝します！

Answer 1

JavaScript はシングルスレッドであることに注意してください。1 つの関数に時間がかかると、イベント ループがブロックされ、他の関数が実行できなくなります。たとえば、jQuery で見られるようなアニメーションは、タイマーで関数を繰り返し呼び出すことによって機能します。関数がイベント ループをブロックすると、ページとその内容によっては、多くの機能が低下し、ブラウザがフリーズしたように見えることがあります。

したがって、ほとんどの問題は、実行に時間がかかりすぎる関数によって引き起こされます。

これには「プロファイル」を使用すると便利です。プロファイルを開始し、「悪い」ことが発生するまでページを実行してから、結果を確認します。Chrome は、実行に費やした時間順に関数を一覧表示します。ある機能に思った以上に時間がかかる場合は、そこに原因があります。関数が呼び出される回数が多いほど、実行にかかる時間が長くなりますが、コードを記述した場合は、さまざまな関数が呼び出される頻度を知っておく必要があります。