问题标签 [jank]

我试图理解为什么我有几个由 Chrome 开发工具报告的长帧。

火焰图中的第一行（调用堆栈的顶部）主要是Timer Fired事件，由jQuery.Deferred()s 执行一堆$(function(){ });准备好的函数触发。

如果我深入研究 jQuery 源代码并用火焰图替换它们的使用setTimeout并requestAnimationFrame没有太大变化，我仍然会在单个帧内触发许多 rAF（如开发工具报告的那样），从而产生长帧。我本来希望做下面的伪代码：

在两个不同的动画帧上执行。不是这样吗？

所有正在执行的 JS 都是必要的，但是我应该怎么做才能将它作为“微任务”执行（如暗示，但此处未解释https://developers.google.com/web/fundamentals/performance/rendering/ optimize-javascript-execution）何时setTimeout并且rAF似乎没有实现这一点。

更新

这是其中似乎没有任何回流（强制或以其他方式）的长帧之一的放大照片。为什么这里所有的 rAF 回调都是在一帧内执行的？

我们有一个带有 sidenav 的 Angular 4 Web 应用程序。当点击汉堡图标时，sidenav 动画从右到左打开，通过 JS 给它一个宽度，通过 CSS 给它一个过渡，并且背景中的主要内容 div 淡化为不透明的黑色。

问题是在 sidenav 的打开和关闭时笨拙的打开动画 jank。

请记住，我对 Angular 还是个新手。代码是：

我使用 zindex 设置它的原因是因为其他组件的视图似乎存在问题。如果我删除 zindex，那么透明到黑色的不透明度不会显示在顶部，它会堆叠在主要内容下方。我已经尝试了一切来正确堆叠（在不同的 div 中使用 zindex，在 CSS 中添加定位），但不确定这是否是 Angular 的问题，或者我错过了什么，或者上面的代码是否很糟糕。如果我删除 zindex，动画会更流畅。

此外，这在带有 Google Chrome 和 Safari 的 Mac 上更为明显（在视网膜屏幕上更为普遍），在 Firefox 上运行正常，在 Windows 上运行正常。

期待任何反馈！

HTML：

萨斯：

我不确定这是否是问这个问题的合适地方；我考虑过软件推荐，但我想我会先在这里试一试。

我正在创建一个 PWA，并且在每次迭代中，我真的很想专注于让它看起来/感觉不那么笨拙和尽可能平滑。好吧，就像一个原生应用程序。

所以这就是问题所在——我正在使用 Semantic-UI-React 提供的转换（动画），虽然当一个元素占据它的空间时它工作得很好，但我想知道是否有一种做法或模式来处理与正在动画的元素相邻的 DOM 元素？

我在下面提供了一个 GIF 来说明我的意思。我想我可以将动画元素移出表单的容器以防止卡顿，但我想知道是否有更优雅的模式或方法来解决这个问题......

谢谢！

我有一个活动来衡量布局的动画/布局/测量/等需要多长时间。

骨架布局不过是FrameLayoutwithmatch_parent和 id root。简单的布局就是：

在活动中，我已经推迟了addView()，所以我确定我只是在衡量那个，没有其他影响。

现在，无论我做什么，测量结果都超出了图表。它至少需要 17 毫秒（平均更像 25 毫秒），这是 JANK（>16.7 毫秒）的明确来源。最长的持续时间是命令问题，我从FrameMetricsgpu 分析栏和类似的持续时间也从systrace获得相同的结果。

我究竟做错了什么？是否有可能addView（或inflate）任何布局都非常昂贵，以至于 Android SDK 应用程序总是会出现 JANK？为什么，如果在 中设置相同的布局（合并为一个）setContentView()，它需要更少的时间（虽然不是很多）？

PS：我尝试了其他布局，例如约束，线性，相对。合并标签有一点帮助，但并不总是可用。
PPS：以编程方式创建布局没有效果，因为我已经分离了充气部分。

我正在尝试为 ScrollTop 设置动画并遇到 Jank 的一些问题。

这是我目前的脚本。在滚动浏览器时，我正在滚动“花式滚动”的 div 非常笨拙。

不幸的是，我无法链接到开发站点，因为它是针对客户的，但以下是它的所有代码。滚动条似乎可以很好地滚动，但鼠标滚动却令人难以置信。

任何帮助将非常感激。

我想知道 css 动画（关键帧）与 css 过渡的性能差异。

在我的测试中，似乎在某些情况下，过渡效果比关键帧好得多。这篇文章也提出了相同的建议，但它是从 2015 年开始的，所以认为它可能已经过时了https://www.pixelstech.net/article/1434375977-CSS3-animation-vs-CSS3-transition

查看 MDN https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance 它指出“在性能方面，使用 CSS 过渡或动画实现动画没有区别。它们都是在本文中归类在同一个基于 CSS 的保护伞下。”

所以我很惊讶地看到测试中的差异。也许它们在 Firefox 上是一样的，但使用 Chrome 我肯定会看到不同。

我已经对代码沙箱进行了一些测试，以显示带有关键帧与过渡的动画卡顿。这里有一些重要因素： 1. 我正在为变换和边界半径设置动画。我知道你“不应该”为边界半径设置动画，但这是测试的一部分。2. 当我将这两个测试组合成一个 SPA 并在它们之间切换时，它们都表现良好，所以这可能与页面加载有关。

要查看测试的所有 jankiness，请使用 chrome 开发工具选择“mid-tier mobile”。

1. Janky css 动画 https://codesandbox.io/s/perf-test-css-animation-nl6xs

2. 平滑的 css 过渡 https://codesandbox.io/s/perf-test-css-transition-fgd7w

对此的任何帮助将不胜感激。我确信我们无法修复它，但想知道为什么关键帧有时与过渡相比性能较差。

谢谢！

从 Flutter 1.12 开始（当 Flutter 从 OpenGL 切换到 Metal 渲染时），应用程序的首次运行出现卡顿（更频繁地跳帧）。

Flutter 团队正在努力解决这个问题，但与此同时我能做些什么呢？

我必须用未知数量的叶子渲染一棵树。但是当叶子数量过多时，应用程序的性能会急剧下降。我可以做些什么来提高性能？叶子的数量可以达到 1000，所以一堆 1000 个孩子会降低性能是正常的，但我该怎么办呢？提前致谢！

更新：

这是我目前的代码。

这是leafpainter的代码

这就是树的样子： 树

我一直在使用“官方”flutter video_player包与 PageView 小部件相结合来解决严重的卡顿问题。

我的目标

在 PageView 小部件的多个页面中平滑快速地滚动，每个页面都包含一个视频小部件。

实际结果

当我尝试快速滚动浏览这些页面时，我遇到了可怕的卡顿/性能问题。当我慢慢地滑动页面，等待滚动动画结束时，一切都很顺利。请参阅我在配置文件模式下在小米红米 Note 8 Pro上录制的视频作为证据。

GIF：应用程序中卡顿的视频证明

性能分析

我尝试通过咨询颤振性能工具来寻求帮助。该工具显示光栅时间的巨大峰值。在一个示例中，光栅时间为 51.7 毫秒，其中着色器编译需要 43.0 毫秒。不过，我没有足够的经验来理解这意味着什么或这些信息如何帮助我。截图如下：

截图：颤振性能工具截图显示慢帧

到目前为止我尝试了什么

1. 删除该行controller.dispose();可以解决问题，但这会导致内存泄漏和小部件最终崩溃。
2. 我尝试将其包装controller.dispose();成 a WidgetsBinding.instance!.addPostFrameCallback((_) async {}，但这并没有帮助

我的代码

Flutter Doctor 没有显示任何问题，video_player 和 flutter 都在各自的最新版本中。感谢您的帮助！:)

也发布在flutter的github上