Question

我正在http://royronalds.com建立我的网站，我正在试图找出<head>中哪些元素的顺序最有意义。只是从我现在拥有的东西中获取，我有：

<head>
<style>外部样式表
<meta>
<title>
<link>至favicon
<script> for jQuery
<script>网站的主要javascript
<script>谷歌分析，异步脚本。
</head>

是否有理由以不同方式订购，以便加载时间和其他问题更顺利地发生，如果是这样，那么理想订单会是什么？

Answer 1

可能产生重大影响的一件事是将<script>标记移动到页面底部，如果它们对内容不重要的话。

例如，我会将google analytics <script>标记移动到每个页面上</body>标记之前的最后一个标记。脚本标记是“阻止内容”，因此在脚本下载并执行之前，浏览器不会继续使用页面呈现。您的主要javascript和JQuery文件可能无法轻松移动，具体取决于您使用它们的方式，但分析肯定可以在底部。

查看YSlow best practices了解更多优化技巧。

Answer 2

现代浏览器会等待任何类型的呈现，直到检索到整个<head>部分（包括其中链接的文件）。因此，订单与性能无关。对于Javascript，文件的顺序是执行顺序。对于样式表，顺序确定优先级（如果所有其他事物都相同，则最后定义的规则具有优先权。）

如果您想要优化客户端效果，建议您将Javascript包含移至the very end of the <body> element，而不是将它们放在<head>中。还有更多考虑因素，Yahoo's list of optimisations值得您花时间阅读。 Google has some good advice也是如此。

Answer 3

顺便说一句，尝试反垃圾邮件您的电子邮件地址......

即：

<SCRIPT TYPE="text/javascript">
document.write('<A HREF=' + '"mai' + 'lto:' + 'example@' + 'example' + '.fr' + '?' + 'sub' + 'ject=music'+'example'+'text">' + 'example' +'@' + 'example' +'.' + 'fr' + '</A><BR>')
</SCRIPT>

对我有用......

Answer 4

还要考虑浏览器在发生错误时暂停执行javascript的事实。

因此，您的javascript在所有浏览器上工作非常重要，否则您的Google Analytics代码无法执行并捕获统计数据......

我通常将我的Google Analytics置于我自己的代码之上，因此它首先运行，如果在极少数情况下我的代码中断或导致JS错误，我仍然可以获取跟踪信息。

我的订单是：

<head>
<meta> content encoding
<title>
<link> favicon
<style> external/third-party stylesheet
<style> site stylesheet
</head>
<body>
...
<script> google analytics
<script> jQuery
<script> jQuery plugins
<script> site javascript
</body>

Answer 5

如果您使用的是Wordpress，则可以轻松使用此插件：http://wordpress.org/extend/plugins/performance-optimization-order-styles-and-javascript/ 并利用它。

如何在HTML标记中订购<script>标记与<style>标记以获得最佳结果</script>

5 个答案: