16

我想知道通过将所有需要下载的 css 脚本和内容放在一个文件中，你能赢多少？

我知道你会通过使用精灵赢得很多，但在某些时候这样做实际上可能会受到伤害。

例如，我的网站使用了很多小图标，并且在将所有这些图标组合在一起后，大多数页面都有不同的图标，我总共可能会得到超过 500kb，但是如果我每页制作一个精灵，它会减少到几乎 50kb/页所以就是这样凉爽的。

但是脚本js/css呢？通过为每个页面制作一个大约 100 多行的脚本，我能赢得多少？或者也许我根本不会赢？

问题，基本上我想知道下载一个文件的单个请求需要多少成本，并且使用当今的现代浏览器和高速连接拥有许多脚本/图像文件真的很糟糕。

编辑

谢谢大家的回答，很难只选择一个，因为每个答案都回答了我的问题，我选择奖励我认为最直接回答我关于请求成本问题的那个，我不会接受任何正确的答案因为每个人都是。

4

8 回答 8

10

多个请求意味着更多的延迟，因此这通常会有所作为。确切的成本取决于响应的大小、服务器的性能、它在世界上的托管位置、是否被缓存等等......要获得真实的测量结果，您应该尝试使用真实世界的示例。

我经常使用 PageSpeed，并且通常遵循记录在案的最佳实践：https ://developers.google.com/speed/docs/insights/about 。

尝试直接回答您的最后一个问题：额外的请求将花费更多。拥有许多文件不一定“真的很糟糕”，但如果可以的话，将内容合并到一个文件中通常是个好主意。

于 2016-02-22T10:07:33.770 回答
8

您的问题无法以真正通用的方式回答。

将脚本和样式表结合起来有几个原因。

使用 HTTP/1.1 的浏览器将打开多个连接，通常每个主机 2-4 个。因为几乎每个站点都有实际的 HTML 文件和至少一个其他资源，如样式表、脚本或图像，所以这些连接是在您加载初始 URL（如index.html.

  • TCP 连接的成本很高。这就是为什么浏览器会提前直接打开多个连接。
  • 连接数通常被限制在少数，每个连接一次只能传输一个文件。

也就是说，您可以将您的文件拆分到多个主机（例如一个额外的主机static.example.com），这会增加主机/连接的数量并可以加快下载速度。另一方面，由于更多的连接和额外的 DNS 查找，这会带来额外的开销。

另一方面，有正当的理由让你的文件分开。

最重要的是 HTTP/2。HTTP/2 仅使用一个连接，并通过该连接多路复用所有文件下载。网上有多个演示可以证明这一点，例如http://www.http2demo.io/

如果您将文件分开，它们也可以单独缓存。如果您只有小部分更改，浏览器可以重新加载更改的文件，所有其他文件都将使用304 Not Modified. 当然，您应该有适当的缓存标头。

也就是说，如果您有资源，您可以使用 HTTP/2 为支持它的客户端单独提供所有文件。如果您有很多旧客户端，您可以在它们使用 HTTP/1.1 发出请求时回退到组合文件。

于 2016-02-23T15:19:54.683 回答
5

棘手的问题:)

当然，简单的答案是更多的请求需要更多的时间，但这并不一定这么简单。

  • 浏览器打开到同一主机的多个 http 连接，请参阅http://sgdev-blog.blogspot.hu/2014/01/maximum-concurrent-connection-to-same.html因为那样，不是使用并行下载而是下载一个巨大的文件被http://www.sitepoint.com/seven-mistakes-that-make-websites-slow/视为性能瓶颈
  • Web 服务器应尽可能使用 gzip 内容编码。因此 HTML、JS、CSS 等文本资源的大小是相当压缩的。
  • 这些资产大部分是静态内容，因此标准的 Web 服务器应在它们上使用 etag 缓存。这意味着下次下载将是 26 字节，因为服务器告诉“未更改”而不是再次发送 32kbyte 的 JavaScript
  • 由于 etag 缓存，整个网站都应该是可缓存的（我假设您正在编写游戏或类似的东西，而不是一些老式的 J2EE servlet 页面）。
  • 如果你真的想要大文件，我建议制作 2-4 个大文件并下载它

所以把它放在一起：

  • 如果您只有静态内容，那么一切都一样，因为 etag 缓存会缩短从服务器下载的任何实际内容，服务器返回 304 Not modified 答案
  • 如果你有一些生成的动态内容（比如servlet页面），保持JS和CSS分开，因为它们可以单独缓存，只需要下载servlet页面
  • 检查您的服务器是否支持 gzip 内容编码进行压缩，这很有帮助:)
  • 如果您有多个动态内容（例如多个动态变化的图像），将它们表示为 2-4 个单独的图像以利用并行 http 连接进行下载是有意义的（尽管我很难想象现实生活中的这种用例）

请确保您没有动态提供静态内容。即尝试将图像加载到网络浏览器，打开网络流量视图，使用 F5 重新加载，然后看到您从服务器获得 304 Not modified，而不是 200 OK 和真实流量。最大的性能优化是你不会从服务器中提取任何东西，如果使用得当，它会开箱即用:)

于 2016-02-23T01:21:33.367 回答
3

如果您使用这些类型中的任何一种，您会赢得多少可能会根据您的具体需求而有所不同，但我会谈谈我的情况：在我的 Web 应用程序中，我们不会合并所有文件，而是有 2 种类型的文件，常见文件，和每页文件，其中我们有我们的应用程序全局需要的公共文件，以及仅用于其案例的其他文件，这就是原因。

在此处输入图像描述

