I have a question regarding the loading of javascript files. From what I've read so far, the general consensus appears to be "less script files is better", but I could not find an answer to my next question:
Say you have a javascript file with 4000 lines of code, but only 500 lines of that are used on one specific page. Would it make sense (performance-wise) to only load this part of the script when that specific page is opened (using something like if URL == X then load {})? Or would it be better if you load the entire script all at once?
(Please assume the script in question can be refactored into multiple files)
I have a question regarding the loading of javascript files. From what I've read so far, the general consensus appears to be "less script files is better", but I could not find an answer to my next question:
Say you have a javascript file with 4000 lines of code, but only 500 lines of that are used on one specific page. Would it make sense (performance-wise) to only load this part of the script when that specific page is opened (using something like if URL == X then load {})? Or would it be better if you load the entire script all at once?
(Please assume the script in question can be refactored into multiple files)
Share Improve this question edited Mar 21, 2016 at 20:57 Krease 16.2k8 gold badges57 silver badges91 bronze badges asked Mar 21, 2016 at 19:32 RickedoRickedo 912 silver badges5 bronze badges 4- 1 How do you load a portion of the script? – noahnu Commented Mar 21, 2016 at 19:34
- Depends on how many of your users visit the one specific page. – Kevin B Commented Mar 21, 2016 at 19:34
- There are too many factors that affect it that it's impossible to say one way or another. In overwhelming majority of cases it doesn't make any practical difference no matter which way you do it. – JJJ Commented Mar 21, 2016 at 19:39
- 1 I think the idea is when you develop, you modularize your features/functions, so that you can bundle different modules into single files when publishing each page. – ailerifren Commented Mar 21, 2016 at 19:44
1 Answer
Reset to default 9Realistically, breaking up the javascript loaded by functionality at a granular level (~500 lines as suggested in your question) will not give you much better performance. You'll get a lot more benefits from bining, minifying, and optimizing your javascript. Don't forget to minify your CSS as well.
This will generally speed up download times because it not only reduces the number of bytes transferred (what you're focusing on), but actually makes your javascript smaller (making variable names smaller & removing whitespace), and also reduces the number of HTTP requests (this actually has a large effect on page performance). Check out this article for a more in depth demo of how this has an effect on speed.
Additionally, by always using the same bined/minified file (instead of a different one for each page in your app), you take advantage of the browser caching your script on first load, meaning after the initial load, your page gets its scripts from cache.
(Note - I linked to Google PageSpeed for optimization tips above - there is a lot more than this that is useful to know for doing js optimizations)