What is the earliest and latest events that jquery can hook into?

Question

I've written a tiny plugin that gets the page load/render time. It collects the finish time at $(document).ready and I've put the code snippet that collects the start time right after the <title> tag.

I'd like this to be less obtrusive, so it seems there should be an earlier event than .ready where I can collect the earliest measurable page start time.

Here is the currently obtrusive javascript

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

Here is the plugin:

(function ($) {

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

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

})(jQuery);

hooking to the `ready` event will be a realistic metric for the time it takes the page to load before more code executes. — zzzzBov, Nov 29 '11 at 14:41
JavaScript, jQuery included, will not do anything before document ready. If the debug consoles in Firebug and Chrome don't fit your needs, something like boomerang.js may ? http://yahoo.github.com/boomerang/doc/ — anderssonola, Nov 29 '11 at 14:44
Unless I'm misunderstanding, what about executing a function immediately? Then it will basically run as soon as it's parsed. — pimvdb, Nov 29 '11 at 14:46
@soderslatt I don't think it's true that no Javascript will execute before DOMReady. Inline script tags within the body will fire as the DOM is processed before dom ready. http://stackoverflow.com/questions/2342974/when-does-the-browser-execute-javascript-how-does-the-execution-cursor-move — Ben L, Nov 29 '11 at 14:54
@soderslatt the plug in is a hit counter. The hit counter is attempting to collect a variety of information about the hit, including performance data, so it can't take a dependency on a users plugin. — MatthewMartin, Nov 29 '11 at 15:31
ancient question, but for those still reading, `performance.now()` might be helpful depending on browser support required... https://developer.mozilla.org/en-US/docs/Web/API/Performance/now — ptim, May 02 '17 at 00:43

score 2 · Answer 1 · answered Nov 29 '11 at 14:43

You can use onreadystatechange, DOMContentLoaded, and onload, which is what jQuery hooks into with the ready event shim.

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

Alternatively, you could make sure that your page has a script tag at the top of the page, and at the bottom:

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

score 1 · Accepted Answer · answered Nov 29 '11 at 14:46

Having the plugin do this job is not possible because the plugin can be used anywhere on the page. The best way to achieve this is get the time right at the start of the html markup and right after the end of the html markup, it will give you the best time.

score 0 · Answer 3 · edited May 23 '17 at 11:46

This answer will help:

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

What is the earliest and latest events that jquery can hook into?

3 Answers3