SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    New Jersey
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,396
    Mentioned
    147 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by kadence View Post
    what would be the options for interacting javascript with mysql?
    ajax

  3. #3
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  4. #4
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    New Jersey
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this perhaps:

    Code html4strict:
    <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>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    New Jersey
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks JimmyP 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 Code:
    <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>

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Kadence View Post
    Thanks JimmyP How is the wrapper function automatically being called here? I don't follow that - something about the parenetheses syntax?
    That's a named function expression, for which you can find out all of the gory details about them at: Named function expressions demystified
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    New Jersey
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks 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:

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    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.

    Code javascript:
    (function () {
        // code here
    }());
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    sorry to take advantage of this thread
    but what is this

    Code JavaScript:
    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:

    Code javascript:
    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:


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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •