2011-11-29 3 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

'ready'イベントへのフックは、より多くのコードが実行される前にページが読み込まれるまでの現実的な指標になります。 – zzzzBov

+0

JavaScript、jQueryが含まれています。ドキュメントを準備する前に何もしません。 FirebugとChromeのデバッグコンソールがあなたのニーズに合わない場合は、boomerang.jsのようなものがありますか? http://yahoo.github.com/boomerang/doc/ – anderssonola

+1

私が誤解していない限り、すぐに機能を実行するのはどうですか?それは基本的にはそれが解析されるとすぐに実行されます。 – pimvdb

答えて

1

プラグインを使用すると、このジョブは実行できません。プラグインはanywhページ上に表示されます。これを達成する最善の方法は、htmlマークアップの開始時とhtmlマークアップの終了直後に時間を得ることです。これは最適な時間を与えます。

2

あなたはjQueryのreadyイベントシムとにフックするものである、onreadystatechangeDOMContentLoaded、およびonloadを使用することができます。

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 
関連する問題