Styles need to be loaded first before the page is displayed. Otherwise there will be a flash and elements on the page will shift creating a bad experience.
JavaScript can't do anything until the page loads anyway and <script> tags block parallel downloading, resulting in longer page load times.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS Up Top, JavaScript at the Bottom - Frontend Development Tips & Tricks by Russell Heimlich</title> <link href="css/reset.css" rel="stylesheet" media="all"> <link href="css/main.css" rel="stylesheet" media="all"> </head> <body> … <script type="text/javascript" src="js/jquery.js"></script> </body> </html>
Source: Best Practices for Speeding Up Your Web Site - Yahoo!