HTML文件脚本和CSS放置

HTML file script and CSS placement

本文关键字：CSS 放置脚本文件 HTML 更新时间：2023-09-26

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

1）我通过教程学习了JavaScript。许多程序将JavaScript放在CSS <style>标记之后的<head>标记中。他（2006？）视频中的信息现在已经过时了吗？

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

3）他说"尽可能减少脚本文件的数量"。。。但如果我正在编写一个大型项目，我想避免将所有的JavaScript聚集在一起。。。相反，我更愿意将我的代码分离成有意义的文件。这会产生多大影响？

他提到位置会影响性能，因为"浏览器进行增量加载的方式对这些资产的位置非常敏感。"然而，尽管我没有进行严格的性能测试，但我没有注意到位置差异会导致性能的巨大变化。他没有进一步解释这是如何影响绩效的，以及为什么它如此重要。

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

2） <script src>和<link>标签需要打开一个新的连接，从而降低了加载时间。<script type>和<style>标签是内联的，因此不需要打开和等待新的连接

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

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

1）当你在处理大型项目时，如果在许多页面中使用了js代码和css，那么你就不会把这些代码都放在每个页面中，而只是把文件包括在你的页面中。

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

3）您可以使用<链接>，用于包含css和<javascript的script>。