Order of tags in <head></head>

2020-02-17 08:51发布

does it matter at all what order the <link> or <script> or <meta> tags are in in the <head></head>?

(daft question but one of those things i've never given any thought to until now.)

标签: html xhtml
14条回答
【Aperson】
2楼-- · 2020-02-17 09:08

It would only matter if one of the linked files (CSS/Javascript) depended on another. In that case, all dependencies must be loaded first.

Say, for example, you are loading a jQuery plugin, you'd then need to first load jQuery itself. Same when you have a CSS file with some rules extending other rules.

查看更多
手持菜刀,她持情操
3楼-- · 2020-02-17 09:09

For the purposes of validation as XHTML, yes. Otherwise you're probably going to care about the optimization answers.

查看更多
forever°为你锁心
4楼-- · 2020-02-17 09:12

It is usually recommended to have the <script> tag as lower down the page as possible (not in the head but in the body).

Other than that, I don't think it makes much of a difference because the body cannot be parsed unless you have the <head> section completely loaded. And, you want your <link> tag to be in the head as you want your styling to occur as the browser renders your page and not after that!

查看更多
We Are One
5楼-- · 2020-02-17 09:15

Optimization

According to the folks over at Yahoo! you should put CSS at the top and scripts at the bottom because scripts block parallel downloads. But that is mostly a matter of optimization and is not critical for the page actually working. Joeri Sebrechts pointed out that Cuzillion is a great way to test this and see the speed improvement for yourself.

Multiple Stylesheets

If you are linking multiple stylesheets, the order they are linked may affect how your pages are styled depending on the specificity of your selectors. In other words, if you have two stylesheets that define the same selector in two different ways, the latter will take precedence. For example:

Stylesheet 1:

h1 { color: #f00; }

Stylesheet 2:

h1 { color: #00f; }

In this example, h1 elements will have the color #00f because it was defined last with the same specificity:

Multiple Scripts

If you are using multiple scripts, the order they are used may be important if one of the scripts depends on something in another script. In this case, if the scripts are linked in the wrong order, some of your scripts may throw errors or not work as expected. This, however, is highly dependent on what scripts you are using.

查看更多
▲ chillily
6楼-- · 2020-02-17 09:19

It's recommended to put the meta tag with the character encoding as high as possible. If the encoding is not included in (or differs from) the response header of the requested page, the browser will have to guess what the encoding is. Only when it finds this meta tag it knows what it is dealing with and it will have to read everything it has already parsed again.

See for instance Methods for indicating the character set.

查看更多
甜甜的少女心
7楼-- · 2020-02-17 09:19

meta does not matter, but link (for css) and script matters.

script will block most browser from rendering the page until the scripts are loaded. Therefore, if possible put them not in the head, but the body.

css link will not block page rendering.

查看更多
登录 后发表回答