logo标签列表

在HTML网页中，CSS和Javascript代码应该放在哪里？

javascripthtmlcss
68

当设计网页时，我应该将以下代码放在哪里？

<link rel=stylesheet type="text/css" href="css/layout.css">

我应该将它放在<head>还是<body>中？ 请回答以下问题：

  1. 如果我将其放在<head>或HTML代码的任何其他位置会有什么区别？
  2. 如果我有两个CSS（或Javascript）文件怎么办？由于我只能在另一个文件之前包含一个文件，因此Web浏览器将使用哪个文件来显示网页？
非常好的解释和建议：https://dev59.com/NXRC5IYBdhLWcg3wAcbU#24070373 - Grigory Kislin
11个回答
87

在我看来，最佳实践是将CSS文件放置在头部

<head>
  <link rel="stylesheet" href="css/layout.css" type="text/css">
</head>

在闭合的</body>标签之前引入Javascript文件。

  <script type="text/javascript" src="script.js"></script>
</body>

另外，如果你有两个CSS文件，如你所说。浏览器将使用两个文件。如果这两个CSS文件中有任何选择器，例如.content {}，且它们相同，则浏览器将使用第二个CSS文件的属性覆盖第一个CSS文件的相似属性。如果理解了就好。

2
关于 <link /> 和 <style />：你必须将它们放在 <head /> 中，不允许放在 <body> 中。 - Albireo
18
在页面顶部使用 <link> 的理由是，如果 CSS 文件不在 <head> 中，浏览器在加载它们时必须重新布局（移动元素），这会干扰用户与页面的交互。而将 <script> 文件放在页面底部，则可以避免大多数情况下浏览器在加载和运行 JavaScript 文件时阻止 HTML 的处理。如果 <script> 标签位于底部，浏览器仍然可以在处理 JavaScript 的同时显示上面所有的 HTML 。需要注意的是，现在不再建议使用 Write() 方法。 - Jon Adams
23

将样式表放在页面顶部 讨论链接

在雅虎公司的性能研究中，我们发现将样式表移动到文档的HEAD部分可以使页面加载速度更快。这是因为将样式表放在HEAD中可以让页面逐步渲染。

关心页面性能的前端工程师希望页面以逐步加载的方式加载；也就是说，我们希望浏览器尽早地显示任何内容。对于具有大量内容且使用较慢互联网连接的用户来说，这尤其重要。给用户提供视觉反馈的重要性，如进度指示器已经得到了充分的研究和记录。在我们的案例中，HTML页面就是进度指示器！当浏览器逐步加载页面时，页眉、导航栏、顶部的标志等都会成为用户等待页面的视觉反馈。这改善了整体用户体验。

将样式表放在文档底部的问题是，在许多浏览器中（包括Internet Explorer），它会阻止渐进式渲染，因为这些浏览器为了避免重新绘制页面元素，会阻止渲染。用户只能看到一个空白的白屏。

HTML规范明确规定样式表应该包含在页面的HEAD中：“与A标记不同，[链接]只能出现在文档的HEAD部分，尽管可以出现任意次数。” 空白的白屏或未经样式处理的内容闪烁都不值得冒险。最佳解决方案是遵循HTML规范并将样式表加载到文档的HEAD中。

将脚本文件放在页面底部

脚本文件导致的问题是它们会阻止并行下载。HTTP/1.1规范建议浏览器每个主机名最多同时下载两个组件。如果您从多个主机名提供图像，则可以使超过两个下载并行进行。然而，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。

在某些情况下，将脚本移至页面底部并不容易。例如，如果该脚本使用document.write来插入页面内容的一部分，则无法将其放在页面底部。还可能存在作用域问题。在许多情况下，有方法可以解决这些问题。
另一个常见的替代建议是使用延迟脚本。DEFER属性表示该脚本不包含document.write，并且是浏览器可以继续渲染的提示。不幸的是，Firefox不支持DEFER属性。在Internet Explorer中，脚本可以被延迟执行，但可能不如预期那样延迟执行。如果脚本可以被延迟执行，也可以将其移至页面底部。这将使您的网页加载速度更快。
9
  1. 根据格式要求，你应该把样式表链接和javascript <script>放在<head>中。然而，有些人会把javascript <script>放在页面底部，这样页面内容就可以在不等待<script>的情况下加载，但这是一种权衡，因为脚本执行将延迟到其他资源加载完成后。
  2. CSS按照它们被链接的顺序（相反）优先级排序：第一个被第二个覆盖，第二个被第三个覆盖，以此类推。
3
为什么把 JavaScript 放在 HTML body 底部会被视为不良实践？ - Celeritas
@Celeritas 因为从语义上讲，<script>不会被渲染，所以它们应该放在<head>中。而<body>是用来放那些需要被渲染的元素，比如<div>、<p>等等。而<head>则是用来放那些非渲染的元数据，比如<script>、<style>和<title>。 - Rap
7
你应该将CSS放在标签中，因为规范要求如此。
如果有多个CSS文件，则它们将按照代码中的顺序加载。如果第二个CSS文件中有样式，则会覆盖第一个文件中的样式；这是设计上的考虑。因此，称之为层叠样式表。
大多数浏览器仍然可以有效地渲染标签外的CSS文件，但你的代码不符合语义。
你可以在文档的任何位置使用JavaScript文件链接。有各种原因在标签和页面其他位置使用它们。（例如，Google分析代码被指示放在底部。）
3

CSS的引用应该放在head标签中，在任何js脚本引用之前。 Javascript可以放在任何位置，但是文件的功能会决定其位置。如果它构建页面内容，请将其放在head标签中。如果用于事件或跟踪，则可以将其放在</body>标签之前。

3

我认为最好的方法是： 1)将CSS文件放在头部标签之间的头部部分。 原因是第一页显示需要该CSS。 2)所有JS文件都应该放在body结束标记之前。 原因是在所有组件显示后，JS才能应用。

1
你必须在回答中使用更好的语法。 - Kayvan Tehrani
2

您应该将它放在<head>标签中。我通常将样式引用放在JS之前，并按照从上到下的顺序排列我的JS，如果其中一些JS依赖于其他JS，则需要先加载所有引用，然后再渲染页面。

1

关于 <link /> 和 <style />，你没有选择，它们必须在 <head /> 部分中（参见 one 和 two）。

关于 <script />，它可以出现在 <head /> 和 <body /> 中（参见 three），通常最好的做法是将它们放在 <head /> 中，因为它们不是真正的“内容”（其中“内容”是用户在屏幕上看到的东西），它们更像是“作用于”“内容”的东西。

W3C的HTML4规范非常棒！

0

如果您有多个.css或.js文件需要调用，只需一个接一个地将它们包含在其中，或者：

<head>

<link href="css/grid.css" rel="stylesheet" />

<link href="css/style.css" rel="stylesheet" />

<script src="js/jquery-1.4.4.min.js"></script>

<script src="js/jquery.animate-colors-min.js"></script>

</head>
0
根据我的研究，在CSS中，元素的位置总是在内部，例如：-
 <head>
  <link href="css/grid.css" rel="stylesheet" />
 </head>

对于脚本而言，它取决于：

  1. 如果在脚本文档内部写入 present，则会放置在 head 标签中。
  2. 如果该脚本包含 DEFER 属性，因为 defer 会并行下载所有内容。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接