Tracking the time it takes to load a page, and storing with MySQL?

JavaScript
1

I’d like to track how long it takes users to load a page, and then save that information using MySQL. The fields I’d probably like to populate are domain, path, load time, user IP and date. So each time a user loads a page, a new row would be inserted with this information. I’d like to use JavaScript for this so that only real users are tracked.

I was thinking of using the JavaScript to calculate the load time and then call an <img> tag which opens a PHP script rather than an image, and passes the page URL and loading time to the PHP file via GET. But I’m not sure if that would work or is the best approach.

How does one track a load time using JavaScript, and what would be the options for interacting JavaScript with MySQL?

2

interacting MySQL and JavaScript can only be done via AJAX. But before going for that, I suspect that, only JavaScript can give you the accurate loading time. If you have access in the page loading, better do it with server side script like PHP. That would be more accurate i think.

3

Yep, that allows the interpretor to know that it’s an expression, instead of a declaration, so that you can then invoke the function expression at the same time a declaring it.

Function expressions are also commonly used in a self-invoking context where they’re used to provide closure, in order to help protect the global namespace.


(function () {
    // code here
}());
4

Thanks :slight_smile: So the parentheses make it a grouping operator case, which makes it an expression rather than a declaration-

A somewhat less obvious example of function expression is the one where function is wrapped with parenthesis — (function foo(){}). The reason it is an expression is again due to a context: “(” and “)” constitute a grouping operator and grouping operator can only contain an expression:

5

Something like this perhaps:


<html>
    <script>
        (function(){
            var start = +new Date;
            window.onload = function() {
                var end = +new Date;
                alert('Page loaded in ' + (end - start) + 'ms');
            };
        }());
    </script>
    ...
    ...
    <head>....</head>
    <body>....</body>
</html>
6

Hi,
sorry to take advantage of this thread
but what is this


var start = +new Date;

It looks like a hack to get a numeric representation of the current date/time.

you could also use something like:


var start = Date.now();

Or, you could not use numbers and keep them in date/time format so that you can use the getTime method instead:


var start = new Date();
...
var end = new Date();
alert('Page loaded in ' + (end.getTime() - start.getTime()) + 'ms');
7

That’s a named function expression, for which you can find out all of the gory details about them at: Named function expressions demystified

8

Thanks JimmyP :slight_smile: How is the wrapper function automatically being called here? I don’t follow that - something about the parenetheses syntax?

Here’s some sample code of what I’m using now with the AJAX. With the onreadystatechange and output div parts being optional.

<html>
<head>
<script>
(
function trackLoading(){
	var start = +new Date;
	window.onload = function() {
		var end = +new Date;
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				document.getElementById("output").innerHTML=xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","test.php?host="+location.host+"&path="+location.pathname+"&q="+(end-start),true);
		xmlhttp.send();
	};
}
()
);
</script>
</head>
<body>
<div id="output"><b>Output here.</b></div>
</body>
</html>
9

How do I measure loading time with Javascript then? What functions/code would be used?

I presume it would be something like startdate code in the header, and enddate code with the AJAX call near the footer. Don’t know if that’s the right structure though.

10

ajax