禁用 chrome 用户代理样式表 * SVG 的选择器？答案

【问题标题】：Disable chrome user agent stylesheet * selector for SVGs?禁用 chrome 用户代理样式表 * SVG 的选择器？
【发布时间】：2012-12-06 03:51:18
【问题描述】：

我最近注意到 Chrome 将以下 CSS 规则应用于所有 SVG 元素（无论它们如何嵌入 [object、embed、iframe 或 inline]）：

* {
  -webkit-transform-origin-x: 0px;
  -webkit-transform-origin-y: 0px;
  -webkit-transform-origin-z: initial;
}

运行 CSS 选择器分析器，* 选择器是迄今为止最大的性能损失。如果页面中有几个非常复杂的 SVG，这似乎会导致滚动等感觉迟缓。

我的问题是：我该如何解决这个问题？有什么方法可以删除这条规则（不要覆盖，因为在这种情况下会导致选择器性能变差）？

这可能是 Chrome 团队的疏忽，或者可能是因为我不明白的原因而存在（奖励点也可以解释为什么它存在以及如果我错了希望它消失）。

也许我也错误地阅读了探查器。这是一个屏幕截图（删除了不相关的选择器）。

我知道我在这里问了很多问题，但是否有原因（除了尚未实施）为什么“源”列未填充？

【问题讨论】：

你确定缓慢是因为选择器而不是因为 Chrome 在渲染 SVG 时速度很慢吗？
一点也不。可能就是这样，但我无法测试，因为我无法禁用用户代理样式表。
您暗示选择器仅针对 SVG，但这是不可能的。从 transform-origin (developer.mozilla.org/en-US/docs/CSS/transform-origin) 的目的来看，在每个元素上都有一个逻辑默认状态似乎是合适的。
它只适用于 SVG 文档。所以只在 SVG 元素上。

标签： css google-chrome svg profiling

【解决方案1】：

Source 列未填充，因为配置文件中列出的特定规则没有源文件。这是由于驻留在用户代理样式表中的规则，它有点“硬编码”到 Chrome 代码中，并不对应于实际资源。

现在，尝试切换到绝对时间（配置文件视图下方状态栏中的% 按钮），看看它实际花费了多少毫秒。我敢打赌，除非您将 HTML5 规范视为单个页面，否则您会感到惊讶。

据我所知，-webkit-transform-origin 就是通过这种方式对整个页面实施硬件加速合成。

【讨论】：

即使对于我自己的样式规则（我已在图像中删除，但我可以保证你在那里），源列也没有填充。
确认，感谢您的报告...bugs.webkit.org/show_bug.cgi?id=104225 归档。

【解决方案2】：

您可以仅通过使用命名空间将规则限制为 HTML，至少在 XHTML 中（不确定“普通”HTML）：

@namespace html 'http://www.w3.org/1999/xhtml'
html|* {
  -webkit-transform-origin-x: 0px;
  -webkit-transform-origin-y: 0px;
  -webkit-transform-origin-z: initial;
}

（比较Tinkerbin 上的另一个示例）。

对于“普通”HTML，使用带有 SVG 命名空间的 not() 选择器应该可以工作：

@namespace svg 'http://www.w3.org/2000/svg';
*:not(svg|*) {
  -webkit-transform-origin-x: 0px;
  -webkit-transform-origin-y: 0px;
  -webkit-transform-origin-z: initial;
}

不过，我不确定这是否会提高性能。

【讨论】：

我认为这没有帮助，因为我无法访问 Chrome 应用于 SVG 的用户代理样式表。如果我在自己的样式表中应用这条规则，似乎并没有什么不同。