以上是我的web应用的图表请求分析，你需要考虑的是这个

DNS 查找只发生一次，因为它在此之后缓存，但是，DNS 名称可能已经被缓存了。

对于每个请求，我们都有：

request start + initial connection + SSL negotiation+ time to first byte + content download

在大多数情况下，需要大部分请求时间的主要因素是内容下载大小，所以如果我有多个文件需要在所有页面中使用，我会将它们合并到一个文件中，这样我就可以保存 TCP堆栈时间，另一方面，如果我有需要在特定页面中使用的文件，我会将其分开，以便我可以节省其他页面中的内容下载时间。

于 2016-02-26T19:12:59.557 回答
3

我认为@DigitalDan 有最好的答案。

但问题掩盖了真正的问题，如何让我的页面加载更快？或者至少，看起来加载速度更快......

我会添加一些关于“首屏”的内容：基本上，您希望内联尽可能多地允许您的页面在第一次往返时呈现主要的可见内容，因为这是用户认为最快的内容，并且使确定页面上没有其他内容会阻止...

阿奇博尔德解释得很好：

https://www.youtube.com/watch?v=EVEiIlJSx_Y

于 2016-02-25T15:45:57.147 回答
2

实际上，许多 Web 开发人员面临的非常相关的问题（主题）。

我还将在此问题的其他贡献者中添加我的答案。

回答前先介绍

高性能网站取决于不同的因素，这里有一些考虑：

  • 网站大小
  • 网站的内容类型（主要内容文本、图像、视频或混合）
  • 您网站上的流量（平均有多少人访问您的网站）
  • 网络主机位置与您的主要访问者位置（在您的国家、地区和世界范围内），如果您有欧洲网站并且您的主机在美国，这很重要。
  • Web主机服务器（硬件）技术，我更喜欢SSD磁盘。
  • 如何设置和优化网络服务器（软件）
  • 是动态网站还是静态网站
  • 如果是动态的，您的代码和数据库的结构和设计方式

通过定义您的需求，您可能能够找到合适的策略。

关于你的一般问题

你的网站怎么样。我建议您查看 Steve Souders 在他的 Book High Performance Web Sites中的 14 条建议。

史蒂夫·苏德斯 14 条建议：

  1. 减少 HTTP 请求
  2. 使用内容交付网络 (CDN)
  3. 添加过期标头
  4. Gzip 组件
  5. 将样式表放在顶部
  6. 将脚本放在底部
  7. 避免使用 CSS 表达式
  8. 如果可能，将 JavaScript 和 CSS 设为外部
  9. 减少 DNS 查找
  10. 缩小 JavaScript
  11. 避免重定向
  12. 删除重复脚本
  13. 配置 ETages
  14. 使 Ajax 可缓存

关于你的问题

因此，如果我们js/css考虑以下内容将有很大帮助：

  1. 最好在不同的文件上有不同的代码。
    示例：您可能有page1、page2和。and uses and uses only uses all ，所以 最好将 JavaScript 放在 3 个文件中。您对包括您拥有但不使用的所有东西不感兴趣。page3page4
    Page1page2js1js2
    Page3js3
    Page4js1js2js3
  2. CSS 精灵
  3. CSS在顶部，JS在最后
  4. 缩小 JavaScript
  5. 将您的 JavaScript 和 CSS 放在外部文件中
  6. CDN，如果您使用 jQuery，请不要将其下载到您的网站，只需使用推荐的 CDN 地址。

结论

我很确定还有更多细节要写。并不是所有的建议都是实施所必需的，但重要的是要了解这些建议。正如我之前提到的，我建议你阅读这本小书，它为你提供了更多细节。最后没有完美的最终解决方案。您需要从某个地方开始，尽力而为并加以改进。没有什么是永恒的。

祝你好运。

于 2016-02-27T17:42:22.477 回答
1

拥有很多 100 行文件真的很糟糕，而且只有一两个大文件也很糟糕，尽管对于每种类型的 css/js/markup。

台式机主要具有高速连接，而移动设备也具有高延迟。

综合考虑这个主题的所有理论，我认为最好的方法应该更实用，不太准确，并且从统计的角度基于实际的连接速度和设备类型。

例如，我认为这是今天最好的方法：

1) 将向用户显示第一页/功能所需的所有内容放在一个文件中，应小于 100KB - 这绝对是一项要求。

2) 之后，按大小拆分或分组文件，以使延迟和下载时间不再明显。

为了简单和具体，如果我们假设：第一个字节的时间约为 200 毫秒，每个文件的大小应该在 120 KB 到 200 KB 之间，这对于当今的大多数连接来说是平均的。

于 2016-02-28T00:40:10.080 回答
1

你的问题的答案是真的取决于。

页面加载优化的最终目标是让您的用户感觉您的页面加载速度很快。

一些建议：

  • 不要合并像 jquery 这样的公共库 js css 文件，因为当您访问其他网站时，它们可能已经被浏览器缓存，所以您甚至不需要下载它们；

  • 合并资源，但至少需要单独的第一屏资源和其他资源，因为越早的用户可以看到一些有意义的东西，他们对你的页面的感觉就越快；

  • 如果您的几个页面共享了一些资源，请将合并后的文件分开为共享资源和页面特定资源，这样当您访问第二个页面时，共享的可能已经被浏览器缓存，因此页面加载更快；

  • 用户可能正在使用速度较慢或不一致的 3g/4g 网络的手机，因此即使是 50k 的数据或 2 个以上的请求也会让他们感觉不同；

于 2016-02-25T15:28:15.090 回答