为什么我应该把外部资源放在html头部？

我真的很想知道为什么有人说“放在页面的头部外resorces”，如：为什么我应该把外部资源放在html头部？

<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会更加智能，而不会将所有内容都加载到顶部，isn'它呢？

我在论坛/社区上看到很多关于把所有人都置于脑海中的建议......你能说什么？

来源

2011-03-27 markzzz

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

说他们应该在<head>可以意味着，而不是在文件的其他地方。有些人确实将CSS链接放在身体中，即使他们不允许在那里，而且在体内允许使用<script>，但将它放在头部几乎总是一个更好的主意（以及那些不是这样的情况）应该是显而易见的，尽管通常可以重写为更好地从头开始工作，但与其他服务相关的剪贴脚本除外，例如，亚马逊会为您提供一个脚本，将其放入您的网页中为了让你变得简单，而不是要求你重新编写代码）。

至于它是否只应在那些需要它们的页面上，这里就有一个平衡点。首先，让我们说一个CSS样式表的声明的90％用于站点中的所有页面（这本身就是一个深思熟虑的样式的标志）。我们可以将其他10％的文件放在单独的文件中，仅用于某些页面，实际上更可能是1％的2％，另一个文件中的3％，另一个文件中的5％或其他类似文件。但是，由于每个URI访问在实际下载的流的带宽之上都有自己的开销，所以我们可能会失去更多的收益。

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

另一方面，比如说一个站点中有一组资源对别人有着非常不同的样式需求。在这种情况下，单独的CSS可能会比第一个CSS大或比它大，因此将它作为一个单独的文件在必要时使用是更有意义的（也可以使级联中的重载更好，例如，如果“main”样式表给出了蓝色背景，那么第二个可以给出红色背景，并且我们仅仅通过该样式表是否存在来指示我们需要哪个样式表，而不必在整个相关HTML页面中设置不同的类）。

这同样适用于JavaScript，几乎很少使用的函数应该仍然在“常用”JavaScript文件中，但是只能在一个页面中使用的大量函数几乎肯定只能在该函数中加载页。也就是说，我们可能会选择在相对较轻的页面中包含第二个js，这个页面可能会在相对较重的页面之前被使用，只是为了利用缓存。后者我会考虑对整个网站进行更多的优化，而不是关注那个页面的设计（作为单个页面来看，第二个js显然很浪费）。

编辑：

最后，它只是简单的一个独立的文件处理所有这些项目，并在一些额外的下载垃圾可以通过减少维护是合理的。

来源

2011-03-27 15:28:45

如果您的页面只包含PHP，则不需要外部资源。（=没有头，没有类型说明，没有<html>标签）

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

来源

2011-03-27 14:36:55

对于您的JavaScript，最好的做法是将所有<script>标记放在页面底部，然后放在</body>标记之前。通过这样做，你可以确保当你的JavaScript开始加载时你所有的页面都被加载了，所以它不会减慢你的页面并让你的访问者离开。

对于CSS，我只在我的所有页面中只有一个CSS时，通常会将我的<link>标记放在<head>上。但是如果你对某些页面有特定的CSS文件，你可以使用与JavaScript相同的技术。

来源

2011-03-27 14:42:03 TrexXx

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

你应该把external JavaScript last in the page body，而不是HTML头。

来源

2011-03-27 14:42:05

虽然有缺点。如果页面的图像很重，那么外部JS可能会大大延迟，并且总体效果可能比旧浏览器的顺序加载的延迟更具破坏性，包括以难以计算的奇妙级联方式发生的实际错误出。它确实有你说的优点，但它并非没有陷阱。 – 2011-03-27 15:46:15

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

除此之外，head中的订单并不重要。当然，其他脚本也包含在其他脚本之前也加载较早，但这只是关于加载顺序。由于浏览器能够同时加载多个文件，因此稍后开始加载的脚本可能会在稍后加载的脚本之后完成。

将所有内容放在标题中的原因很简单，首先加载标题，并且在显示任何内容之前处理标题。因此，任何库或显示页面时可能需要的内容在此之前都应该可用，因此应该放在标题中。所有其他script标签只有在浏览器在呈现页面时才会执行。

来源

2011-03-27 14:42:38 poke

如果您对服务器没有太多控制权，则只需要放置Content-Type元。如果你想指定字符编码而不是浏览器和服务器的默认值，你只想使用元。服务器头或元标记中的内容类型处理没有区别。至少，不是在过去10年左右发布的任何浏览器中？ – 2011-03-27 15:01:20

@deemoowoor，Content-Type meta（更应如此，XML声明应该使用XHTML）在保存文件时会保留编码。虽然我同意你的一般观点，但是浏览器要么没有出错，要么在错误出现的时候出错了，那是服务器做错了事情（通常还是）。虽然它需要成为第一个标签是一个神话，部分是由于过度简化（有些时候它确实有帮助，而且从来没有实际错误，为什么不呢？），还有一部分是AFAICT，因为人们经常相信Joel on Software是绝对可靠的，他曾这么说过。 – 2011-03-27 15:34:32

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

互联网有时可能会变得缓慢而迟缓，用户代理（浏览器）可以在各种平台上运行，包括非常有限的平台。如果互联网连接延迟较长（例如，它是卫星链路），则完成往返请求需要相当长的时间。所以你希望客户能够同时请求所有这些外部项目。浏览器可以更快地决定是否请求资源，效果会更好 - 这有助于快速下载页面，以及所有样式表，JavaScript代码和其他内容。

而且还有一个缓存问题。通常假定页面的head中声明的内容在所有请求中都是不可变的，所以缓存很好，只需要尽可能少的请求即可。这也大大加快了速度。

来源

2011-03-27 14:50:54

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

我的建议是，除非您的样式/脚本是小（总< 100KB），你应该只包括他们在您需要的页面。另外，CSS文件应该位于页面顶部（因此浏览器知道如何渲染页面），而JS文件应该位于页面底部（这取决于您的设置，有时您可能不会能够在底部加载它，因为你的页面依赖于JS存在于顶部）。

来源

2011-03-27 14:51:03 JohnP

为什么我应该把外部资源放在html头部？

回答

相关问题