25 lines
2.7 KiB
Plaintext
25 lines
2.7 KiB
Plaintext
---
|
||
title: 为什么一般来说，将CSS`<link>`放在`<head></head>`之间，将JS`<script>`放在`</body>`之前是个好主意？
|
||
subtitle: 您是否知道任何例外情况？
|
||
---
|
||
|
||
简而言之， 这种 CSS `<link>` 和 JavaScript `<script>` 的放置可以更快地呈现页面和更好的整体性能。
|
||
|
||
## 将`<link>` 放置在`<head> ` 中
|
||
|
||
将`<link>` 放入`<head>`是建立一个优化网站的正确规范的一部分。 当页面首次加载时，HTML 和 CSS 同时解析； HTML 创建 DOM (文档对象模型) ， CSS 创建 CSSOM (CSS 对象模型)。 两者都需要在网站中创建视觉效果，以优化 "首次有意义的绘制 "时机。 将 CSS `<link>` 放入`<head>`中确保了样式表已加载并准备在浏览器开始渲染页面时使用。
|
||
|
||
这种渐进式渲染是网站在其性能评分中衡量的一个指标。 将样式表放在文档的底部是禁止在许多浏览器中进行渐进式渲染的原因。 某些浏览器阻止渲染以避免在其样式改变时需要重新刷新页面元素。 然后，用户会被卡住，面对一个空白页面。 其它时候可能会有无样式内容的闪烁(FOUC)，它会显示一个没有应用样式的网页。
|
||
|
||
## 在`</body>`之前放置`<script>`。
|
||
|
||
`<script>`标签在下载和执行时阻止了 HTML 解析，这可能会拖慢你的页面显示。 将`<script>`放在底部将允许 HTML 首先被解析并显示给用户。
|
||
|
||
当你的脚本包含`document.write()`时，`<script>`在底部的定位是一个例外，但现在使用`document.write()`并不是一个好的做法。 另外，将 `<script>`放在底部意味着，在解析整个文档之前，浏览器无法开始下载脚本。 这将确保您需要操纵 DOM 元素的代码不会导致错误从而停止整个脚本。 如果你需要把`<script>`放在`<head>`中，请使用`defer`属性，这将达到同样的效果，即在 HTML 被解析后才运行脚本，但浏览器可以提前启动网络请求以下载脚本。
|
||
|
||
请记住，把脚本放在结尾的`</body>`标签之前，会造成页面在空的缓存中加载更快的错觉（因为脚本不会阻止下载文档的其他部分）。 但是，如果你想要在页面加载时运行一些代码，它只会在整个页面加载后才开始执行。 如果你将那些脚本放入`<head>`标签， 他们会在预设的缓存中开始执行, 所以页面实际上会加载更快。
|
||
|
||
## `<head>` 和 `<body>`标签现在是可选的
|
||
|
||
按照 HTML5 的规格，某些 HTML 标签，如`<head>`和`<body>`都是可选的。 谷歌的样式指南甚至建议删除它们以便保存字节。 然而，仍然存在着这样一种现象： 这种做法仍然没有得到广泛采用，性能收益很可能很小，对大多数网站来说不太可能起作用。
|