Requests to server how to scale for larger traffic demand

Question

I'm no expert on servers so i wanted to ask which is my best option for handling larger traffic in the long term..

I have two main options here with the use of javascript:

1) Place all HTML into one file, request once with Javascript, then use div id's to separate each page to their own JS variable to use when user visits a given link. This means 1 request for all HTML pages (not including CSS file and images), down side being the data being sent is alot larger, and it loads HTML pages the user may not even visit.

2) Keep the HTML to their own HTML pages and request the given HTML page when the user visits the page. This will result in more requests, but less data sent "per request" as well as only requesting content the user actually visits.

Which of the is generally going to be the best option long term ?

Answer 1

I would say 2 is the better option, for both development and performance.

Putting all your HTML in one file probably won't be scalable long-term. As your site gets more complex the file will just get larger and larger. This makes it harder to work on because you will have to scroll through the file too much to find what you need. Also, if you're working on this with other people merge conflicts will become more of a problem.

More requests isn't really a bad thing; single-page apps for example make LOTS of small requests, but often your static content will be cached and your dynamic content is small JSON over the wire.