Loading Javascript : HTTP Requests -v- Asynchronous Loading

Question

I'm having difficulty in deciding which approach is better in terms of site performance.

Either to have all required jQuery plugins in one file to be included on every page on the site OR split the plugins out to individual files and use the jQuery.getScript() method to load them as and when required.

Is there any real benefit in loading the scripts asynchronously over one http request?

All my Javascript will be minified and gzipped.

Thanks!

The only way to know for sure is to try both and measure the results for your specific case. — Day
– Day, Commented Dec 20, 2010 at 17:41
I get the benefits of loading just one js file (with frameworks loaded via CDN) - that works on desktop browsers. But my concern is that increasingly, sites are accessed via mobile devices which have very small caches (iPhone has 25k) which means they will always have to load that one js file. Could creating a offline storage manifest - for those supporting mobiles - work? — jigglyT101
– jigglyT101, Commented Dec 22, 2010 at 0:24

Community · Accepted Answer · 2017-05-23 12:04:14Z

2

It's not so simple and depends on the distribution of javascript across your site. Have a look at this question : Which is better for JavaScript load-time: Compress all in one big file or load all asynchronously?

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Dec 20, 2010 at 7:19

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Borthiry · Accepted Answer · 2010-12-20 18:30:38Z

2

From my poit of view the best solution until now is controljs

Read the complete post http://www.stevesouders.com/blog/2010/12/15/controljs-part-1/

answered Dec 20, 2010 at 18:30

Martin Borthiry

5,32610 gold badges44 silver badges59 bronze badges

Comments

Rudie · Accepted Answer · 2010-12-20 01:32:23Z

0

One request will be better for performance. Period. Only downside is, every time one of the files changes, the whole thing changes (and will have to be downloaded again). Plugins won't change much, so I'd put everything (as much as possible) in 1 file.

Put jQuery core in that file as well. And your custom javascripts as well. Just make sure it's in the right order :)

answered Dec 20, 2010 at 1:32

Rudie

54.2k42 gold badges137 silver badges176 bronze badges

1 Comment

El Yobo Over a year ago

Not necessarily true; if long term caching is used (so that no HTTP request is sent) then there is no performance penalty and may be performance gains (only processing the required scripts, plus the page loads faster as scripts are only downloaded once the page is rendered).

Niklas Wulff · Accepted Answer · 2010-12-20 17:30:48Z

0

Try the YSlow plugin to Firefox and try your different setups.

That said, minifying your js to one file would be an easy way with great results. You will get one file, and it's often very much smaller than the sum of the parts.

answered Dec 20, 2010 at 17:30

Niklas Wulff

3,5323 gold badges26 silver badges45 bronze badges

Collectives™ on Stack Overflow

Loading Javascript : HTTP Requests -v- Asynchronous Loading

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related