css 与 javascript 摆放顺序

最新推荐文章于 2025-06-27 15:09:25 发布

最新推荐文章于 2025-06-27 15:09:25 发布 · 165 阅读

文章标签：

#CSS #JavaScript #脚本 #HTML #浏览器 #ViewUI

xhtml / css 专栏收录该内容

47 篇文章

订阅专栏

根据 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的前面