1

如前所述，画布上的元素在画布本身被拖动后会跳转。我正在使用 -webkit-transform: translate(x,y) 来拖动画布。关于如何解决这个问题的任何想法？

4

1 回答 1

0

在 CSS 中查找导致重排的更改：

  • 可见性：隐藏/可见
  • 显示：无
  • ：徘徊

和 JavaScript：

  • offsetWidth 或 offsetHeight
  • 滚动事件

关于 CSS3 选择器的可悲事实是，如果您关心页面性能，则根本不应该使用它们。用类和 id 装饰您的标记并仅在这些上进行匹配，同时避免使用兄弟、后代和子选择器，实际上会使页面在所有浏览器中的性能显着提高。使用父选择器，很容易意外地导致文档范围内的 grovel。人们可以并且将会滥用这个选择器。支持它就是给人们很多绳子来吊死自己。

完整的配置文件适用于对性能不是非常敏感的上下文。例如，选择器 API 规范 [SELECTORS-API] 的实现应该使用“完整”配置文件。它包括本文档中定义的所有选择器。

符合选择器级别 4 的 CSS 实现必须使用“快速”配置文件进行 CSS 选择。

快速配置文件适用于任何上下文，包括动态浏览器 CSS 选择器匹配。它包括本文档中定义的每个选择器，除了：

:matches()、:not()、:nth-match() 和 :nth-last-match() 中的组合子。

参考组合器

主题指标

特别是，在浏览器正在查看它正在考虑的大多数选择器与所讨论的元素不匹配的情况下。所以问题变成了决定选择器不能尽可能快地匹配的问题。如果在匹配的情况下需要做一些额外的工作，您仍然会赢，因为您在不匹配的情况下节省了所有工作。

使用浏览器特定的选择器来定位文档本身：

@-moz-document url-prefix() 
  {  
  @media all
    {
    .foo { color: red } /* Firefox */
    }
  }

*::-ms-backdrop, .foo { color: red } /* IE11 */

*:-webkit-any-link, .foo { color: red } /* Webkit */

如果要根据上下文引用子元素，请使用 HTML5 和 CSS3 命名空间的 XML 序列化：

@namespace m "http://www.w3.org/1998/Math/MathML/";

m|math { border: 1px solid blue; }

如果要基于父伪类显示子元素，可以定义子元素的默认状态，然后为父元素的每次状态变化重新定义：

li:hover > a * { display: none; }

li:hover > a:hover * { display: block; }

参考

于 2013-12-06T03:15:16.870 回答