我应该将 CSS 和 Javascript 代码放在 HTML 网页中的什么位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6625773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where should I put the CSS and Javascript code in an HTML webpage?
提问by Sumit Gupta
While designing a webpage, where should I put the following code?
在设计网页时，我应该把下面的代码放在哪里？
<link rel=stylesheet type="text/css" href="css/layout.css">
<link rel=stylesheet type="text/css" href="css/layout.css">
Should I put it in the <head>or should I put it in the <body>?
Please clarify the following questions:
我应该把它放在里面<head>还是我应该把它放在里面<body>？请澄清以下问题：
- What difference does it make if I put it in
<head>or anywhere else around the HTML code? - What if I am having two CSS (or Javascript) files? Since I can only include one file before another one, which file will be used by the web-browser to display the webpage?
- 如果我把它放在
<head>HTML 代码周围或其他任何地方，会有什么不同？ - 如果我有两个 CSS（或 Javascript）文件怎么办？由于我只能在另一个文件之前包含一个文件，网络浏览器将使用哪个文件来显示网页？
回答by brenjt
In my opinion the best practice is to place the CSS file in the header
在我看来，最佳做法是将 CSS 文件放在标题中
<head>
<link rel="stylesheet" href="css/layout.css" type="text/css">
</head>
and the Javascript file before the closing </body>tag
和结束</body>标记前的 Javascript 文件
<script type="text/javascript" src="script.js"></script>
</body>
Also if you have, like you said two CSS files. The browser would use both. If there were any selectors, ie. .content {}that were the same in both CSS files the browser would overwrite the similar properties of the first one with the second one's properties. If that makes sense.
另外，如果你有，就像你说的两个 CSS 文件。浏览器会同时使用两者。如果有任何选择器，即。.content {}在两个 CSS 文件中相同的浏览器会用第二个的属性覆盖第一个的相似属性。如果这是有道理的。
回答by Joe
Put Stylesheets at the TopLinks to discussion
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
在 Yahoo! 研究性能时，我们发现将样式表移动到文档 HEAD 会使页面加载速度更快。这是因为将样式表放在 HEAD 中可以让页面逐步呈现。
Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.
关心性能的前端工程师希望页面逐步加载；也就是说，我们希望浏览器尽快显示它所拥有的任何内容。这对于包含大量内容的页面和 Internet 连接速度较慢的用户尤其重要。向用户提供视觉反馈（例如进度指示器）的重要性已得到充分研究和记录。在我们的例子中，HTML 页面是进度指示器！当浏览器逐步加载页面时，标题、导航栏、顶部的标志等都作为等待页面的用户的视觉反馈。这改善了整体用户体验。
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.
将样式表放在文档底部附近的问题在于它禁止在许多浏览器（包括 Internet Explorer）中进行渐进式呈现。这些浏览器会阻止渲染，以避免在样式更改时重新绘制页面元素。用户被困在查看空白页面。
The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.
HTML 规范明确指出样式表要包含在页面的 HEAD 中：“与 A 不同，[LINK] 只能出现在文档的 HEAD 部分，尽管它可以出现任意次数。” 无论是空白的白屏还是无样式内容的闪烁，这两种选择都不值得冒险。最佳解决方案是遵循 HTML 规范并在文档 HEAD 中加载您的样式表。
Put Scripts at the Bottom
将脚本放在底部
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载的组件不超过两个。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。然而，在下载脚本时，浏览器不会启动任何其他下载，即使是在不同的主机名上。
In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用 document.write 插入页面的部分内容，则它不能在页面中移动到较低的位置。也可能存在范围界定问题。在许多情况下，有一些方法可以解决这些情况。
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
一个经常出现的替代建议是使用延迟脚本。DEFER 属性指示脚本不包含 document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox 不支持 DEFER 属性。在 Internet Explorer 中，脚本可能会延迟，但不会像您希望的那样延迟。如果一个脚本可以被推迟，它也可以移动到页面底部。这将使您的网页加载速度更快。
回答by shelhamer
- You should put the stylesheet links and javascript
<script>in the<head>, as that is dictated by the formats. However, some put javascript<script>s at the bottom of the body, so that the page content will load without waiting for the<script>, but this is a tradeoff since script execution will be delayed until other resources have loaded. - CSS takes precedence in the order by which they are linked (in reverse): first overridden by second, overridden by third, etc.
- 您应该将样式表链接和 javascript
<script>放在 中<head>，因为这是由格式决定的。然而，有些人将 javascript 放在<script>正文的底部，这样页面内容就会加载而无需等待<script>，但这是一种权衡，因为脚本执行将延迟到其他资源加载完毕。 - CSS 以它们链接的顺序（反向）优先：第一个被第二个覆盖，第三个覆盖，等等。
回答by Michael Irigoyen
You should put CSS in the <head>because that's what the specification says do to.
你应该把 CSS 放在里面，<head>因为这就是规范所说的。
If you have more than one CSS file, they will be loaded in the order you put them in the code. If there is style in the second CSS file, it overwrites the style in the first; That will happen by design. Thus, CascadingStyle Sheets.
如果您有多个 CSS 文件，它们将按照您在代码中的顺序加载。如果第二个 CSS 文件中有样式，则覆盖第一个中的样式；这将是设计使然。因此，级联样式表。
Most browser will still effectivly render CSS files out of the head, but your code is not semantically correct.
大多数浏览器仍然会有效地渲染 CSS 文件，但是您的代码在语义上是不正确的。
You can use JavaScript file links anywhere on the document. There are different reasons to use some in the <head>and some elsewhere on the page. (For example, Google analytic code is instructed to be put at the bottom.)
您可以在文档的任何位置使用 JavaScript 文件链接。有不同的原因<head>在页面上使用一些和一些其他地方。（例如，谷歌分析代码被指示放在底部。）
回答by Saloni shah
In my opinion best way is 1) place the CSS file in the header part in between head tag reason is first page show the view for that css require 2)and all js file should place before the body closing tag. reason is after all component display js can apply
在我看来，最好的方法是 1) 将 CSS 文件放在头部标记之间的标题部分，原因是第一页显示该 css 需要的视图 2) 并且所有 js 文件都应放在正文结束标记之前。原因是毕竟组件显示js可以应用
回答by Glenn Ferrie
You should put it in the <head>. I typically put style references above JS and I order my JS from top to bottom if some of them are dependent on others, but I beleive all of the references are loaded before the page is rendered.
你应该把它放在 <head> 中。我通常将样式引用放在 JS 上方，如果其中一些依赖于其他引用，我会从上到下排序我的 JS，但我相信所有引用都在页面呈现之前加载。
回答by zeal
CSS includes should go in the headbefore any jsscript includes.
Javascript can go anywhere, but really the function of the file could determine the location. If it builds page content put it on the head. If its used for events or tracking, you can put it before the </body>
CSS 包含应该放在head任何js脚本包含之前。Javascript 可以去任何地方，但实际上文件的功能可以确定位置。如果它构建了页面内容，就把它放在头上。如果它用于事件或跟踪，你可以把它放在</body>
回答by Albireo
Regarding <link />and <style />, you don't have a choice, they mustbe in the <head />section (see oneand two).
关于<link />and <style />，您别无选择，它们必须在<head />部分中（参见一和二）。
Regarding <script />it canappear both in <head />and <body />(see three), usually it is best practice to put them in the <head />since they are not really "content" (where "content" is what the user sees on screen), they are more something which "works on" the "content".
关于<script />它可以同时出现在<head />和<body />（见三个）中，通常最好将它们放在 中，<head />因为它们不是真正的“内容”（其中“内容”是用户在屏幕上看到的），它们更像是“作用于“内容”。
W3C's HTML4 specificationFTW!
W3C 的HTML4 规范FTW！
回答by Adam
And if you have more than one .css or .js file to call, just include them one after another, or:
如果您有多个 .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>
回答by Neha Sinha
AS per my study in css place always inside .like:-
根据我在 css 地方的研究，总是在 .like 中：-
<head>
<link href="css/grid.css" rel="stylesheet" />
</head>
and for script its depen :-
和脚本它的依赖： -
- If inside the script document. write present then it will be in the head tag.
- If script contain DEFER attribute, BECAUSE defer downloaded all in parallel
- 如果在脚本文件里面。写存在然后它将在 head 标签中。
- 如果脚本包含 DEFER 属性，因为延迟下载所有并行
