[Solved -7 Answers] CSS – Is the recommendation to include CSS before JavaScript invalid

PROBLEM:

In countless places online we have seen the recommendation to include CSS prior to JavaScript.

The reasoning is generally, of this form:

use the following page to test

[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%20%0A%3Chtml%3E%20%0A%3Chead%3E%20%0A%3Ctitle%3Etest%3C%2Ftitle%3E%0A%20%3Cscript%20type%3D’text%2Fjavascript’%3E%20var%20startTime%20%3D%20new%20Date()%3B%20%3C%2Fscript%3E%20%0A%3Clink%20href%3D%22http%3A%2F%2F10.0.0.50%3A8081%2Ftest.css%3Fdelay%3D500%22%20type%3D%22text%2Fcss%22%20rel%3D%22stylesheet%22%3E%20%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2F10.0.0.50%3A8081%2Ftest2.js%3Fdelay%3D400%26amp%3Bjsdelay%3D1000%22%3E%3C%2Fscript%3E%20%3C%2Fhead%3E%0A%20%3Cbody%3E%20%0A%3Cp%3E%20Elapsed%20time%20is%3A%0A%20%3Cscript%20type%3D’text%2Fjavascript’%3E%20document.write(new%20Date()%20-%20startTime)%3B%20%3C%2Fscript%3E%20%3C%2Fp%3E%20%3C%2Fbody%3E%20%3C%2Fhtml%3E%20%0A” message=”Html Code” highlight=”” provider=”manual”/] [ad type=”banner”]

When we include the CSS first, the page takes 1.5 seconds to render:

When I include the JavaScript first, the page takes 1.4 seconds to render:

[ad type=”banner”]

• What appears to be happening is that the JavaScript interpreter refuses to start until all the CSS is downloaded. So, it seems that having JavaScript includes first is more efficient as the JavaScript thread gets more run time.
• Is the recommendation to place CSS includes prior to JavaScript includes not correct?

SOLUTION 1:

• We have always put the CSS s before the JS