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

【问题标题】：Why do SVG images on a page cause Chrome to use 100% of the CPU?为什么页面上的 SVG 图像会导致 Chrome 使用 100% 的 CPU？
【发布时间】：2011-09-08 09:55:34
【问题描述】：

我在页面上使用 SVG 图像（通过 CSS background-image 属性），当我在 Chrome 中查看此页面（Windows 上的版本 11.0.696.71）时，我的一个 CPU 内核达到 100% 并停留在那里永久性。我的 SVG 图像非常简单，并且在它自己的 XML 文件中定义：

<?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 时，问题就消失了。

【问题讨论】：

什么版本的 Chrome？什么操作系统？ jsbin.com/amaqo4 在 OS X 上的 Chrome 11 中没有此类问题。
查看jsbin.com/amaqo4/6（在 Windows 上的 Chrome 11 中）。看起来 SVG 可能需要在页面上至少使用两次作为背景图像，至少一次在表格行中使用。很奇怪。
有趣。这使我的一个核心保持在 10% 左右。

标签： google-chrome svg cpu-usage

【解决方案1】：

这是由 svg 元素上 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>

【讨论】：

【解决方案2】：

可能有很多原因：

SVG 大致相当于 Flash（如果它是你的东西）movieclips，每个元素都有其众多的事件、属性和属性，可以动画、脚本化、炒制、冷服务，以不可预知的方式与 HTML 内容交互，包括 alpha混合、命中框测试、路径裁剪、可能嵌入 SVG 的嵌入式 XML/HTML 内容、从 HTML 内容中获取维度、事件传播。
您的 chrome 版本有问题。
您的 chrome 版本有问题。
您的图形 API 不会加速此特定 SVG 实现使用的 alpha 合成。
您的图形驱动程序有问题。
您的操作系统有问题。

【讨论】：