1

除了一个问题,我有一个已完成的图像库。图库页面的滚动相当缓慢且缓慢。起初我以为只是这台计算机或浏览器,但它在拥有 10 倍图像的 facebook 画廊上运行并不慢。

页面加载后应该不再执行 javascript,所以我无法想象是我的 jQuery 导致了问题,但它可能是。有没有办法使用 Google 的开发者工具检查器或 Firefox firebug 来判断是否有 javascript 随时执行?我设置了断点并运行了代码,最终它停止了,我无法再进入任何功能。因此让我认为它不是 jQuery。

检查网络日志,我只提取了2.37MB的图像和资产(这是在我清除缓存之后,所以每个图像都是全新加载的),所以我不认为它纯粹是图像大小。

最后,我什至检查了我的任务管理器 CPU 和内存使用情况,当我在该页面上时它没有飙升,所以我认为它不是任何类型的无限循环或内存问题。

这是滚动滞后的页面:图库

4

1 回答 1

1

EDIT2:您可以尝试实现图像精灵,但我真的不建议在这种情况下使用它。

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

或者您可以使用 Photoshop 增加每个图像的图像优化。(如果您还没有这样做,建议您这样做。)...或像http://kraken.io/这样的在线图像优化器


编辑:您可以通过确保所有 Javascript 都被引用为外部文件来大大提高速度,删除您拥有的嵌入式 javascript。将所有javascript从您拥有它的最顶部移动到之前...

</body>

如果可能的话,将你所有的 javascript 文件组合成尽可能少的文件并缩小它们。


一些可能的改进... 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 文件放在 HEAD 中,并将 JavaScript 文件放在 BODY 的末尾以启用渐进式显示。

TOTAL_SIZE - 警告!此页面的总大小为 2987624 字节,在 56Kbps 调制解调器上将在 603.63 秒内加载。考虑将总页面大小减少到 100K 以下,以在 56K 连接上实现低于 20 秒的响应时间。超过 100K 的页面超过了 56Kbps 的大多数注意力阈值,即使有反馈也是如此。考虑使用网站优化秘诀优化您的网站,加速您的网站或就我们的优化服务联系我们。TOTAL_SCRIPT - 注意。此页面上的外部脚本文件总数为 5 ,请考虑将其减少到一两个。合并、重构和缩小以优化您的 JavaScript 文件。理想情况下,您的页面上应该有一个(甚至嵌入用于高流量页面的脚本)。考虑在服务器上将 JavaScript 文件缝合在一起以最小化 HTTP 请求。

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

CSS_SIZE - 注意。你的外部 CSS 总大小为 19839 字节,大于 8K 小于 20K。对于外部文件,最好将它们保持在 1160 字节以下,以适应一个更高速度的 TCP-IP 数据包(或其近似倍数)。考虑优化您的 CSS 并消除功能以将其减小到更合理的大小。MULTIM_SIZE - 恭喜,您所有外部多媒体文件的总大小为 0 字节,小于 10K。

于 2012-08-01T17:26:53.377 回答