css - ios 上的 CSS 过渡性能

Question

我的问题是，当动画容器具有更复杂的 HTML 结构时，转换速度真的会变慢。为空容器制作动画非常流畅，但在向其中添加更多数据后，性能真的很糟糕。我知道添加-webkit-transform: translate3d(0,0,0)到动画元素的硬件加速，但这似乎对更复杂的 DOM 结构没有帮助。

是否有任何资源可以描述什么会影响 iOS 上 CSS 过渡的性能translate3d。

Answer 1

您的容器是在屏幕内还是比屏幕大？

我正在制作一个书本类型的应用程序，其中每一页都是屏幕大小，并包含复杂的 dom 结构。当我在 dom 中放置更多页面时，页面内导航和转换的性能会变慢。但是从 dom 中删除不在屏幕中的页面并仅在页面出现或将要出现时渲染它们大大提高了性能。

因此，请尝试删除元素或使它们display:none对用户不可见，这可能会提高您的性能。

这里也是提高性能的非常好的资源 http://www.mikedellanoce.com/2012/09/10-tips-for-getting-that-native-ios.html