2011-11-29 58 views
8

我寫了一個小插件來獲取頁面加載/渲染時間。它收集$(document).ready的結束時間,並且我已經將代碼片段收集起始時間緊接在<title>標籤之後。jquery可以涉及哪些最早和最新的事件?

我希望這樣做不那麼突兀,所以看起來應該有一個早於事件的事件。在那裏我可以收集最早可測量的頁面開始時間。

這裏是目前突兀的JavaScript

<title></title> 
<script type="text/javascript"> 
    var startTime = (new Date()).getTime(); 
</script> 

這裏是插件:

(function ($) { 

    $(document).ready(function() { 
     var endTime = (new Date()).getTime(); 
     var millisecondsLoading = endTime - startTime; 

     $.get('hicmah.ashx?duration=' + millisecondsLoading, function (data) { 
     }); 
    }); 

})(jQuery); 
+0

對於在更多代碼執行之前加載頁面所花費的時間將是一個現實指標。 – zzzzBov

+0

包含jQuery的JavaScript在文檔準備就緒之前不會執行任何操作。 如果Firebug和Chrome中的調試控制檯不適合您的需求,那麼可以使用類似boomerang.js的東西? http://yahoo.github.com/boomerang/doc/ – anderssonola

+1

除非我誤解,那麼立即執行一個函數呢?然後它會在解析後立即運行。 – pimvdb

回答

1

讓插件做這項工作是不可能的,因爲插件可以使用anywh在頁面上。實現這一目標的最佳方式是在html標記的開始處獲得正確的時間,並在html標記結束之後立即獲得最佳時間。連接到`ready`事件的

2

您可以使用onreadystatechangeDOMContentLoadedonload,這是jQuery的掛鉤與ready事件墊片。

if (document.addEventListener) { 
    document.addEventListener('DOMContentLoaded', callback, false); 
    window.addEventListener('load', callback, false); 
} else { 
    document.attachEvent('onreadystatechange', callback); 
    window.attachEvent('onload', callback); 
} 

或者,你可以確保你的頁面在頁面頂部的腳本標籤,並在底部:

<html> 
    <head> 
    <script type="text/javascript"> 
     window.begin = new Date(); 
    </script> 
    ... 
    </head> 
    <body> 
    ... 
    <script type="text/javascript"> 
     window.end = new Date(); 
    </script> 
    </body> 
</html> 
0

這個答案將幫助:

Load and execution sequence of a web page?

> roughly the execution flow is about as follows: 
> 
> The HTML document gets downloaded The parsing of the HTML document 
> starts HTML Parsing reaches <script src="jquery.js" ... jquery.js is 
> downloaded and parsed HTML parsing reaches <script src="abc.js" ... 
> abc.js is downloaded, parsed and run HTML parsing reaches <link 
> href="abc.css" ... abc.css is downloaded and parsed HTML parsing 
> reaches <style>...</style> Internal CSS rules are parsed and defined 
> HTML parsing reaches <script>...</script> Internal Javascript is 
> parsed and run HTML Parsing reaches <img src="abc.jpg" ... abc.jpg is 
> downloaded and displayed HTML Parsing reaches <script src="kkk.js" ... 
> kkk.js is downloaded, parsed and run Parsing of HTML document ends 
相關問題