<head> </ head>中的标签顺序

Question

不要紧,在所有什么样的顺序<link>或<script>或<meta>标签是在<head></head>？

(愚蠢的问题,但直到现在我从未考虑过的其中一件事.)

Answer 1

优化

根据Yahoo!上的人说你应该把CSS放在顶部,将脚本放在底部,因为脚本会阻止并行下载.但这主要是优化问题,对于实际工作的页面并不重要.Joeri Sebrechts指出,Cuzillion是一种很好的测试方法,可以为自己看到提速.

多个样式表

如果要链接多个样式表,则它们链接的顺序可能会影响页面样式的设置,具体取决于选择器的特性.换句话说,如果您有两个样式表以两种不同的方式定义相同的选择器,后者将优先.例如:

样式表1:

h1 { color: #f00; }

样式表2:

h1 { color: #00f; }

在此示例中,h1元素将具有颜色,#00f因为它最后以相同的特异性定义:

多个脚本

如果您使用多个脚本,如果其中一个脚本依赖于另一个脚本中的某些脚本,则它们的使用顺序可能很重要.在这种情况下,如果脚本以错误的顺序链接,您的某些脚本可能会抛出错误或无法按预期工作.但是,这很大程度上取决于您使用的脚本.

测试这个的最好方法是使用cuzillion(http://stevesouders.com/cuzillion/).它允许您构建页面结构并测试它如何影响页面加载性能.您可以轻松地验证在样式表之前而不是之后放置脚本需要更长时间才能加载. (3认同)

Answer 2

该接受的答案是一种错误,这取决于文档的编码.如果HTTP头中没有发送编码,则浏览器必须从文档本身确定编码.

如果文档使用<meta http-equiv="Content-Type" …声明来声明其编码,则根据HTML 4规范,在此语句之前出现的任何ASCII值字符(字符代码<128)必须是ASCII值.因此,重要的是此声明发生在可能包含非ASCII字符的任何其他元素之前.meta

Answer 3

建议使用尽可能高的字符编码元标记.如果编码未包含在请求页面的响应头中(或不同),则浏览器将不得不猜测编码是什么.只有当它找到这个元标记时,它才知道它正在处理什么,它将必须读取它已经再次解析的所有内容.

Answer 4

需要注意的一件重要事情是:如果您使用Internet Explorer meta X-UA-Compatible标记来切换IE的渲染模式,那么它需要是HEAD中的第一件事:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
</head>

Answer 5

meta无关紧要,但链接(对于CSS)和脚本很重要.

脚本将阻止大多数浏览器呈现页面,直到加载脚本.因此,如果可能的话,不要把它们放在头部,而是身体.

css链接不会阻止页面呈现.