为什么页面上的SVG图像会导致Chrome使用100％的CPU？

我在页面上使用SVG图像（通过CSS background-image属性），当我在Chrome（Windows版本11.0.696.71）中查看此页面时，其中一个CPU内核达到100％并保持永久。我的SVG图像是相当简单的，并在其自己的XML文件中定义：为什么页面上的SVG图像会导致Chrome使用100％的CPU？

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <rect width="100%" height="100%" style="fill:rgb(0,0,0);fill-opacity:.05"/> 
</svg>

更新：

您可能需要使用SVG以特定的方式在页面上遇到这个问题。这个HTML文件有问题（目前在网上http://jsbin.com/amaqo4/6）：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <table> 
    <tr style="background: url(YOUR-SVG-FILE.svg)"><td>test</td></tr> 
    </table> 
    <div style="background: url(YOUR-SVG-FILE.svg)">test</div> 
</body> 
</html>

当我删除无论是表或DIV，问题消失。

来源

2011-06-04 William Gross

什么版本的Chrome？什么OS？ OS X上的Chrome 11中的http://jsbin.com/amaqo4没有这样的问题。 – 2011-06-04 15:20:33

查看http://jsbin.com/amaqo4/6（在Windows的Chrome 11中）。看起来SVG可能需要在页面上至少使用两次作为背景图像，至少一次使用表格行。很奇怪。 – 2011-06-04 16:23:33

有趣。这使我的一个核心在10％左右。 – 2011-06-04 16:41:25

这是由于元素的隐式宽度和高度为100％造成的。在svg元素上明确指定width="100%" height="100%"会导致相同的问题。我发现这个问题可以通过使用无单位维度来解决，例如width="1" height="1"。

这里是我的SVG文件的修改版本，解决了这个问题：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="1" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <rect width="100%" height="100%" style="fill:rgb(0,0,0);fill-opacity:.05"/> 
</svg>

来源

2011-06-04 15:19:11

-4

可能有很多原因：

SVG大致相当于闪存（如果它是你的事）动画片段，每个元素都有其众多的事件，属性，属性，可以动画，脚本，sauted，冷服务，以不可预知的方式与HTML内容交互，其中包括alpha混合，hit box测试，路径剪辑，嵌入的XML/HTML内容嵌入SVG，从HTML内容获取维度，事件传播史。
你的铬版本是越野车。
您的镀铬版本是越野车。
您的图形api不会加速这个特定SVG实现使用的alpha合成。
您的图形驱动程序是越野车。
你的操作系统是越野车。

来源

2011-06-04 15:25:16 artificialidiot

为什么页面上的SVG图像会导致Chrome使用100％的CPU？

回答

相关问题