Is it better to load many small JavaScript files or one large JavaScript file?
javascript
Solution
Generally, loading more files incurs more overhead in HTTP than combining them into fewer files. There are ways to combine files for all kinds of content:
- For images, use CSS sprites.
- For javascript, compile your client-side code and libraries into one file, and minify to reduce size.
- For css, you can do something similar to the above. hem compiles stylus into one css file, for example, and this can help organizationally as well.
- Additionally, when you concatenate Javascript and CSS, your webserver or reverse proxy can send them in compressed form for faster page loads. This will be more efficient for larger files as there is more to gain from compression.
Problem
I have noticed in chrome that if I load an image as a base64 string and then scroll through that part of the page it will slow down. I have also noticed that when I navigate out of a tab with my Javascript in it and then move back to that tab it will be slow for a few seconds as though V8 is recompiling the js. There are three options I can think of but I don't know which is best: - load a tiny loading page first and handle subsequent loading eloquently - load one huge js or css file with everything (jquery + my code + etc) - clump certain codes together (use jquery cdn but group my code together) What is the best way to get your js loaded as quickly and eloquently as possible?