Should I copy all my JavaScript sources to a single file?

Question

In the current web project, I use several jQuery plugins and initialize them immediately before the closing body tag. My question, in terms of load time / performance, would it be better if I took all such initializations and copied them into one external js file? plugins are initialized in the same way on all pages of the site, so it would seem that they would download one, a centralized file would be better, no? Thanks for any feedback.

Answer 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 do as little as possible, for mobile this is very important. however, there are a few exceptions; Lazy loading JavaScript files that are not needed when initializing the application are sometimes smart, so they are cached when it is really necessary; using CDN for popular libraries can sometimes lead to a significant increase in performance due to parallel downloads.

save as few downloads as possible, so reduce all JavaScript and CSS, some even minimize HTML.

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

Sometimes perceived performance is better than real performance, which means; Having loaded and processed HTML is more important than an initialized application. this can be done by asynchronously loading JavaScript files (by adding script elements using JavaScript, such as Google, or using script loaders that do this for you). but this leads to new tasks, such as the execution order of the downloaded files or interaction with the page before the script files are fully loaded and parsed.

In the end, it largely depends on the architecture of your online application or site and on what should or should be connected with it, think further by providing a few examples?

PM5544.

Answer 2

Any significant amount of javascript code is better in a shared external javascript file because it can be cached more effectively between all of your pages.

A few lines of code embedded in the page before the closing tag to call some initialization code in an external javascript file are great and don't slow down if this is the best way to initiate initialization.

Answer 3

Yes, you can minimize JavaScript and CSS into separate files with tools such as the YUI Compressor . But transferring all your assets to separate files can be problematic: if the files are large, the browser can only use one TCP stream to download them compared to several simultaneous requests. Read more about this here: Download Fun Way JavaScript Resources

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