Should I copy all my JavaScript sources into one s

问题:

In a current web project, I'm using several jQuery plugins and initializing them just before the closing body tag. My question is, from a loading time/performance standpoint, would it be best for me to take all such initializations and copy them into a single, externalized js file? the plugins are being initialized in the same way within all pages in the site, so it would seem loading one, centralized file would be best, no? thanks for any feedback.

回答1:

It all depends on what you are developing for, but here are some rules of thumb.

HTTP requests mean overhead (especially over HTTPS) so try to make as little as possible, for mobile this is crucial. there are a few exceptions though; lazy loading JavaScript files which aren't needed when the app initializes is sometimes smart so they're cached when really needed, using a CDN for popular libs sometimes can lead to great performance boost because of paralel downloads.

keep downloads as small as possible, so minify all JavaScript and CSS, some even minify HTML.

make sure cache headers are set correctly (some set them to a year or more), and when a new version of your script is deployed, append the src attribute of the script element with a version number to counter caching, like: <script src="myapp.js?v=2"></script>

Sometimes perceived performance is better than real performance, meaning; having the HTML loaded and rendered is more important than the application initialized. this can be done by asynchronously loading JavaScript files (by inserting script elements with JavaScript like Google does or by using script loaders which do this for you). but this leads to new challenges like the execution order of loaded files or interacting with the page before the script files are fully loaded and parsed.

In the end it's heavily dependent on the architecture of your online app or site and what the interaction with it is or should be, care to elaborate further by giving some examples?

PM5544.

回答2:

Any significant quantity of javascript code is better off in a common externalized javascript file because it can be cached more efficiently between all your pages.

A few lines of code inline in the page before the closing body tag to call some initialization code in an externalized javascript file is perfectly fine and doesn't slow anything down if that's the best way to trigger the initialization.

回答3:

Yes, you can minify JavaScript and CSS into single files using tools like YUI Compressor. But putting all of your assets into single files can be troublesome: If the files are large, the browser can only use a single TCP stream to download them, versus multiple simultaneous requests. Read more about this here: Loading JavaScript Resources the Fun Way

As for where to put the <script> tags in your HTML, the answer is at the bottom of the page before the closing </body> tag. Check out Google's Web Performance Best Practices site.