1

我非常了解如何优化图像的一些方法（例如使用 sprites 或 smushit.com）。但是，如果正在加载的图像来自用户（动态）怎么办？这意味着我们无法将其制成精灵或事先对其进行优化。

例如，在一个页面上，正在加载大约 20 个用户头像以及一些其他用户上传的照片缩略图。一些用户上传的头像可能在 20KB-150KB 之间，这会显着减慢页面加载速度

4

2 回答 2

1

您可以使用!YSlow – 一个帮助您最小化页面加载时间的工具。这些是它使用的规则：

  • 最小化 HTTP 请求
  • 使用内容交付网络
  • 避免空 src 或 href
  • 添加过期或缓存控制标头
  • Gzip 组件
  • 将样式表放在顶部
  • 将脚本放在底部
  • 避免使用 CSS 表达式
  • 使 JavaScript 和 CSS 外部化
  • 减少 DNS 查找
  • 缩小 JavaScript 和 CSS
  • 避免重定向
  • 删除重复的脚本
  • 配置 ETag
  • 使 AJAX 可缓存
  • 将 GET 用于 AJAX 请求
  • 减少 DOM 元素的数量
  • 没有 404
  • 减小 Cookie 大小
  • 为组件使用无 Cookie 域
  • 避免过滤器
  • 不要在 HTML 中缩放图像
  • 使 favicon.ico 小且可缓存
于 2011-08-25T10:08:17.693 回答
1

一种可能的方法是延迟加载图像，即仅在用户的视口内加载图像（并在用户滚动页面时不断加载图像）。当然，这只有在图像的重要部分低于折叠时才会产生好处。

有一堆插件可以自动延迟加载图像——可能也适用于您使用的 JS 框架。快速搜索应该可以帮助您。

于 2011-08-25T12:00:14.267 回答