0

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)

Krease
  • 15,805
  • 8
  • 54
  • 86
Rickedo
  • 81
  • 1
  • 5
  • 1
    How do you load a portion of the script? – noahnu Mar 21 '16 at 19:34
  • Depends on how many of your users visit the one specific page. – Kevin B Mar 21 '16 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 Mar 21 '16 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 Mar 21 '16 at 19:44

1 Answers1

9

Realistically, 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 combining, 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 combined/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)

Community
  • 1
  • 1
Krease
  • 15,805
  • 8
  • 54
  • 86
  • Thank you, Chris, this is very helpful – Rickedo Mar 22 '16 at 17:34
  • Question to whoever downvoted - is there something you found not useful about this answer that I can improve? – Krease Mar 22 '16 at 18:17
  • I would assume that the mutiple files solution would also be minified and take advanges of the individual peices being cached from last time they were used. Doesnt really address the question of if its faster to laod the same optimized code from more than one file. – Brad Apr 24 '23 at 03:23