将 CSS 和 JavaScript 放入文件或主要 HTML 中？
尽管始终建议将 JavaScript 和 CSS 代码放入适当的文件中（如 .js 和 .css），但大多数主要网站（如 Amazon、facebook 等）将大部分 JavaScript 和 CSS 代码直接放在 HTML 主页面中。
最好的选择在哪里？
Although it is always recommended to put JavaScript and CSS code into appropriate files (as .js and .css), most of major websites (like Amazon, facebook, etc.) put a significant part of their JavaScript and CSS code directly within the main HTML page.
Where is the best choice?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
将 .js 放入多个文件中，然后将其打包、压缩并 gzip 到一个文件中。
将 HTML 保存到多个单独的文件中。
将 .css 放入多个文件中，然后将其打包、压缩并 gzip 到一个文件中。
然后你只需发送一个css文件和一个js文件到客户端进行缓存即可。
您没有将它们内联到您的 HTML 中。
如果您内联它们，则对 css 或 html 或 js 的任何更改都会迫使用户再次下载所有三个。
主要原因是各大网站都有js&他们的文件中包含.cs，是因为主要网站代码腐烂了。大公司不维护标准和最佳实践，他们只是对其进行破解，直到它起作用，然后说“为什么在我们的网站上浪费钱，它起作用不是吗？”。
不要看实时网站的示例，因为互联网上 99% 的示例都显示出不良做法。
也出于上帝的爱，请分离关注点。您应该永远在 html 页面中使用内联 javascript 或内联 css。
Place your .js in multiple files, then package, minify and gzip that into one file.
Keep your HTML into multiple seperate files.
Place your .css in multiple files, then package, minify and gzip that into one file.
Then you simply send one css file and one js file to the client to be cached.
You do not inline them with your HTML.
If you inline them then any change to the css or html or js forces to user to download all three again.
The main reason major websites have js & cs in their files, is because major websites code rot. Major companies don't uphold standards and best practices, they just hack it until it works then say "why waste money on our website, it works doesn't it?".
Don't look at examples of live websites, because 99% of all examples on the internet show bad practices.
Also for the love of god, Separation of concerns please. You should never ever use inline javascript or inline css in html pages.
http://developer.yahoo.com/performance/rules.html#external
雅虎（尽管他们有许多内联样式和脚本），建议将它们设置为外部。我相信谷歌页面速度过去（或仍然如此？）也做了同样的事情。
将它们分开确实是合乎逻辑的事情。将 CSS 和 JS 与 HTML 分开有很多好处。诸如逻辑代码管理、这些页面的缓存、较小的页面大小（您愿意对 400kb 缓存资源进行大约 200 毫秒的请求，还是需要在每个页面上下载该数据而延迟 4000 毫秒？）、SEO 选项（更少的废话）谷歌查看脚本/样式何时是外部的），更容易缩小外部脚本（在线工具等），可以从不同的服务器同步加载它们......
这应该是您在任何网站中的主要目标。构成整个网站的所有样式都应位于一个文件中（或每个页面的文件，然后在更新时合并并缩小），对于 javascript 也是如此。
在现实世界中（不是为自己做一个项目，而是为想要结果的客户或利益相关者做一个项目），唯一一次加载另一个 javascript 资源或另一个样式表（因此使用内联样式/ javascript) 是指是否存在某种关于每个用户、每个会话或每个时间段的动态信息，而这些动态信息无法通过简单的任何其他方式来完成。示例：当我的网站有促销活动时，我们转储带有小型 JSON 信息对象的脚本标记。因为我们不会缩小和合并多个文件，所以将其包含在页面中更有意义。当然还有其他方法可以做到这一点，但它的成本为 20 美元，而它的成本可能 > 100 美元。 100 美元，用另一种方式做。
也许亚马逊/Facebook/谷歌等使用了如此多的内联代码，这样他们的服务器就不会被征税那么多。我不太确定一次请求 1MB 文件或请求 10 100KB 文件（为了示例，假设 1MB/10 = 100KB）之间的基准测试，但是什么会更快呢？可能是 1MB 文件，但可以同步加载较小的请求，这意味着这 10 个请求中的每一个都可能来自单独的服务器/域，从而减少总体加载时间。
此外，例如，谷歌主页似乎为小部件转储了一个 JSON 信息数组，大概是因为它编译了来自各种来源的所有信息，缩小它，缓存它，然后放入页面上，然后 javascript 函数构建布局（客户端处理能力而不是服务器端）。
http://developer.yahoo.com/performance/rules.html#external
Yahoo (even though they have many inline styles and scripts), recommends making them external. I believe google page speed used to (or still does?) do the same as well.
It's really a logical thing to have them separate. There are so many benefits to keeping CSS and JS separate to the HTML. Things like logical code management, caching of those pages, lower page size (would you rather a ~200ms request for a 400kb cached resource, or a 4000ms delay from having to download that data on every page?), SEO options (less crap for google to look through when scripts/styles are external), easier to minify external scripts (online tools etc), can load them synchronously from different servers....
That should be your primary objective in any website. All styles that make up your whole website should be in the one file (or files for each page, then merged and minified when updated), the same for javascript.
In the real world (not doing a project for yourself, doing one for a client or stakeholder that wants results), the only time where it doesn't make sense to load in another javascript resource or another stylesheet (and thus use inline styles/javascript) is if there's some kind of dynamic information that is on a kind of per-user, per-session or per-time-period that can't be accomplished as simply any other way. Example: when my website has a promotion, we dump a script tag with a small JSON object of information. Because we don't minify and merge multiple files, it makes more sense to just include it in the page. Sure there are other ways to do this, but it costs $20 to do that, whereas it could cost > $100 to do it another way.
Perhaps Amazon/Facebook/Google etc use so much inline code is so their servers aren't taxed so much. I'm not too sure on the benchmarking between requesting a 1MB file in one hit or requesting 10 100KB files (presuming 1MB/10 = 100KB for examples' sake), but what would be faster? Potentially the 1MB file, BUT smaller requests can be loaded synchronously, meaning each one of those 10 requests could come from a separate server/domain potentially, thus reducing overall load time.
Further, google homepages for example seem to dump a JSON array of information for the widgets, presumably because it compiles all that information from various sources, minifies it, caches it, then puts in on the page, then the javascript functions build the layout (client side processing power rather than server-side).
一个有趣的调查可能是它们是否包含各种 .css 文件，而不管您看到的样式块如何。也许是开销，或者也许是方便。
我发现，在与不同风格的界面开发人员（和内容部署人员）合作时，面对最后期限和“完成工作”，便利/权威往往会获胜。在大型项目中，可能会涉及诸如“不，你不会碰我们的样式表”之类的因素，或者如果还没有使用 http 请求的样式表，那么便利性就赢得了与良好实践的斗争。
An interesting investigation might be whether they include various .css files regardless of the style blocks you're also seeing. Perhaps it's overhead or perhaps it's convenience.
I've found that while working with different styles of interface developer (and content deployers) that convenience/authority often wins in the face of deadlines and "getting the job done". In a project of a large scale there could be factors involved like "No, you ain't touching our stylesheets", or perhaps if there isn't a stylesheet using an http request already then convenience has won a battle against good practice.
如果您的 css 和 javascript 代码供全局使用，那么最好将它们放入适当的文件中。
否则，如果代码只是某个页面使用，比如主页，直接放到html中也是可以的，而且有利于维护。
If your css and javascript code is for a global usage, then it is best to put them into appropriate files.
Otherwise, if the code is used just by a certain page, like the home page, put them directly into html is acceptable, and is good for maintenance.
我们的团队将其全部分开。所有此类资源都会放入名为
_Content的文件夹中。CSS 进入
_Content/css/xxx.jsJS 进入
_Content/js/lib/xxx.js（对于所有库包）自定义页面事件和函数被调用来自页面，但被放入
_Content/js/Main.js中的主 JS 文件中图像将进入
_Content/images/xxx.x下的同一位置这就是我们的布局方式，因为它保留了 HTML标记，因为它应该是标记。
Our team keeps it all seperate. All resources like this goes into a folder called
_Content.CSS goes into
_Content/css/xxx.jsJS goes into
_Content/js/lib/xxx.js(For all the library packages)Custom page events and functions get called from the page, but are put into a main JS file in
_Content/js/Main.jsImages will go into the same place under
_Content/images/xxx.xThis is just how we lay it out as it keeps the HTML markup as it should be, for markup.
我认为将 css 和 js 放入主 html 中可以使页面加载速度更快。
I think putting css and js into the main html makes the page loads fast.