将 CSS 和 JavaScript 放在文件或主 HTML 中？

Posted 2023-02-22

【中文标题】将 CSS 和 JavaScript 放在文件或主 HTML 中？

【英文标题】：Put CSS and JavaScript in files or main HTML?

【发布时间】：2011-11-19 05:21:03

【问题描述】：

尽管始终建议将 javascript 和 CSS 代码放入适当的文件（如 .js 和 .css），但大多数主要网站（如 Amazon、facebook 等）都将其 JavaScript 和 CSS 的重要部分直接在主 html 页面中编写代码。

最好的选择在哪里？

【问题讨论】：

这是一个有趣的观察。我想知道是不是因为大部分时间都花在了建立 HTTP 连接上？如果开销足够大，您可能希望尽可能多地打包到实际有效负载中。

是的，有趣的问题（虽然可能更适合 webmasters.SE？）

许多人会不同意，但在我看来，这没什么区别。我总是把自己写的css和js放到html页面中。当我可以轻松阅读内容时，更改它会更方便。

一方面亚马逊和 Facebook 等大型网站的“规则”与另一方面您的网站的“规则”并不相同。除非您的网站有数以亿计的访问者，否则您不必过多关注他们在做什么......

为什么你删除了你最近的问题***.com/questions/16294803/…？我给你答案

【参考方案1】：

一个有趣的调查可能是它们是否包含各种 .css 文件，而不管您还看到什么样式块。也许是开销，也许是方便。

我发现，在与不同风格的界面开发人员（和内容部署人员）合作时，便利性/权威性通常会在截止日期和“完成工作”时获胜。在大型项目中，可能会涉及诸如“不，您没有触及我们的样式表”之类的因素，或者如果还没有使用 http 请求的样式表，那么便利已经赢得了与良好实践的战斗。

【参考方案2】：

将您的 .js 放在多个文件中，然后将其打包、缩小并 gzip 到一个文件中。

将您的 HTML 保存到多个单独的文件中。

将您的 .css 放在多个文件中，然后将其打包、缩小并 gzip 到一个文件中。

然后你只需将一个css文件和一个js文件发送给客户端进行缓存。

您不要将它们与您的 HTML 内联。

如果您将它们内联，那么对 css 或 html 或 js 的任何更改都会强制用户再次下载所有三个。

主要网站的文件中有js和cs的主要原因是因为主要网站代码烂。大公司不坚持标准和最佳实践，他们只是破解它直到它起作用然后说“为什么在我们的网站上浪费钱，它不起作用？”。

不要查看实时网站的示例，因为互联网上 99% 的示例都显示了不良做法。

也是为了上帝的爱，请分离关注。您应该永远不要在 html 页面中使用内联 javascript 或内联 css。

【讨论】：

你说得对，这是善与恶的对比——+布鲁斯，你发现了邪恶，@Raynos，你在推动善。

【参考方案3】：

如果您的 css 和 javascript 代码用于全局使用，那么最好将它们放入适当的文件中。 否则，如果代码只是某个页面使用，比如首页，直接放到html中是可以接受的，有利于维护。

【讨论】：

“适合维护”。从什么时候开始，硬耦合对维护有好处。

有一个平衡点可以选择，如果一个页面一直在变，每次都要换js/css再gzip一遍。如果用户已经缓存了主 js/css，则无需重新加载 js/css。

【参考方案4】：

http://developer.yahoo.com/performance/rules.html#external

Yahoo（尽管它们有许多内联样式和脚本），建议将它们设为外部。我相信谷歌页面速度过去（或现在仍然如此？）也是如此。

将它们分开确实是合乎逻辑的事情。将 CSS 和 JS 与 HTML 分开有很多好处。诸如逻辑代码管理、这些页面的缓存、较小的页面大小（您是希望对 400kb 的缓存资源进行约 200 毫秒的请求，还是在必须在每个页面上下载该数据而延迟 4000 毫秒？）、SEO 选项（更少的废话） google 来查看脚本/样式何时是外部的），更容易缩小外部脚本（在线工具等），可以从不同的服务器同步加载它们....

这应该是您在任何网站中的主要目标。构成整个网站的所有样式都应该在一个文件中（或每个页面的文件，然后在更新时合并和缩小），对于 javascript 也是如此。

在现实世界中（不是为自己做一个项目，而是为想要结果的客户或利益相关者做一个项目），唯一一次加载另一个 javascript 资源或另一个样式表没有意义（因此使用内联样式/javascript）是指是否存在某种动态信息，这些信息是关于某种用户、每个会话或每个时间段的，而这些信息不能像任何其他方式一样简单地完成。示例：当我的网站有促销活动时，我们转储一个带有小型 JSON 信息对象的脚本标签。因为我们不会缩小和合并多个文件，所以将其包含在页面中会更有意义。当然还有其他方法可以做到这一点，但这样做要花费 20 美元，而另一种方法可能要花费超过 100 美元。

也许亚马逊/Facebook/Google 等使用了如此多的内联代码，因此他们的服务器不会被征税这么多。我不太确定一次请求 1MB 文件或请求 10 个 100KB 文件（假设 1MB/10 = 100KB 为示例）之间的基准测试，但什么会更快？可能是 1MB 的文件，但较小的请求可以同步加载，这意味着这 10 个请求中的每一个都可能来自单独的服务器/域，从而减少整体加载时间。

此外，例如，谷歌主页似乎为小部件转储了 JSON 信息数组，大概是因为它编译了来自各种来源的所有信息，将其缩小，缓存，然后放入页面，然后构建 javascript 函数布局（客户端处理能力而不是服务器端）。

【讨论】：

“动态信息”不好。动态生成js是邪恶的。你做错了。将该数据存储在 HTML 中或通过 REST 公开。

嗯，javascript 倒计时函数如何在不以某种方式将其转储到页面的情况下获取倒计时日期？？？

至少我有自豪感。最佳实践是有理由的最佳实践。可维护性和面向未来的证明非常有价值。相信我，从长远来看，这 8 个小时对公司来说更有价值。

如果您打算在几年内继续使用该系统。将动态 JS/CSS 转储到页面的可维护性可以忽略不计，因为（在我的情况下）它是通过管理活动的服务器端类转储的。最好的解决方案是什么，都与您的知识、技能以及工作场所对您的期望有关。如果你为我工作，并整天研究做一些简单的事情以使其成为“最佳实践”的最佳方法，我会当场解雇你。您应该始终衡量工作环境与他们所追求的标准的一致性程度。

克服自己，我是在笼统地说，所以我的回答可能对 OP 有一些用处。你认为微软、谷歌、雅虎或任何成功的公司是否都遵循每一个最佳实践？不，因为他们知道在花费愚蠢可笑的时间制作“完美”的东西和制作实用的东西之间的界限在哪里。 OP想知道最好的选择是什么。最好的选择是遵循最佳标准，但要意识到有时您可能不被允许，或者由于时间或预算限制，“黑客”更有意义。

【参考方案5】：

我们的团队将这一切分开。像这样的所有资源都放在一个名为 _Content 的文件夹中。

CSS 进入_Content/css/xxx.js

JS 进入_Content/js/lib/xxx.js（适用于所有库包）

从页面调用自定义页面事件和函数，但放入_Content/js/Main.js的主JS文件中

图片会放到_Content/images/xxx.x下的同一个地方

这就是我们的布局方式，因为它使 HTML 标记保持原样，用于标记。

【参考方案6】：

我认为将 css 和 js 放入主 html 可以使页面加载速度更快。

【讨论】：

虽然在快速的互联网连接中很难衡量。