将 CSS 和 JavaScript 放在文件或主 HTML 中? [英] Put CSS and JavaScript in files or main 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.

最好的选择在哪里?

推荐答案

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

Yahoo(即使他们有许多内联样式和脚本)，建议将它们设为外部.我相信谷歌页面速度过去(或仍然如此?)也是如此.

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.

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

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....

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

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.

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

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.

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

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.

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

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 和 JavaScript 放在文件或主 HTML 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！