I was under the impression that "DOM ready" did not wait for CSS, but that "load" did. In fact, i was also under the impression that CSS (loaded in the <head> at least) blocked any further processing until it's downloaded. Am I wrong?
JS called from the head (without "async") blocks all further progress, but I don't think CSS necesarily does. (Though of course the page can't actually render to the screen without all the CSS.) SO seems to back that view up: http://stackoverflow.com/questions/4026183/as-javascript-in-... YMMV in older versions of IE. I think everything blocks with them.
I'm not sure about ready vs load, but that would make sense.
Well, "DOM ready" isn't really a thing -- but assuming we're talking "DOMContentLoaded", then you're absolutely right. It doesn't have anything to do with other resources (images or CSS) being loaded or not. It'll execute as soon as the document is parsed.
As for downloading CSS -- it won't prevent your JS from executing, but it'll block page rendering until all the stylesheets have been downloaded and parsed.
That's what I thought. Which means the original post makes very little sense- if your <script> tags are just before </body> there's surely no real delay between that an using DOMContentLoaded?
DOMContentLoaded, in all important browsers, does block to wait for CSS.
Manipulating the DOM before this event both increases the chance to make changes before first-paint (decreases "jigger" on page load) and gives you the chance to request more resources earlier.
