CODEWITHSUNDEEP
javascriptjquery
NoTiG
NoTiG

Reputation: 121

improving website performance by dynamically loading javascript?

I was wondering if this is something normally done or possible (I am a novice) suppose you have kind of a heavy javascripted site. A web app page basically. What if part of the page is a mailbox... and the user doesn't necessarily use it right away. Could you possibly download the javascript that the mailbox requires after the page has loaded or maybe even as they need to use the mailbox? I saw this from another question:

$.getScript("my_lovely_script.js", function(){

alert("Script loaded and executed.");

Upvotes: 0

Views: 159

Answers (3)

jfriend00
jfriend00

Reputation: 707158

Yes, you can load non-essential scripts "later" to avoid processing them before displaying the initial page.

There are several approaches:

  1. You can mark the script tag as defer or async (see MDN for details) so the browser will load it asynchronously and not hold up page display for the loading or running of the script.
  2. You can load it dynamically only as needed.
  3. Load scripts at the end of the <body> right before the </body> tag so the page can display before they are loaded.

Before you proceed down this path, I would highly suggest that you measure the loading resources of your page and find out where the time is really going. Premature optimization before you've measured where the time is actually going is rarely the most effective way to improve things. The Chrome debugger can show you a lot of data about resource load times.

Also, remember that a design that optimizes for effective caching can be highly effective since one your scripts are loaded for the first page on your site, they will be cached for all future pages and will load very, very quickly from the browser disk or memory cache.

Upvotes: 3

hexist
hexist

Reputation: 5240

Yes you can delay loading of your scripts, however what you should probably do is go to something like https://developers.google.com/speed/pagespeed/ and see what's taking so long and optimize on that. It's very possible that you'll see more overall performance by employing techniques such as loading from multiple domains simultaneously, and using tools like https://github.com/mishoo/UglifyJS2 to combine, compress, and minify your js code

Upvotes: 0

Mike M
Mike M

Reputation: 212

Yes, this is possible and is done.

You can add script tags to the document when ever you want. You can also use a utility like LabJs to help you do it.

http://labjs.com/

Upvotes: 0

Related Questions