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

Question

虽然始终建议将JavaScript和CSS代码放入适当的文件中（如.js和.css），但大多数主要网站（如亚马逊，脸谱等）都占据了很大一部分他们的JavaScript和CSS代码直接在主HTML页面中。

哪里是最佳选择？

Answer 1

将.js放在多个文件中，然后打包，缩小并将其压缩成一个文件。

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

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

然后，您只需将一个css文件和一个js文件发送到要缓存的客户端。

你不用HTML内联它们。

如果你内嵌它们，那么对css 或 html 或 js的任何更改都会强制用户再次下载这三个。

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

不要看实况网站的例子，因为互联网上99％的例子都显示不良做法。

对于上帝的爱，请关注分离。你应该永远不会在html页面中使用内联javascript或内联css。

Answer 2

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

Yahoo（即使它们有许多内联样式和脚本），建议将它们设置为外部。我相信谷歌的网页速度曾经（或者仍然如此？）也是如此。

将它们分开是合乎逻辑的。将CSS和JS与HTML分开有很多好处。像逻辑代码管理，这些页面的缓存，较低的页面大小（你宁愿对400kb缓存资源请求〜200ms，或者每个页面上必须下载这些数据需要4000ms的延迟？），SEO选项（更少废话）谷歌查看脚本/样式是外部的时候，更容易缩小外部脚本（在线工具等），可以从不同的服务器同步加载它们....

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

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

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

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

Answer 3

一项有趣的调查可能是它们是否包含各种.css文件，无论您还看到哪种样式块。也许是开销或者方便。

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

Answer 4

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

Answer 5

我们的团队将其全部分开。像这样的所有资源都会进入一个名为_Content的文件夹。

CSS进入_Content/css/xxx.js

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

自定义页面事件和函数从页面调用，但放在_Content/js/Main.js

中的主JS文件中

图片将放在_Content/images/xxx.x

下的相同位置

这就是我们如何制定它，因为它保留了HTML标记应该是标记。

Answer 6

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