|
So
I have been trying to figure out a really simple, easy way to test the
load times of my Javascript in the page, and have ended up creating a
simple load time tester using jQuery called jQTester.
 jQTester Displaying its results This assumes you are using jQuery, and are running using version 1.3.1 - however it should work on most versions as the jQuery I am using is pretty lightweight.
The concept is simple - you have 2 files called start.js and end.js. Place start.js at the top, just after your <HEAD> tag, and place end.js just before </body>. Using javascript timers I am capturing the length of time between start.js loading, and the document.ready jQuery function running (when, all javascript and DOM elements should be loaded and ready to use).
Why place end.js before </body> ?
So, ideally you are placing your javascript calls at the end of the
HTML document. Why? because javascript file downloads block parallel
downloads in the browser. Browsers can only download 2 files per
hostname at any one time, so by placing them in the <HEAD> you
are in theory stopping anything else from loading within the page
whilst all your javascript is being loaded. By placing them at the end
of the HTML document, images etc have the chance to load first, so the
perception for the user is faster load times.
So the browser will load your HTML document top to bottom. Based on
the assumption that no other javascript needs to load after
</body> is called, the best place to stop the timer is at that
last point. That's when the clock stops, and we assume we're all loaded.
jQTester 0.1
So I'm not really 100% sure if this is the right way to go about
this, but anyway - I've packaged this up as "jQTester" and am attaching
version 0.1 for your perusal. It would be good to get some feedback on
how I can move forward with this, as I am keen to develop a tool or
plugin that can sit within the page code, rather than being a browser
add-on etc.
Install instructions: Use jQuery, place start.js after the <head> tag and place end.js before the </body> tag.
|