在我不在 html 中内联文件之前，文件应该有多大？ [关闭]答案

【问题标题】：How big should a file be before I don't inline it in html? [closed]在我不在 html 中内联文件之前，文件应该有多大？ [关闭]
【发布时间】：2014-07-25 15:31:28
【问题描述】：

Google 建议通过内联小的 CSS 和 javascript 来优化网页。

参考：https://developers.google.com/speed/pagespeed/service/InlineSmallResources

但是我们应该在什么时候停止内联，是否有一个建议的最大字符数，一个文件在引用而不是内联文件之前应该是更好的？

【问题讨论】：

如果页面上只有很少的元素并且这些元素只有很少的类/ID，我认为您可能会从内联样式中受益，否则这是不好的做法。我的意思是，如果您为其他 100 多个元素调用 css 文档，那么为其中几个元素设置内联样式是没有用的。
我认为本文的重点不是为非内联文件定义“最小”大小。使用尽可能少的请求更像是一种提醒（减少往返时间）。不要根据性能指标来决定是否要使用内联脚本或样式。您应该尝试将相关的 css 和 js 文件压缩并合并为一个。
当然还有@NicoO 所说的，尽可能合并css文档。
这样做的重点是尽量减少 HTTP 请求。如果您正在构建一个单页站点，无论出于何种原因，其内容都非常少，那么是的，您不妨使用内联样式，它消除了对另一个文件的 HTTP 请求的需要，从而为您节省了几毫秒的时间。请理解，如果您原本只有一个 HTTP 请求发送到单个 CSS 文件。如果您通过将代码内联来删除该请求，那么您只会为自己节省几十毫秒的时间，但代价是可以轻松编辑页面。
由于流水线，实际上从 2 个标签下载两个 50kb css 文件通常比下载单个 100kb 文件或从第一个导入第二个 50kb 文件更快。

标签： javascript css html web-optimization

【解决方案1】：

显然这不是一个完整的列表，但我认为这是一套不错的指南。

内联可能有益的情况：

样式或脚本仅用于该页面
单页应用
样式被确定为“关键”，并且会使页面看起来加载速度更快。见这篇文章：http://css-tricks.com/authoring-critical-fold-css/

内联可能有害的情况：

样式或脚本在多个页面上使用 - 如果在每个页面上内联，它们将不会被缓存，需要在每个页面上重新下载

【讨论】：

我正在写一个答案，但你打败了我，我认为你总结得更好。我认为这篇文章的主要目标是最小的网站，其中只有一个页面和非常少的内容。