iOS 上的 CSS 过渡性能

Question

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

除了 translate3d 之外，是否有任何资源描述什么会影响 iOS 上 CSS 转换的性能。

Answer 1

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

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

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

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