根据 yahoo 的性能调优建议 , css 放在头部,javascript放在尾部,可是由于其他一些原因,如遗留代码等,往往javascript和css都放在头部。
示例:
<html>
<head>
<link rel="stylesheet" type='text/css' href="w3c/layout.css" />
<script type="text/javascript">
//some time consuming operations
</script>
</head>
<body>
<!-- big pictures -->
<img src="big.jpg" />
</body>
</html>
那么根据Even fast websits的实验,big.jpg的下载得等到脚本执行完毕才开始,不能和layout.css并行下载。
根据他的建议改作
改进示例:
<html>
<head>
<script type="text/javascript">
//some time consuming operations
</script>
<link rel="stylesheet" type='text/css' href="w3c/layout.css" />
</head>
<body>
<!-- big pictures -->
<img src="big.jpg" />
</body>
</html>
即可实现 big.jpg和 layout.css 的并行下载了。
总结一下原因:
头部css后的脚本阻止了后续资源的并行下载,根本原因还是浏览器害怕脚本有document.writeln的操作,很多网站都有这个问题,注意啦。脚本放在头部时,请放在css的前面