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变换？后者可能会带来更好的表现。

Answer 4

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

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

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