我們使用Jiffy的修改版本來測量實際的客戶端性能。僅當某些頁面元素已加載時測量
我們所做的最重要的事情就是衡量收到請求的時間和頁面加載事件在瀏覽器中觸發的時間。
在一些頁面上，我們有iframe元素指向我們無法控制的外部網站 - 它們有時需要很長時間才能加載。目前，我們頁面的頁面加載事件僅在iframe完全加載後觸發（並且它自己的加載事件觸發）。
我想這些測量分離 - 所擁有的一切，包括iframe一個測量後裝，也沒有iframe一個測量 - 即當頁面加載會發生，如果我們沒有一個iframe 。
到目前爲止，我設法做到這一點的唯一方法是在頁面加載事件後將iframe添加到DOM，但延遲了iframe的加載。
任何想法？謝謝！
編輯：賞金結束了，感謝您的幫助和想法！我選擇了Jed的答案，因爲它給了我一個新的想法 - 開始加載iframe，但「暫停」它們，以便它們不會影響頁面加載（通過臨時設置src="about:blank"）。我會嘗試添加更詳細的結果摘要。
你可以做到這一點存在多個iframe而不被動態地添加他們：
about:blank的src屬性，onload處理程序以捕獲每個幀的加載時間，然後src屬性設置爲其原始值。我創建了一個frameTimer模塊包括兩個方法：
init方法需要在</body>標記之前調用，measure方法被調用上頁面加載，這會對結果進行回調。結果對象是一個哈希這樣的：
{
iframes: {
'http://google.co.jp/': 1241159345061,
'http://google.com/': 1241159345132,
'http://google.co.uk/': 1241159345183,
'http://google.co.kr/': 1241159345439
},
document: 1241159342970
}
它返回一個整數每個負載的時間，但可以很容易地更改爲只返回從文件內負荷差異。
下面是它在行動工作示例，這個JavaScript文件（frameTimer.js）：
var frameTimer = (function() {
var iframes, iframeCount, iframeSrc, results = { iframes: {} };
return {
init: function() {
iframes = document.getElementsByTagName("iframe"),
iframeCount = iframes.length,
iframeSrc = [];
for (var i = 0; i < iframeCount; i++) {
iframeSrc[i] = iframes[i].src;
iframes[i].src = "about:blank";
}
},
measure: function(callback) {
results.document = +new Date;
for (var i = 0; i < iframeCount; i++) {
iframes[i].onload = function() {
results.iframes[ this.src ] = +new Date;
if (!--iframeCount)
callback(results)
};
iframes[i].src = iframeSrc[ i ];
}
}
};
})();
這個HTML文件（frameTimer.html）：
<html>
<head>
<script type="text/javascript" src="frameTimer.js"></script>
</head>
<body onload="frameTimer.measure(function(x){ alert(x.toSource()) })">
<iframe src="http://google.com"></iframe>
<iframe src="http://google.co.jp"></iframe>
<iframe src="http://google.co.uk"></iframe>
<iframe src="http://google.co.kr"></iframe>
<script type="text/javascript">frameTimer.init()</script>
</body>
</html>
這可能在很多做用jQuery減少代碼（並且不那麼突兀），但是這是一個非常輕量且無依賴的嘗試。
我不熟悉的瞬間本身，但在過去，我用粗定製的功能做了類似的測試，大致是這樣的（5分鐘從內存中輸入）：
<html>
<head>
<script>
var timer = {
measure: function(label)
{
this._timings[label] = new Date();
},
diff: function(a,b)
{
return (this._timings[b] - this._timings[a]);
},
_timings: {}
}
</script>
</head>
<body onload="alert(timer.diff('iframe.start','iframe.done'));">
<!-- lorem ipsum etc -->
<script>timer.measure('iframe.start');</script>
<iframe src="http://www.google.com" onload="timer.measure('iframe.done');"/>
<!-- lorem ipsum etc -->
</body>
</html>
從這裏你可以看到相關部分只是在遇到iframe之前記下一個datestamp，然後向iframe的onload事件添加一個事件處理程序（無論iframe源的域如何，它都會工作，並且不需要修改內容）進行另一次測量（通常我會使用addEventListener/attachEvent添加這些事件，但您明白了）。
這會給你一個iframe的時間範圍，你可以從總量中減去這個時間範圍，從而給你一個合理的加載時間和不加iframe的想法。
HTH
感謝annakata。我認爲page_load_time - ！iframe_load_time = page_load_time_without_iframe，因爲其他元素被裝在與iframe和其元素平行的，但也許我們不能做任何事情更好:( – orip 2009-04-27 12:12:08
這是我的感覺。唯一的防彈選擇就是簡單地測試帶有和不帶iframe的版本，如果你想要一個粗糙的並且準備好的，你必須使用類似於上面的東西。我不認爲他們會在大多數時間太棒了，但這取決於你的測試平臺。在任何接近現實用例的情況下，你都不可能瓶頸帶寬，內存或處理器。 – annakata 2009-04-27 14:07:42
我不知道這是否會幫助你：
在jQuery用戶得到我的代碼窗口火災的onload事件之前執行長。
這是jQuery的的一個重要功能，只要加載頁面的DOM準備好允許處理（參見：jQuery Ready Event）
然後我可以將事件處理程序添加到每一個可能完成加載「後」元素包括iframe。
但我明白，這可能是不夠的你的情況，你想擁有「一切」不作爲I幀的裝載時間。我不確定如果將iframe源設置爲jQuery就緒處理程序，窗口的onLoad事件會發生什麼。我想他們會獨立加載，但需要檢查。
在另一邊......這個準備函數顯示，當人們將看到您的網頁「建設」。圖像和東西的加載大多是次要的人類感知。這就是爲什麼窗口顯示它完成加載之前有一段時間了:-)
我會建議「domready中」活動爲OderWat有一個例外建議桌面：你並不需要jQuery來實現這個事件。在http://dean.edwards.name/weblog/2006/06/again/這對所有三個（實際上是4個）主流瀏覽器都有很好的解釋。
其實，如果你在一個特定的瀏覽器中運行的測試，很容易讓你實現這個事件進行跟蹤。
希望它有幫助。
謝謝傑德，很酷！我沒有動態添加iframe的問題。我不想延遲iframe內容的加載，並且只在主體的「加載」事件中設置src可能會導致這種情況。另一方面，預先設置它，然後在body標籤結束之前重置它，實際上可以使瀏覽器開始下載幀組件，停止父級的時間，然後繼續。可能是一個好主意，我將不得不測試它是否有效。 – orip 2009-05-03 12:13:25
沒問題orip。你可以在這裏看到結果：http：//s3.amazonaws.com/frameTimer/index.html – 2009-05-03 15:40:20