CODEWITHSUNDEEP
htmlajaxweb
Johann Chaves Saborío
Johann Chaves Saborío

Reputation: 421

Single page web app: single html file or several files loaded using ajax?

I have this relatively large web app, it is a single page with ajax calls for the business logic.

Currently I have a small html file that loads all css and js files, and then loads the actual content of the page using ajax, so I have like 15 html files to load a single page (each html file is a "div" in the main html page.

Several files are easier to maintain, but my question is: what is better in terms of performance / User experience?

Keep it as is now (several files loaded async) OR have a script that joins all the files on "compile" time (when deploying)?

I understand that having a single html file is more efficient in terms of network performance, but on the other hand a small file will load faster, and the rest of the content will load after a "loading" dialog.

Upvotes: 3

Views: 413

Answers (1)

Stuart Wakefield
Stuart Wakefield

Reputation: 6414

It is better to have less files as scripts block and load sequentially, or use deferred loading. There is normally a per domain limit for parallel downloads although I cannot for the life of me remember what it is.

For production if you compile a single payload for the scripts together and all of the stylesheets together you will likely reap some performance benefits. I would also consider minifying the output as well. Yahoo Compressor and Google Closure Compiler are two tools that can be used to achieve this.

This will tell you more about the techniques to stop blocking... http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

Some performance tips, not limited to JavaScript...
http://developer.yahoo.com/performance/rules.html

Upvotes: 2

Related Questions