0

我最近注意到 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 CSS 分析器中的选择器

我知道我在这里问了很多问题，但是是否有一个原因（除了它还没有实现）为什么“源”列没有被填充？

4

2 回答 2

2

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

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

据我所知，-webkit-transform-origin使用这种方式对整个页面强制执行硬件加速合成。

于 2012-12-05T19:38:48.717 回答
0

您可以仅通过使用命名空间将规则限制为 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，使用not()带有 SVG 命名空间的选择器应该可以工作：

@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;
}

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

于 2012-12-05T19:51:18.757 回答