Question

我真的很想知道为什么人们会说“把外部资源放在页面的头部”，例如：

<head>
    <script type="text/javascript" src="settings/myJavascript.js"></script>         
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="settings/style.css" title="Style" media="all" />
</head>

仅在需要这些资源时才将这些资源添加到页面中是不是更好？例如，在PHP上编程时，如果我的页面需要一些CSS而不是其他不需要它的页面，那么将link type或script src用于该页面会更加智能化将所有东西装在顶部，不是吗？

我在论坛/社区看到很多建议说要把所有人放在头上......你能说什么？

Answer 1

使用外部资源的原因是，即使它们包含当前页面上未使用的指令，也是利用HTTP和浏览器缓存。资源仅在第一次请求时发送到浏览器一次。这对于移动设备尤为重要，因为在使用有限带宽时，通过HTTP发送额外资源会产生大量开销。

您应该放置external JavaScript last in the page body，而不是HTML头。

Answer 2

如果您的网页只包含PHP，则无需外部资源。（=没有头，没有doctype澄清，没有<html>标签）

如果它确实包含次要或主要HTML（或任何其他标记），强烈建议使用外部资源。

Answer 3

对于您的javascript，最佳做法是在<script>标记之前将所有</body>标记放在页面底部。通过这样做，您可以确保在javascript开始加载时加载了所有页面，因此它不会减慢页面速度并使访问者离开。

对于CSS，当我的所有页面只有一个CSS时，我会将<link>标记放在<head>上。但是如果你有特定的CSS文件用于某些页面，你可以使用相同的tecnhnic而不是javascript。

Answer 4

实际上head中的第一个标记应该是Content-Type元标记。原因是某些旧浏览器有时会忽略浏览器发送的内容类型，如果他们没有及早看到Content-Type（使用指定的编码），则可能决定使用不同的编码。那些浏览器通常只接受它作为第一个参数。

除此之外，head中的顺序并不重要。当然，之前包含的脚本也会先加载，但这只是加载顺序。鉴于浏览器能够同时加载多个文件，之前开始下载的脚本可能会在之后开始加载的脚本之后完成。

将所有内容放在标题中的原因很简单，首先加载标题，然后在显示任何内容之前，处理标题。因此，在显示页面时您可能需要的任何库或某些内容应该在此之前可用，因此应该放在标题中。所有其他script标记仅在浏览器在呈现页面时到达时执行。

Answer 5

HTML head在其他所有内容之前处理，即使整个页面只是部分下载（假设，页面从头到尾依次加载，即不是随机块，如通过BitTorrent例如）。它不仅适用于外部资源，而且适用于与当前页面内容无关的所有内容。

互联网有时会变得缓慢且滞后，用户代理（浏览器）可以在各种平台上运行，包括非常有限的平台。如果Internet连接具有较长的ping延迟（例如，它是卫星链路），则请求需要相当长的时间才能完成往返。因此，您希望客户端能够同时请求所有这些外部项目。浏览器越早决定是否请求资源就越好 - 这有助于快速下载页面，以及所有样式表，javascript代码等等。

还有一个缓存问题。通常假设在页面的head中声明的东西在请求之间是不可变的，因此最好是缓存并且只在很少看似合理的情况下被请求。这也大大加快了事情的发展。

Answer 6

我已经看到了将所有外部资源都包含在您的网页中的建议。这样做的逻辑是，一旦资源被缓存，它将加快其余页面的用户体验。另一方面，您将在不需要它的页面上获得不必要的脚本/样式，甚至有时会因为您获得您可能不期望的行为而造成伤害。

我的建议是，除非您的样式/脚本很小（总计<100kb），否则您应该只将它们包含在您需要的页面中。

此外，CSS文件应位于页面顶部（因此浏览器知道如何呈现页面）和JS文件应位于页面底部（这取决于您的设置，有时您可能无法将它加载到底部，因为您的页面依赖于JS存在于顶部。）

Answer 7

这里有两件事，我不确定你在问什么。

说它们应该在<head>中，而不是文档中的其他地方。有些人确实在身体中放置了CSS链接，即使它们不被允许存在，并且在身体允许<script>的同时，将它放在头部也是一个更好的主意（以及那些情况下它不应该是显而易见的，即使经常可以重新编写以便更好地从头部开始工作，除了与其他服务相关的剪切和粘贴脚本，例如亚马逊给你一个脚本放入你的他们希望为您简化的页面，而不是要求严格重写您的代码。）

至于是否只应该在那些需要它们的页面中，这里有一个平衡点。

首先，假设在一个网站的所有页面上都使用了90％的CSS样式表声明（这是一个经过深思熟虑的风格本身的标志）。我们可以将其他10％放在单独的文件中仅用于某些页面，实际上更可能是一个页面中的2％，另一个页面中3％，另一个或类似内容中的5％。但是，由于每个URI访问在下载的实际流的带宽之上都有自己的开销，我们可能会失去比我们在这里获得的更多。

添加缓存效果，并将其保存在一个文件中是一个明显的赢家。

另一方面，假设站点中有一组资源需要与其他资源具有非常不同的样式需求。在这种情况下，单独的CSS可能与第一个一样大或大，因此将其作为单独的文件仅在必要时使用更有意义（同样，它可以使级联工作中的覆盖更好，例如，如果“主”样式表给出蓝色背景，那么第二个样式表可以给出红色背景，我们只需根据样式表是否存在来指示我们需要哪个，而不必在相关HTML页面中设置不同的类。）

同样适用于javascript，很少使用的几个函数可能仍然应该在“常见”的javascript文件中，但是只能在一个页面中使用的大量函数几乎肯定只能加载到那个页面中

也就是说，我们可能会选择将第二个js包含在一个相对较轻的页面中，该页面可能会在一个相对较重的页面之前被使用，只是为了利用缓存。后者我会考虑更多的整个网站的优化，而不是关注一页的设计（被视为单独的页面，第二个js显然是浪费）。

编辑：

最后，让一个文件处理所有这些项目变得更加简单，并且通过减少维护来减少一些额外下载的浪费。

我为什么要把外部资源放在html头中？

7 个答案: