logo标签列表

Angular动画性能：状态/转换 vs 查询

cssangularperformanceanimationbrowser
11

我目前正在使用Angular动画。因此，我找到了两种将动画附加到组件的可能方法。以下是我将它们描述为状态/转换动画和查询动画。

在这个问题中，我主要想知道选择哪一种方式是否有性能差异！？

1. 状态/转换动画

.html

<div [@animation_foo]/>

.ts

trigger('animation_foo', [
    state('true', style({...}),
    state('false', style({...})       
    transition('true => false', animate(...)
]

2. 查询动画

.html

<div [@animation_foo]>
    <div class="bar"/>
</div>

.ts

trigger('animation_foo', [
    query('.bar', style({...}), animate('10ms', style({...}))
]

进一步思考：

  • 我对第2点“查询”最主要的担忧是：
  1. 如果您不止有一个查询，而是多个查询通过group（...）组合，并且css选择器将在更深层次（'.foo > :nth-child(n+3) .bar'）上查找元素，则必须迭代整个DOM树的很大一部分。
  2. 应用于元素的样式和动画发生在找到元素之后并在动画之前 - 每次都会发生 - 因为我期望编译器无法预编译它？

  • 环境/目标平台： 我知道这可能与普通的Web应用程序无关，但我尝试考虑具有多个路由器、嵌套组件和大量ngIf's ngFors的大型企业应用程序，因此我个人认为查询所有这些可能需要一些努力。

  • 浏览器： 我知道不同的浏览器行为不同。就我而言，我目前仅对Chrome感兴趣 - 但出于社区的考虑，一个通用的答案将是令人敬畏的。

如果您有任何其他重要的信息需要注意，分享一下会很好（错误等）

你尝试过使用开发工具记录两种选项的性能吗？ - sol
1
我尝试提供一个包含许多div的新原型应用程序，但这并没有产生任何可计数的结果。因此，总体问题是查询/状态动画会发生什么，然后我们可以进一步思考是否存在任何性能影响。 - Jonathan Stellwag
1个回答
7
1
谢谢你的有趣回答，但实际上它并没有试图回答我的问题，如果我理解正确的话。我不想知道angular动画/ web动画本身的速度比较/估计，我想知道是否有关于性能（以及其他事实，如果有的话）的建议，关于我是使用查询在angular动画中爬下dom树还是使用状态。状态是否预编译，因此我不需要搜索元素等等...如果我需要澄清问题，请让我知道。 - Jonathan Stellwag
@JonathanStellwag 对不起，我没有根据您的帖子弄清楚这一点。为什么要比较这两种方法？你实现了两个不同的东西。在第一种方法中，您将其应用于父div容器，在第二种方法中，您将动画应用于子元素，然后询问使用n个生成的子元素的动画性能。我的假设是不正确的吗？ - Julien Ambos
我尝试找到使用Angular动画库实现动画的最佳方式。因此，我的最大关注点是性能，以及每种"类型"动画的稳定性。我将澄清我的问题。而且，这两种方法都可以实现相同的动画效果。 - Jonathan Stellwag
1
这个问题的悬赏金额可能有点少了 :) 但我非常感谢您 - 回答这个问题需要付出很大的努力。但或许我将来会有相同的想法，或者曾经有人已经可以回答这个问题。如果我得到任何新消息或有时间建立一个测试环境，我也会回复这个问题，为了提供一些有用的信息。 - Jonathan Stellwag
1
谢谢您提供关于Angular动画的有用信息，但我不能接受这个问题已经得到了解答，因为它并没有回答我的具体问题。不过，我还是很感激您所提供的重要信息！谢谢。 - Jonathan Stellwag
显示剩余3条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接