如何在 HTML 标记中排序 <script> 标签与 <style> 标签以获得最佳效果
Posted
技术标签:
【中文标题】如何在 HTML 标记中排序 <script> 标签与 <style> 标签以获得最佳效果【英文标题】：How to order <script> tags vs. <style> tags in HTML markup for best results 【发布时间】：2011-02-02 16:06:54 【问题描述】：我正在http://royronalds.com 上建立我的网站，并且我试图找出<head> 中的元素顺序最有意义。就我目前所拥有的而言，我有：
<head>
<style> 外部样式表
<meta>
<title>
<link> 到网站图标
<script> 用于 jQuery
<script> 网站的主要 javascript
<script> 谷歌分析，异步脚本。
</head>
是否有理由对这些进行不同的排序，以便加载时间和其他问题更顺利地发生，如果是这样，理想的顺序是什么？
【问题讨论】：
【参考方案1】：现代浏览器会等待任何类型的渲染，直到检索到整个 <head> 部分（包括其中链接的文件）。因此，顺序对性能 无关紧要。对于 Javascript，文件的顺序就是执行的顺序。对于样式表，顺序决定优先级（如果所有其他条件都相同，则最后定义的规则具有优先级）。
如果您想优化客户端性能，强烈建议将您的 Javascript 包含移动到 the very end of the <body> element，而不是将它们放在 <head> 中。还有更多注意事项，Yahoo's list of optimisations 非常值得您花时间阅读。 Google has some good advice 也是。
【讨论】：
异步脚本的执行顺序不一定是它们在页面上出现的顺序。也不一定建议将异步脚本放在底部。在许多页面上，将异步脚本放在顶部附近可以减少页面总加载时间，而不会因为并行度增加而阻塞内容。【参考方案2】：如果<script> 标记对内容不是必不可少的，则可以将它们移到页面底部。
例如，我会将谷歌分析<script> 标记移动到每个页面上</body> 标记之前的最后一件事。脚本标签是“阻止内容”，因此浏览器在下载并执行脚本之前不会继续页面渲染。您的主要 javascript 和 JQuery 文件可能无法轻松移动，具体取决于您使用它们的方式，但分析肯定可以放在底部。
查看YSlow best practices 了解更多优化技术。
【讨论】：
Google Analytics 异步跟踪 sn-p 等异步脚本标签不会像普通脚本那样阻止内容。请看：stevesouders.com/blog/2010/03/03/p3pc-google-analytics 有趣。这是对 GA 代码的相对较新的更改。我不知道，谢谢你的链接。大多数网站可能仍在使用旧的非异步脚本。 大多数网站都这样做，而且您的评论绝对适用于非异步 GA sn-p。我只是想指出这个问题是关于异步 GA 的。【参考方案3】：还要考虑浏览器会在发生错误时停止 javascript 执行这一事实。
因此，您的 javascript 在所有浏览器上都能正常工作非常重要，否则您的 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>
【讨论】：
浏览器只对发生错误的脚本标签停止脚本执行。他们将继续执行其他脚本中的代码。在 GA 脚本上方有一个损坏的脚本不会停止发送跟踪信标。【参考方案4】：顺便说一句，尝试反垃圾邮件您的电子邮件地址...
即：
<SCRIPT TYPE="text/javascript">
document.write('<A HREF=' + '"mai' + 'lto:' + 'example@' + 'example' + '.fr' + '?' + 'sub' + 'ject=music'+'example'+'text">' + 'example' +'@' + 'example' +'.' + 'fr' + '</A><BR>')
</SCRIPT>
它对我有用...
【讨论】：
是的，我会尝试为此考虑一些东西（最好是更容易获得的东西）。 这应该是评论，而不是答案。【参考方案5】：如果您使用的是 Wordpress，那么您可以轻松使用此插件：http://wordpress.org/extend/plugins/performance-optimization-order-styles-and-javascript/ 并充分利用它。
【讨论】：
以上是关于如何在 HTML 标记中排序 <script> 标签与 <style> 标签以获得最佳效果的主要内容，如果未能解决你的问题，请参考以下文章
我应该将 <script> 标签放在 HTML 标记中的啥位置？