Chrome中的缩小图像速度很慢

Question

我正在制作一个脚本，并且Chrome存在问题。

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

除Chrome之外，所有浏览器都能正常运行。

我在Chrome中查看过分析器，看不到任何异常。 这些是大图像，但在所有其他浏览器中工作得很好（甚至是实时）。

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

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

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

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

Answer 1

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

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

所以，我正在回答这个问题：在这种情况下，Chrome很糟糕。

Answer 2

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

所以要解决它，你只需将这一行添加到css中，如果你的图像：

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

当图像静止时，您可以通过javascript将其关闭。

有关抗锯齿的更多信息： 缩放图像时禁用抗锯齿

Answer 3

你是如何调整图像大小的？ 使用高度/宽度或CSS变换？ 后者可能会带来更好的表现。

一些信息： 提高HTML5应用程序的性能

Answer 4

当您在Chrome中分析图像调整大小和解码的问题时，最好使用开发人员工具时间轴，因为它可以为您提供相对准确的统计信息，确切地说需要很长时间才能解码。

缩小尺寸（或重新调整尺寸）涉及Chrome必须解码您正在发送的图像（JPEG / PNG / GIF），然后执行额外的工作以将该图像调整为您要显示的容器（div）的大小在可能的情况下，Chrome团队的建议是将图像预分频到所需的正确宽度/高度。

现在你可能想知道：嗯，肯定这个问题只是桌面Chrome吸吮，对吧？ 它并不像那样明确。 特别是在浏览器较少访问强大的GPU / CPU的移动设备上，在那里执行那些调整大小操作的成本也很高。 所以简而言之：是的，有时候重新缩放大型图片在Chrome中会很慢。 尝试尽可能预定标，这些性能瓶颈应该消失。