在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，因此我們不能直接在頁面中嵌入這樣的內容（每月有十億頁，我們不希望這麼多的數據）。所以我的基本計劃是一個簡單的'包裝'HTML頁面，其中包含將20個url加載到iframe中的腳本。是的，我知道！ iframes吸，但這件事並不需要很漂亮，只是有效！

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：performance.timing也適用於Firefox。

編輯：

請嘗試新的代碼的iframe performance.timing測試：

<!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 2012-03-30 14:39:34

將代碼添加到原始問題的編輯，所以你可以看到我搞砸了:) – Seer 2012-03-30 14:41:40

非常感謝時間和精力 - 自去年以來一直在度假張貼很抱歉的延遲！最新的代碼非常有趣，一旦我將我的頭部纏繞起來，我幾乎可以理解它:)有三個問題很明顯。 1.所有計時結果都以0ms顯示2.某些域被忽略，例如http://www.google.co.uk根本看起來沒有被處理。 3.沒有iframes顯示 - 只是結果（iframes將是一個很好的功能，供應商看到他們的內容也加載正確。現在我會挖掘一些日誌，如果我發現任何錯誤張貼在下一個評論 – Seer 2012-04-10 13:21:03

在iframe上使用新的JavaScript performance.timing API？

回答

相關問題