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

当前位置: 首页>网络编程>Java >如何在HTML标记中订购标记与

<meta>

<title>

<link> to favicon

到favicon

<script> for jQuery

jQuery的

<script> main javascript for site

<script> google analytics, asynchronous script.

</head>

Are there reasons to order these differently so that load times and other issues happen more smoothly, and if so, what would the ideal order be?

有没有理由以不同的方式订购这些产品,以便加载时间和其他问题更顺利地发生,如果是这样,理想的订单会是什么?

5 个解决方案

#1

Modern browsers wait with any sort of rendering until the entire <head> section is retrieved (including the files linked within it). The order therefore doesn't matter for performance. For Javascript, the order of the files is the order of execution. For stylesheets, the order determines precedence (the rule that was defined last has precedence if all other things are equal).

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

If you want to optimise client performance, it is strongly advisable to move your Javascript includes to the very end of the <body> element, instead of putting them in the <head> at all. There are more considerations, Yahoo's list of optimisations is well worth your time to read through. Google has some good advice as well.

如果要优化客户端性能,强烈建议将Javascript包含移动到元素的最后,而不是将它们放在中。有更多的考虑因素,雅虎的优化列表值得您花时间阅读。谷歌也有一些很好的建议。

#2

One thing that can have a big effect is moving <script> tags to the bottom of the page if they are not essential to the content.

如果它们对内容不是必不可少的,那么可以产生重大影响的一件事就是将

For instance, I would move the google analytics <script> tag to be the last thing before the </body> tag on every page. Script tags are "blocking content", so the browser will not continue with a page render until the script has been downloaded and executed. Your main javascript and JQuery files probably can't be moved as easily depending on how you're using them, but analytics for sure can be at the bottom.

例如,我会将google analytics

Check out the YSlow best practices for more optimization techniques.

查看YSlow最佳实践以获得更多优化技术。

#3

by the way, try to antispam your email address...

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

ie:

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

It works for me...

这个对我有用...

#4

Also consider the fact that browsers will halt javascript execution when an error occurs.

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

Because of this, it is very important that your javascript work on all browsers else you risk your Analytics code not executing and capturing stats...

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

I usually place my Google Analytics above my own code so it runs first, and if in the rare event that my code breaks or causes JS errors, I am still able to get tracking information.

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

my order would be:

我的订单是:

<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>

#5

If you are using Wordpress then you can easily use this plugin: http://wordpress.org/extend/plugins/performance-optimization-order-styles-and-javascript/ and take advantage of it.

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

#1

#2