缩小尺寸的图像在 Chrome 中很慢答案

【问题标题】：Down-Sized Images are Slow in Chrome缩小尺寸的图像在 Chrome 中很慢
【发布时间】：2013-04-17 22:22:26
【问题描述】：

我正在编写一个脚本，但遇到了 Chrome 问题。

这是我正在做的事情： 1. 将大图像加载到 DIV 中。 2. 缩放图像以适合 DIV 的大小。 3. 浏览器调整大小时，图片随浏览器放大缩小。

在除 Chrome 之外的所有浏览器中，一切都 100% 运行。

我在 Chrome 中检查了分析器，没有发现任何异常。这些是大图像，但在所有其他浏览器中都可以正常工作（甚至是实时）。

我已经阅读了大量在 Chrome 中使用缩小图像时注意到此问题的地方......但不是解决方案。

没什么特别的，只是用了一个

var img=new Image();
$(img).load(function(){ .... {);

有人知道可以在 Chrome 中使用的解决方法或解决方案吗？谢谢！

【问题讨论】：

标签： javascript ajax image google-chrome load

【解决方案1】：

因此，Chrome 在处理大图像甚至不是大但只是按比例缩小的图像时似乎很糟糕。我无休止地四处搜索，只是为了找到没有解决方案的类似问题。

仍然不确定为什么所有其他浏览器（甚至 IE 7 和 8）都可以处理大图像（使用 7mb 缩小的 PNG 进行测试），但 Chrome 甚至无法在不滞后的情况下制作 700kb 的缩小 JPG。

所以，我要回答这个问题：在这种情况下，Chrome 很烂。

【讨论】：

不高兴地报告此问题仍然存在。直接加载 6k x 22k 分辨率 (700kb) 的 tinypng 图像会在 chrome 中产生恐怖效果，但在其他浏览器上运行流畅。

【解决方案2】：

我遇到了完全相同的问题，但最近解决了。大量的性能占用了 chrome 的抗锯齿功能，因为它会在您调整图像大小时重新计算整个图像。

所以要解决这个问题，如果您的图像，您只需将此行添加到 css 中：

#myImage
{
     image-rendering: -webkit-optimize-contrast;
}

您可以在图像静止时通过javascript关闭它。

更多关于抗锯齿：Disable antialising when scaling images

【讨论】：

【解决方案3】：

您如何调整图像大小？使用高度/宽度或 CSS 转换？后者可能会带来更好的性能。

一些信息： Improving the Performance of your HTML5 App

【讨论】：

我从图像中提取高度/宽度，然后计算最接近容器的大小以保持比例相同。必须支持所有浏览器，因为它在其他所有方面都运行良好，我认为我不必只为 Chrome 进行转换？

【解决方案4】：

当您在 Chrome 中分析图像大小调整和解码问题时，最好使用开发者工具时间线，因为它可以为您提供相对准确的统计数据，准确了解解码需要很长时间。

缩小（或重新调整大小）涉及 Chrome 必须同时解码您发送的图像（JPEG/PNG/GIF），然后做额外的工作来将该图像调整到您想要的容器（div）中喜欢在其中显示它。Chrome 团队的建议是在可能的情况下将您的图像预缩放到所需的正确宽度/高度。

现在您可能想知道：嗯，这个问题肯定只是桌面 Chrome 很烂，对吧？它没有那么明确。特别是在浏览器无法访问强大的 GPU/CPU 的移动设备上，在那里执行这些调整大小操作的成本也会很高。简而言之：是的，有时在 Chrome 中重新缩放大图像可能会很慢。尝试在可能的情况下进行预缩放，这些性能瓶颈应该会消失。

【讨论】：