2

我有一个简单的基于 ASP.Net MVC3 的网络应用程序。我最近一直在做一些性能调整。我在 Mozilla 中使用 Firebug 来查看资源负载大小和时间。后来，我使用 YSlow 推导出一些可能的优化。

我想将重点缩小到“捆绑和缩小”的一般优化概念，我们将 js 和 css缩小并捆绑成单个组合的 js 和 css。根据 YSlow，它节省了额外的服务器请求以及一些带宽/时间。但是，就我而言，它是矛盾的！我正在使用SquishIt lib。

这是我的统计数据（请查看附件图片）

Old Login page: Requests(10), Size(434), Load Time in seconds(29), YSlow grade C(78)
New Login page: Requests(6), Size(414), Load Time in seconds(42), YSlow grade B(88)

旧的原始页面 - 原始旧页面 这是新的优化页面 - 新优化页面

理想情况下，它必须反转！但看起来组合的 js 文件占用了更多时间。我已经放慢了我的带宽以获得更准确的差异，并且我已经在非缓存中测试了它（也做了 Ctrl+F5），以确保两个页面都有公平的机会。他们使用相同的设置在同一个服务器上。

注意：请忽略图像中的最后一个图像重新加载 - 我做了刷新。我在登录页面上预加载了一些额外的 jQuery 库，以便后续页面获得缓存资源。您可以忽略这些事情，但请让我知道这是可能的还是我犯了一些错误？

关于捆绑和缩小的另一个查询- 如果我将 CDN 引用用于我的资源（不能捆绑），我认为它不适用。在那种情况下，什么是首选 - CDN 引用或捆绑？

4

1 回答 1

2

总的来说，我认为你走在正确的轨道上：更少的请求 + 更小的总请求大小 = 对大多数用户来说更好的性能。

在您的测试结果中，我认为您看到了几件事：

  1. 使用较大的组合文件的一个缺点是您失去了并行下载的一些好处。我认为这不是您案例的主要贡献者，但您可以在原始案例中看到许多 jquery JS 文件正在并行下载。
  2. 根据网络速度和服务器负载，总页面时间负载可能因运行而异。在您原来的情况下，jquery-ui 文件为 222KB，耗时 27.8 秒，速度约为 8 KB/秒。在您优化的页面中，新组合的 JS 为 254KB，耗时 41 秒，速度为 6.2 KB/s。这是非常粗略的数学，但我认为它可能会为您所看到的差异提供线索。

如果您的网站在公共互联网上可用，您可以使用WebPageTest或GTmetrix等工具从外部服务器（和多个位置）运行一些测量。

对于 CDN 与捆绑的问题，最终您可以以任何一种方式测试一些原型，看看哪种方式更适合您。一种选择是拥有来自 CDN 的不经常更改的大型文件，例如来自 CDN 的 jQuery，以及您自己的所有 JS 托管在您的服务器上（捆绑）。

关于静态文件的 CDN 托管需要记住的一件事，最大的好处是当您拥有一个地理分布的用户群时。然后他们可以利用全球 CDN 网络，从离他们更近（因此更快）的服务器获得静态文件。相反，如果您的用户群没有分布在世界各地，或者这是一个内部应用程序，那么使用 CDN 可能没有太多好处。

于 2013-03-28T15:41:14.330 回答