【发布时间】：2015-07-01 22:38:48
【问题描述】：
我只是一个简单的 UX 设计师，正在加强他的代码技能，所以请原谅我的无知和蹩脚的代码。
我正在重新启动我的投资组合网站。最初的无缝网格是使用类似 JQuery 插件的 Masonry 构建的。虽然它非常缓慢。 http://jack-a-lope.net/Illustration.html
我决定使用 Masonry 重建它，但担心性能可能仍然很差，所以我找到了一个全 CSS 解决方案，我希望加载速度更快。 https://css-tricks.com/seamless-responsive-photo-grid/
我在另一个网站上寻求帮助，并被告知问题不是插件速度慢，而是我预加载了 3mb 的图像。我已经调整了所有图像的大小，并尽我所能对它们进行了优化，减少了相当大的内存块，但它仍然加载缓慢。我究竟做错了什么？为什么较大的网站可以加载这么多图像，但这段代码却令人窒息？我还需要做其他事情来优化它吗？只是在页面上粘贴一个加载屏幕还是什么？
[编辑：]所有图像都已压缩和优化。图像实际上加载得很快，问题是我得到了一个 FOUC，而 JS 需要时间来重新格式化图像等。
【问题讨论】：
-
更大的网站通过仅加载他们需要使用 ajax 进行延迟加载的图像来解决此问题。 （这就是为什么当您到达某些页面上的某个部分时，它会给您一个加载指示器）没有向我们展示您实际在做什么，您的问题非常广泛。
-
根据谷歌页面洞察（我强烈推荐大家使用，developers.google.com/speed/pagespeed/insights/…）你的图片已经过优化。为了不损失图片质量，您需要使用延迟加载、Seth 建议的 ajax 或整个页面上的加载器。那些拥有大量图片的网站的图片分辨率要低得多。此外，您提供的 cat 示例需要很长时间才能运行，该页面顶部的图片是单张图片，底部是实际示例。
-
是的，我尝试了底部的实际示例，它似乎加载速度更快。 CSS通常比JS快吗？我一直有这样的印象。 @SethMcClaine 所以我想处理这个问题的唯一方法是加载，嗯......该死。我希望我可以优化它而不需要这样做。我基本上只是在页面上加载图像，并应用了一个名为“gridify”的彩盒灯箱和 jquery 插件。没有延迟加载等。
-
使用 Chrome，右键单击您的页面并转到检查元素，然后转到网络选项卡并单击复选框以禁用缓存。从这里您可以看到每个元素需要多长时间。 Gridify 耗时 159 毫秒，速度很快。 CSS 解决方案不会切实提高速度。问题在于图片的分辨率，为了保持相同的质量，您需要实施上述解决方案，它们只是传输的数据过多。
-
一种解决方法是添加一个占据页面第一个“滚动”的大横幅。横幅将立即加载，并且您的所有图像（位于页面下方）可以在他们查看您的精美横幅时加载。
标签： javascript jquery html css optimization