javascript - 查看此网络优化报告 - 我该如何解决？

Question

大家好，我在 http://www.websiteoptimization.com/services/analyze/ 上运行了分析器我遇到了很多问题，最突出的是以下问题:

---

TOTAL_OBJECTS - 警告!此页面上的对象总数为 93，它们的数量将主导网页延迟。考虑将其减少到更合理的数量。每页超过 20 个对象，处理实际对象的开销(描述时间和等待时间)占整个页面延迟的 80% 以上。有关对象开销如何支配网页延迟的更多详细信息，请参阅网站优化 secret 中的图 II-3:显示对象开销主导网页延迟的延迟组件的相对分布。组合、细化和优化您的外部对象。将图形翻转替换为 CSS 翻转以加快显示速度并最大限度地减少 HTTP 请求。考虑使用 CSS Sprite 来帮助整合装饰图像。使用彩色背景、边框或间距等 CSS 技术代替图形技术可以减少 HTTP 请求。用 CSS 文本标题替换图形文本标题以进一步减少 HTTP 请求。最后，考虑通过使用不同的主机名或 CDN 来优化并行下载以减少对象开销。

TOTAL_IMAGES - 警告!此页面上的图像总数为 85 ，请考虑将其减少到更合理的数量。建议组合、替换和优化您的图形。用 CSS 滚动菜单替换图形滚动菜单，以加快显示速度并最大限度地减少 HTTP 请求。考虑使用 CSS Sprite 来帮助整合装饰图像。使用彩色背景、边框或间距等 CSS 技术代替图形技术来减少 HTTP 请求。用 CSS 文本标题替换图形文本标题以进一步减少 HTTP 请求。最后，考虑通过使用不同的主机名来优化并行下载以减少对象开销。

---

问题是提到的 85 张图像都在我的 css 文件中被引用 - 我不确定如何减少这个数字 - 但是我确实需要在我的网站中的某些时候使用所有这些文件。

进一步优化它的任何想法。

此外，即使在最大压缩后，我的 javascript 文件也高达 150K - 我已经想不出减少开销的想法，并且可以起诉一些提示。

Answer 1

您可以使用 CSS Sprites用于图像(例如菜单翻转或图标)。这有两个好处:

• 多个页面共用的 Sprite 图片允许浏览器缓存 sprite 图片，从而减少您网站其他页面的后续下载。
• Spriting 图像通过减少发送到服务器和服务器接收的请求数量来减少服务器负载，因为许多图像可以组合成一个更大的图像。

您说您的 JavaScript 已压缩到最大程度 - 但是，您的页面是否需要全部压缩？还是可以分成几页？此外，您的脚本中是否有一些不必要的或可以减少的部分，例如通过对您通常在脚本中执行的任务使用包装函数。一个简单的例子是使用 Prototype-esque $ 函数代替 document.getElementById，如果多次调用它可以显着减少 JavaScript 的大小。

此外，正如报告所建议的那样，尽可能使用带样式的文本而不是代表带样式文本的图像(当然这并非适用于所有情况)。