缓慢滚动图像库

Question

我有一个图像库，除了一个问题完成。画廊页面的滚动相当滞后，速度缓慢。起初我以为这只是这台电脑或浏览器，但它不会在拥有10倍图像的脸书画廊上行动迟缓。

页面加载后应该没有更多的JavaScript执行，所以我无法想象这是我的jQuery导致的问题，但它可能是。如果有JavaScript在任何时候执行，有没有办法告诉使用谷歌的开发工具督察或Firefox萤火虫？我设置了断点并遍历代码，并最终停止，并且我无法再进入更多功能。因此让我觉得它不是jQuery。

检查网络日志，我只在图像和资源2.37MB拉（这是我后清除缓存，所以每一个图像加载全新的），所以我不认为其纯粹的图像尺寸。

最后，我甚至检查了我的任务管理器CPU和内存使用情况，当它在页面上时并没有出现尖峰，所以我不认为它存在任何类型的无限循环或内存问题。

继承人具有laggy滚动页面：Gallery

Answer 1

EDIT2：您可以尝试实现图像的精灵，但我真的wouldn't recommend it了这种情况。

http://www.w3schools.com/css/css_image_sprites.asp

或者你可以增加与Photoshop每个图像的图像优化。（建议做，如果你还没有。）......或在线图像优化像http://kraken.io/

---

编辑：你可以大大增加速度，确保所有的Javascript被引用为外部文件，删除嵌入的JavaScript你有。将所有的JavaScript从最高层，你拥有它的权利之前...

</body> 

如果可能的话你所有的JavaScript文件合并到尽可能少和minify他们。

---

从一些可能的改进... http://analyze.websiteoptimization.com/

分析和建议

TOTAL_HTML - 恭喜你，HTML文件此页面上的总数（包括主HTML文件）为1，其最浏览器可以多线程。最小化HTTP请求是网站优化的关键。

TOTAL_OBJECTS - 警告！此页面上的对象总数为41，其数量将主导网页延迟。考虑将其减少到更合理的数量。每页超过20个对象时，处理实际对象（描述时间和等待时间）的开销占整个页面延迟的80％以上。请参阅图II-3：延迟组件的相对分布情况，显示对象开销主导网站优化中的网页延迟秘密，以获取有关对象开销如何主导网页延迟的更多详细信息。组合，优化和优化您的外部对象。用CSS滚动替换图形滚动来加速显示并最小化HTTP请求。考虑使用CSS精灵来帮助合并装饰图像。使用CSS技术（如彩色背景，边框或间距而不是图形技术）可以减少HTTP请求。用CSS文本标题替换图形文本标题以进一步减少HTTP请求。最后，考虑使用不同的主机名或CDN优化并行下载以减少对象开销。

TOTAL_IMAGES - 警告！此页面上的图像总数为32，请考虑将其减少到更合理的数量。建议组合，替换和优化图形。用CSS翻转菜单替换图形翻转菜单以加速显示并最小化HTTP请求。考虑使用CSS精灵来帮助合并装饰图像。使用CSS技术（如彩色背景，边框或间距）而不是图形技术来减少HTTP请求。用CSS文本标题替换图形文本标题以进一步减少HTTP请求。最后，考虑通过使用不同的主机名来优化并行下载以减少对象开销。

TOTAL_CSS - 小心。此页面上的外部CSS文件总数为3，请考虑将其减少到更合理的数量。由于外部CSS文件必须位于HTML文档的HEAD中，因此必须在显示任何BODY内容之前加载它们。虽然它们被缓存在后续请求上，但CSS文件会减慢页面的初始显示速度。组合，优化和优化外部CSS文件。理想情况下，您应该在页面上放置一个（或者甚至将CSS嵌入高流量页面）。您可以使用简化属性优化CSS文件，进行分组，然后缩小并且GZIP对它们进行压缩以减少它们的占用空间。请记住将CSS文件放在BODY末尾的HEAD和JavaScript文件中，以启用渐进式显示。

TOTAL_SIZE - 警告！此页面的总大小为2987624字节，它将在56Kbps调制解调器上以603.63秒加载。考虑将总页面大小减少到小于100K，以在56K连接上实现小于20秒的响应时间。即使有反馈，超过100K的页面也会超过56Kbps的大多数关注阈值。考虑使用网站优化秘诀优化您的网站，加快您的网站或与我们联系我们的优化服务。 TOTAL_SCRIPT - 小心。此页面上的外部脚本文件总数为5个，请考虑将其减少到一个或两个。合并，重构和缩小以优化您的JavaScript文件。理想情况下，您应该在自己的网页上放置一个（或者甚至为高流量页面嵌入脚本）。考虑在服务器上一起缝合JavaScript文件以尽量减少HTTP请求。将外部JavaScript文件放在BODY的底部，而HEAD中的CSS文件可以在XHTML网页中进行逐行显示。

HTML_SIZE - 恭喜，此HTML文件的总大小为1472字节，小于50K。假设您指定了图片的高度和宽度，这个尺寸允许您的HTML在10秒内显示内容，平均用户愿意等待页面显示而没有反馈。 IMAGES_SIZE - 警告！您的图片的总大小是2900543字节，超过100K。考虑切换图形格式以实现更小的文件大小（例如，从JPEG到PNG）。最后，用图形技术替代CSS技术来创建彩色边框，背景和间距。 SCRIPT_SIZE - 警告！外部脚本的总大小为65770字节，超过20K。考虑优化您的JavaScript的大小，将它们结合起来，并在适当的位置使用HTTP压缩来放置文档头部的任何脚本。您可以将CSS菜单替换为基于JavaScript的菜单，以最大限度地减少甚至消除JavaScript的使用。

CSS_SIZE - 小心。外部CSS的总大小为19839字节，大于8K且小于20K。对于外部文件，理想情况下保持它们小于1160字节以适应一个更高速度的TCP-IP数据包（或其近似倍数）。考虑优化你的CSS和消除功能，以减少到更合理的大小。 MULTIM_SIZE - 恭喜，所有外部多媒体文件的总大小为0字节，小于10K。