HTML 文件脚本和 CSS 放置答案

【问题标题】：HTML file script and CSS placementHTML 文件脚本和 CSS 放置
【发布时间】：2015-05-03 13:45:03
【问题描述】：

我正在观看 Doug Crockford's Theory of DOM 视频，在 16:50，他谈到了 <script> 标签和 CSS <link> 的放置。他提到将<script src> 放置在尽可能靠近身体底部的位置，并将<link> 放置在尽可能高的头部位置。由此，我有几个问题：

1) 我通过教程学习了 JavaScript。许多程序将它们的 JavaScript 放在它们的 <head> 标签中，紧跟在 CSS <style> 标签之后。他（2006 年？）视频中的信息现在过时了吗？

2) 这些规则是否也适用于 JavaScript <script type="text/javascript"> 和 CSS <style> 标签。如果是，为什么，这些标签与<script src> 和<link> 标签有什么区别？

3) 他说“尽可能减少脚本文件的数量”...但是如果我正在编写一个大型项目，我希望避免将所有 JavaScript 聚集在一起...而是我会更喜欢将我的代码分成有意义的文件。这有多大影响？

他提到放置会影响性能，因为“浏览器进行增量加载的方式对这些资源的放置非常敏感。”然而，虽然我没有进行严格的性能测试，但我并没有注意到放置差异对性能有很大的影响。他没有进一步解释这如何影响性能以及为什么它如此重要。

【问题讨论】：

回答您大部分问题的好网站可能是：developers.google.com/web/fundamentals/performance
@Snowman 好的，我已经删除了那个帖子

标签： javascript html css dom browser

【解决方案1】：

1) 不，信息不一定是过时的，但很多人只是一次加载所有资源。通常建议在 <body> 的末尾加载脚本，因为浏览器会停止加载引用的文件，从而延长加载时间。样式表包含在文件的开头，以便元素在文档加载时进行样式设置，而不是在最后一次全部设置。

2) <script src> 和 <link> 标记需要打开新连接，从而减慢加载时间。 <script type> 和 <style> 标记是内联的，因此不需要打开和等待新连接。

3) 每个脚本文件都是另一个必须打开的连接。打开的连接越少，网站的加载速度就越快。

总体而言，这些规则对于减少较慢连接或较大项目的加载时间更有效。

【讨论】：

【解决方案2】：

1) 当您在处理大型项目时，如果在许多页面中使用 js 代码和 css，那么您不要将这些所有代码放在每个页面中，只需将文件包含在您的页面中。

2) 如果您的代码会缩小，那么它将有助于快速加载。

3) 你可以使用来包含 css 和

【讨论】：