iframeで新しいjavascript performance.timing APIを使用していますか？

私は新しいperformance.timing javascript APIを使って遊んでいて、かなり感銘を受けています。iframeで新しいjavascript performance.timing APIを使用していますか？

ここで良い説明http://www.html5rocks.com/en/tutorials/webperformance/basics/

私は、20 URLのからを私たちは世界中のテスターをダブルクリックして、たとえば、のパフォーマンスを得ることができ、簡単なページを作るために必要な場所で、このための重要なユースケースを持っています私たちのサイトは世界中のさまざまな場所から入手できます。

私たちのサイトはHTML5ではありませんので、私たちはこのようなものを直接ページに埋め込むことはできません。だから、私の基本的な計画はiframeに20個のURLを読み込むスクリプトを使った単純な「ラッパー」HTMLページです。うん、私は知っている！ iframeは吸うが、このことはきれいで、効果的である必要はありません！

Javascriptは間違いなく私の強みです！だから、私は独立したiframeごとにこのデータをどのように入手できるかについていくつかの助けが必要です（もちろん、証明済みのものがあれば他の方法論を聞くことに興味があります）。

あなたにそれが（私が思うに、これまで唯一のChromeとIE9で）どのように動作するかの非常に単純なビューを与えること

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'> 
    <title>Performance Test</title> 
    <style type="text/css"> 
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 
     var perf = performance.timing; 

     // Date/Time the page was requested 
     var navStart = perf.navigationStart; 

     // Redirection 
     var redStart = perf.redirectStart - navStart; 
     var redEnd = perf.redirectEnd - navStart; 

     // DNS Lookup 
     var dnsStart = perf.domainLookupStart - navStart; 
     var dnsEnd = perf.domainLookupEnd - navStart; 

     // TCP Connection 
     var tcpStart = perf.connectStart - navStart; 
     var tcpEnd = perf.connectEnd - navStart; 

     // Loading the response 
     var reqStart = perf.requestStart - navStart; 
     var loadStart = perf.responseStart - navStart; 
     var loadEnd = perf.loadEventStart - navStart; 

     // document.writeln("navStart = " + navStart); 
     // document.writeln("Redirect = " + redStart + "-" + redEnd); 

     document.write("DNS LOOKUP = " + dnsStart + "-" + dnsEnd + "ms<br>"); 
     document.write("EST TCP CON = " + tcpStart + "-" + tcpEnd + "ms<br>"); 
     document.write("LOADING RESPONSE = " + reqStart + "-" + loadStart + "ms<br>"); 
    </script> 
</body> 
</html>

編集：私はMawi12345のアイデア@使用

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'> 
    <title>Performance Test</title> 
    <style type="text/css"> 
    </style> 
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
     $(function(){ 
      var iFrame = $('<iframe></iframe>') 
      .attr('src', 'http://www.ikea.com') 
      .appendTo($('body')); 
      console.log(iFrame[0].contentWindow.performance.timing); 
     }); 
     $(function(){ 
      var iFrame = $('<iframe></iframe>') 
      .attr('src', 'http://www.bbc.co.uk') 
      .appendTo($('body')); 
      console.log(iFrame[0].contentWindow.performance.timing); 
     }); 
    </script> 
</body> 
</html>

出典

2012-03-30 Seer

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    var iFrame = $('<iframe></iframe>') 
    .attr('src', 'http://www.google.com') 
    .css('display', 'none') 
    .appendTo($('body')); 
    console.log(iFrame[0].contentWindow.performance.timing); 
}); 
</script>

PS：次のことをしようもFirefox上で動作します。

編集：

テストをperformance.timing iframe対応の新しいコードを試してください：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      var timings = {}; 
      $.each([ 
      'http://bbc.co.uk', 
      'http://ikea.com', 
      'http://www.nasa.gov', 
      'http://google.com'], function(index, url){ 
       var iFrame = $('<iframe></iframe>') 
       .attr('src', url) 
       .css('display', 'none') 
       .appendTo($('body')); 
       var item = { 
        'frame': iFrame[0], 
        'timing': iFrame[0].contentWindow.performance.timing, 
        'status': 0, 
        'logged': 0 
       } 
       timings[url] = item; 
       iFrame.load(function(){ 
        item.status = 1; 
        $('#log').trigger('check'); 
       }); 
      }); 

      $('#log').bind('check', function(){ 
       $.each(timings, function(url, item){ 
        console.log(item); 
        if (item.status == 0 || item.logged) return; 
        item.logged = 1; 
        var timing = item.timing; 
        var navStart = timing.navigationStart; 
        var redStart = timing.redirectStart - navStart; 
        var redEnd = timing.redirectEnd - navStart; 
        var dnsStart = timing.domainLookupStart - navStart; 
        var dnsEnd = timing.domainLookupEnd - navStart; 
        var tcpStart = timing.connectStart - navStart; 
        var tcpEnd = timing.connectEnd - navStart; 
        var reqStart = timing.requestStart - navStart; 
        var loadStart = timing.responseStart - navStart; 
        var loadEnd = timing.loadEventStart - navStart; 
        $('#log').append($(
         '<li><b>URL: ' + url + '</b><br />' + 
         'DNS LOOKUP = ' + dnsStart + '-' + dnsEnd + 'ms<br />' + 
         'EST TCP CON = ' + tcpStart + '-' + tcpEnd + 'ms<br />' + 
         'LOADING RESPONSE = ' + reqStart + '-' + loadStart + 'ms</li>' 
        )); 
       }); 
      }); 

     }); 
    </script> 
</head> 
<body> 
<ul id="log"></ul> 
</body> 
</html>

出典

2012-03-30 14:13:02 windm

ポイントによさそうだ:)私はそこで、単一の機能を持っている場合、私は、有効なPERFデータを取得しますコンソールから。しかし、複数のものがあるとすぐに私はすべてゼロを取得します – Seer

は元々の質問の編集にコードを追加していますので、私はどこにいるのか分かります:) – Seer

最後に休暇を取った遅れて申し訳ありません！最新のコードは確かに面白いですし、頭を抱えてしまえばほぼ理解できます:) 3つの問題が明らかです。 1.すべてのタイミング結果は0msとなる。2.いくつかのドメインは無視される。 http://www.google.co.ukは処理されていないようです。 3. iframeは表示されません - 結果だけです（iframeはコンテンツが正しく読み込まれていることをプロバイダが確認できる優れた機能になります）次のコメントに何か悪い投稿を見つけたら、今いくつかのログを調べます – Seer

iframeで新しいjavascript performance.timing APIを使用していますか？

答えて

関連する問題