One page web apps and inline javascript and CSS

Question

We've built what is called a one page web app(a single html page + ajax)
In the pursuit of shaving as much http calls as possible, we bundled the JS and CSS in 2 files.

Meanwhile we took a look at the way Google Buzz for mobile is built and there are some interesting points:

• inline SCRIPT and STYLE
• no external JS and CSS
• data:images in CSS instead of url(...)

Thus we went further and "inlined" the 2 JS and CSS files in SCRIPT and STYLE tags. Removing 2 precious http calls.

Anyone experienced some troubles doing that on desktop browsers ?

I'm not trying to open a religious debate about unobtrusivity ;) It is about performance, network latency, mobile pages, etc...

Answer 1

Inlining and linked CSS and script files are equivalent. There's no difference other than the HTTP gets.

Answer 2

Never. Put them in the html head so they load first and don't fret.

Answer 3

Is performance a problem you currently have? What Google does to support 100ks of concurrent users isn't necessarily what you should be doing. I've found it much easier to maintain code when things like CSS and JavaScript are kept in separate include files. I only break what I consider good coding practices when there's a compelling reason. It's hard to imagine a one-page app is being killed by traffic for two include files that will be cached by user browsers after first use.

Answer 4

Virtually no-one has to deal with the traffic Google do. I'd say it's virtually never worth following Google's lead in optimisations, because they just don't apply in the real world.

Answer 5

It is worth noting here that inline CSS <style/> blocks trump linked CSS files when there is a conflict.

For example

<style type="text/css">
  div .whiteBG {
    background-color: #fff;
  }
</style>

trumps a linked CSS file containing

  div .whiteBG {
    background-color: #ccc;
  }

even if the linked files are called last.

Answer 6

I think you are over looking the fact that nobody actually coded the output you see with a system like Google Buzz, or Gmail. They depend on a very very sophisticated system that have built on Python and C to compile the source and make it very friendly to there homegrown "push" system they have.

I dont think you should be as concerned with the output as being multiple requests, I think that issue is totally secondary to being able to build and deploy your app. Later focus on plopping all your JS and CSS in the head, as this can be done pragmatically when you deploy.