CODEWITHSUNDEEP
javascript
will
will

Reputation: 4063

What are the best practices for loading javascript with the least amount of impact on display performance of the page?

Is there a way to download javascript without executing it? I want to decrease my page load times so am trying to "lazy load" as much javascript onto the page while the user is idle. However I don't want the javascript to execute, I just want it to be in the browser cache.

Should I use an object tag? I noticed that I can use a LINK tag but that makes the browser think it's css which has a negative impact on my ui perf / responsiveness.

Upvotes: 3

Views: 907

Answers (4)

user177800
user177800

Reputation:

The best practices way to deal with external javascript is to have it load after everything else on the page by putting it at the bottom of the page. Then everything that can be rendered will be and display and then the javascript at the bottom of the page will load and be compiled and cached. Of course this only works if the javascipt is a library of functions that don't need to be executed mid-page, in that case, you are stuck with serial javascript loading compiling and execution regardless.

Require.JS is a great library for automatically managing when your javascript loads.

Upvotes: 1

David Mårtensson
David Mårtensson

Reputation: 7600

As long as you have all code in functions or classes and nothing in global scope nothing will execute.

You can then start your script with a call from 

window.load(function() {  //your initialisation here });

This will let the whole page load before running any scripts.

You could also add script references via script to make sure they load after any images in the page.

Just add a script element to head using script and it will load. These pages has examples for this:

http://unixpapa.com/js/dyna.html

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

This way if you have a slow connection or a sever that is overloaded, the visible elements will be loaded first by the browser.

Upvotes: 2

jacobangel
jacobangel

Reputation: 6996

As far as I know, there is no cross-browser compliant way to get around JavaScript loading in serial. If your javascript does something when it is loaded, you need to refactor your code. For instance, you don't write your jQuery commands/actions/code in the jQuery library script; you link the jQuery library and then put your jQuery commands into a separate file. You should do the same thing with your custom libraries. If this isn't possible, you have a big problem with the architecture of your code.

Also, make sure you stick non-executing JS at the bottom of the page near the </body> tag. This will allow everything else to load first, so that the bulky JS libraries don't slow down things like CSS and images.

Upvotes: 1

yankee
yankee

Reputation: 40740

You could load the file using the XMLHttpRequest object in JavaScript. (Aka AJAX). (end then of course just discard the result ^^).

Upvotes: 0

Related Questions