javascript - （Firefoxによると）ページの実行を遅くするスクリプトをデバッグするにはどうすればよいですか？

Question

タイムアウトがいくつかあり、Raphaelを使用してメニューを描画し、あらゆる種類の動的プロパティを使用してこれを実現するスクリプトがあります。あなたはjsfiddleでそれを見ることができます：私のコードのJSFiddleバージョン

私の問題は、Firefoxが「スクリプトの実行速度が遅いなど」をスローすることがあることです。このページを開いたときのエラー。30分以上経過している可能性があります。通常、1つの要素にカーソルを合わせると、この時点で1つのサブメニューが開きます。エラーは通常、私のjsファイル、場合によってはFirefox自身のファイルを指していません。

これをデバッグするにはどうすればよいですか？それは可能ですか？ヒントをいただければ幸いです。（私は今タイマーにクロノを使用していますが、役に立たなかったようです）

score 2 · Accepted Answer

コードのプロファイリング

おそらくプロファイリング、つまりコードのパフォーマンス分析を行いたいでしょう。他の人が指摘しているように、Firebug は Firefox の優れたツールです。具体的には、Firebug で、[コンソール] タブの[プロファイル] をクリックします。次に、ナビゲーションを少し操作し、プロファイルをもう一度クリックして分析を終了し、結果を取得します。どの関数が呼び出された頻度と実行にかかった時間がわかります。これは、コード内のパフォーマンスのボトルネックを特定するのに役立ちます。

最適化

一見すると、おそらく DOM クエリを最適化できると思います。高価なクエリの結果への参照を保存します。また、可能であればコンテキストを使用して、クエリをより効率的にします。

またrequestAnimationFrame()、setTimeout().

score 1 · Accepted Answer

ほとんどのブラウザーには、ユーザーが「実行時間の長いスクリプト」を停止できるようにする何らかのメカニズムがあります。

スクリプトがどのように「長時間実行」されていると見なされるかは、ブラウザーによって若干異なり、「実行コンテキスト」内で実行される命令の数または経過時間のいずれかです。

ブラウザーで実行する JavaScript は、主にイベント駆動型です (ページの解析中に JavaScript が即座に実行される場合を除く)。ブラウザーは、実行コンテキストが完了するまで待機してから何かを行います。また、JavaScript の実行を待機している間は、表示の更新などをブロックできます。

基本的に、指示をイベントへの応答に分割する必要があります。どこかに大規模なループがある場合 (たとえば、アニメーションを実行するため)、実際には間隔を使用して実行サイクルを分割する必要があります。例var interval = window.setInterval(refreshDisplay, 50);- これは、refreshDisplay50 ミリ秒ごとに (引数なしで) 関数を呼び出します (1 秒あたりの粗い呼び出しは 20 回です)。