Objective: time how long the browser takes loading a page, from the earliest point possible in its loading process, starting as soon as possible after the server has started sending it data.
Context: new feature to existing set of scripts that stores web performance data. Most of the existing app is on the server-side, the new feature is for the client side.
This is where I need help. I am looking for the earliest event to use for a script like this, which is using
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.post("<?= $baseURL?><?= $pageparts.$common ?>/saveData.php",
{
typeOfRecord:"docready",
thisURL:"<?= $thisURL ?>"
},
function(data,status){
;
}
);
});
</script>
Here is a screenshot of what results look like. I am looking for the earliest and lastest events or points in the browser load process, starting from the time it starts receiving data from the server in response to the request it has made.
You can run a sample at this link
Here is what I am having a problem figuring out:
- What events should be used to record the earliest moment when the browser is receiving and starting to render the page source sent to it by the server, and the last thing done by the browser to be considered loaded.