8

私の知る限り、スクリプトは javascript で同期的にダウンロードおよび実行されます。したがって、次のコードを記述した場合:

<script type='text/javascript'>console.time('core')</script>
<script type='text/javascript' src="guicore.js"></script>
<script type='text/javascript'>console.timeEnd('core')</script>

js のダウンロード、解析、実行の合計時間がコンソールに表示されます。解析時間を除外するにはどうすればよいですか? 同様のファイルを追加するだけですが、すべてのコードがコメントアウトされています。多かれ少なかれ、この手法は機能するはずです。

問題は、これが機能しないことです =)

私はそのコードを最適化し、実行時間を 90 ミリ秒から 25 ミリ秒に短縮しましたが、Chrome では約 100±10 ミリ秒、Firefox では約 160±15 ミリ秒の同じ時間を確認しました。

わかりました、プロファイラーを使用できることはわかっていますが、問題は「jsの解析時間を正しく測定する方法」と、ところで何を測定したかです。Research.reverse-engineering はとても楽しいですが、その分野を深く知っている人がいるかもしれません。

4

5 に答える 5

6

Web API だけを使用して、実行時間とは無関係にスクリプトの解析時間を正確に測定することはできません。ブラウザによって、解析を行うときの戦略が異なります。一部のブラウザは、スクリプトが実行されると段階的に解析します。また、コード ブロックがすぐに実行される可能性が低いと想定される場合 (たとえば、関数これは IIFE ではありません。optimize -js README の詳細を参照してください)。

個別<script>のタグを使用することは、少なくとも解析時間と実行時間の両方を取得する最も正確な方法です。あなたのスニペットに加える唯一の変更はこれです：

<script>
  performance.mark('start');
</script>
<script src="myscript.js"></script>
<script>
  performance.mark('end');
  performance.measure('total', 'start', 'end');
</script>

高精度のUser Timing APIの使用に注意してください。これは、追加のボーナスとして、Chrome/Edge/IE 開発ツール (および、必要に応じて Windows Performance Analyzer や WebPageTest などのツール) で視覚化を表示します。

技術的に<script>は、2 番目のスクリプトの最後にマーク/メジャーを追加するだけでよいため、3 番目は必要ありません。しかし、<script>すべての解析時間をキャプチャするには、最初のものが確かに必要です。開発ツールで、マーク/メジャーがすべての初期解析と実行時間を網羅していることを確認できます。

于 2018-07-11T20:34:58.503 に答える
4

これは一種の古い質問であることは知っていますが、自分で解決策を探しているときに遭遇しました。選択したブラウザーで開発ツールを使用してこれを確認できますが、コードで実行したい場合は、これが最終的に使用した方法です。

以下の関数は、ファイルscriptLoadParseDurationへの URL を受け取り、それを要素に配置し、ロード/解析時間をコンソールに記録します。.js<script>

<script>これにより、現在の DOM コンテキスト内でプロファイリングが実行されることに注意してください。したがって、以下の例でjQueryは、スクリプトが削除されたにもかかわらず、グローバル スコープで引き続きアクセスできます。ただし、スクリプトを拡張して、これらすべて<iframe>を分離するために拡張することもできます。

function scriptLoadParseDuration(url) {
  var start;
  var script = document.createElement('script');
  
  // <script> must be attached to the document to actually load the file
  document.querySelector('html').appendChild(script);
  
  // Calculate load/parse duration once script has loaded
  script.addEventListener('load', function scriptLoad() {   
    // Calculate load/parse duration
    console.log('Duration: ' + (Date.now() - start) + 'ms');
    
    // Remove <script> from document
    script.parentElement.removeChild(script);
  }, false);
  
  // Get current time in milliseconds
  start = Date.now();
  
  // Setting the `src` starts the loading. Math.random is used to make sure it is an uncached request
  script.src = url + '?' + Math.floor(Math.random() * 9e9);
}

var url = 'https://code.jquery.com/jquery-3.0.0.min.js';

scriptLoadParseDuration(url);

以下は、削除jQuery後もまだグローバル スコープ内にあることを示す例です。<script>

function scriptLoadParseDuration(url) {
  var start;
  var script = document.createElement('script');
  
  console.log('`jQuery` before attaching: ' + typeof jQuery);
  
  // <script> must be attached to the document to actually load the file
  document.querySelector('html').appendChild(script);
  
  // Calculate load/parse duration once script has loaded
  script.addEventListener('load', function scriptLoad() {   
    // Calculate load/parse duration
    console.log('Duration: ' + (Date.now() - start) + 'ms');

    console.log('`jQuery` once attached: ' + typeof jQuery);
    // Remove <script> from document
    script.parentElement.removeChild(script);
    console.log('`jQuery` after detach: ' + typeof jQuery);
  }, false);
  
  // Get current time in milliseconds
  start = Date.now();
  
  // Setting the `src` starts the loading. Math.random is used to make sure it is an uncached request
  script.src = url + '?' + Math.floor(Math.random() * 9e9);
}

var url = 'https://code.jquery.com/jquery-3.0.0.min.js';

scriptLoadParseDuration(url);

于 2016-07-07T18:44:29.923 に答える
0

比較的新しい答えを持つ非常に古い質問。

Date.now()ミリ秒の精度でタイムスタンプを返します。アプリケーションを 60 FPS で実行するには、16 ミリ秒ごとにフレームを更新する必要があります。私たちのミリ秒メーターは十分に正確ではないかもしれません.

最新の JS ブラウザーにPerformance APIを導入すると、マイクロ秒単位の正確な浮動小数点タイムスタンプが可能になります。

Date.now()測定に使用する代わりに、HTML5Rocks でパフォーマンス APIwindow.performance.now()を使用するための優れたガイドがあります。

于 2017-03-31T21:46:46.317 に答える