Testing the time to load JavaScript and DOM with jQuery

We have a lot of ways to get the time for loading JavaScript and DOM on web pages; and this JavaScript article presents one of methods that use jQuery to do this; that's jQTester.

Please go to the full post for the download address and the guide to setup it.

Sampled by © JavaScriptBank.com

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.

Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future
The Ultimate Checklist for HTTP to HTTPS Migration

Top view articles
65 Free JavaScript Photo Gallery Solutions
Top 10 Beautiful Christmas Countdown Timers
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
Top 10 Free Web Chat box Plug-ins and Add-ons
50+ Beautiful Resources of HTML Form using CSS and JavaScript
Top 10 Best JavaScript eBooks that Beginners should Learn
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes

Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com