{"id":1311,"date":"2017-03-20T20:14:32","date_gmt":"2017-03-20T14:44:32","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1311"},"modified":"2017-03-29T11:28:09","modified_gmt":"2017-03-29T05:58:09","slug":"recommendation-include-css-javascript-invalid","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/recommendation-include-css-javascript-invalid\/","title":{"rendered":"[Solved -7 Answers] CSS – Is the recommendation to include CSS before JavaScript invalid"},"content":{"rendered":"

PROBLEM:<\/label><\/p>\n

In countless places online we have seen the recommendation to include CSS prior to JavaScript.<\/p>\n

The reasoning is generally, of this form:<\/p>\n

use the following page to test<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3C!DOCTYPE%20html%3E%20%0A%3Chtml%3E%20%0A%3Chead%3E%20%0A%3Ctitle%3Etest%3C%2Ftitle%3E%0A%20%3Cscript%20type%3D\u2019text%2Fjavascript\u2019%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\u2019text%2Fjavascript\u2019%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\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n

When we include the CSS first, the page takes 1.5 seconds to render:<\/p>\n

$\"\"$ <\/p>\n

When I include the JavaScript first, the page takes 1.4 seconds to render:<\/p>\n

$\"\"$ <\/p>\n

[ad type=\u201dbanner\u201d]\n

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.<\/li>\n
Is the recommendation to place CSS includes prior to JavaScript includes not correct?<\/li>\n<\/ul>\n
SOLUTION 1:<\/label><\/p>\n
- We have always put the CSS s before the JS