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

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 2

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