请帮助我理解为什么Android上的Chrome浏览器中的FPS如此之低

Question

我正在尝试优化我们创建的网络应用程序，以便在Android设备上获得更好的性能，而我正在使用最新的官方Chrome版本，我的第一代Nexus 7连接到Android调试桥。

我使用chrome devtools时间轴来试图找出导致我在webapp中获得的糟糕滚动性能的原因。

在查看时间轴时，我注意到当离开webapp时，我只是坐在每个框架中，我有以下记录：

据我了解这一点，每一帧都有太多的事情需要充足的时间。或者至少应该有。如果绘制需要7.654毫秒和1.577毫秒的非仪表化的东西，那么CPU需要21.818毫秒以及导致大约空闲时间的原因。帧之间80ms？

时间轴没有以任何方式过滤，所以我很不确定如何找出正在发生的事情。

我正在尝试优化的网址位于http://www.vol.at/?forcemobile

Answer 1

当页面不滚动时，您看到的9 FPS似乎来自导致DOM更新的计时器。这就是“帧”之间有很多时间的原因。那个FPS名称有些令人困惑，你想要的计数器是你点击右下方的DevTools“settings”cog并启用“Show FPS meter”时得到的。

当你滚动时，你真的想要录制 - 当你没有做任何事情时页面不会渲染@ 60fps - 尝试它 - 只需加载：空白（或一些非常简单的页面）并尝试录制时间轴 - 您应该看不到（或很少）事件。

滚动效果是一个非常复杂的主题，我想引导您jankfree.org。该页面包含大量高质量的讲座和教程。您可能需要查看the scrolling performance tutorial和this Google IO talk以便开始使用。

从简短的浏览页面看起来像：

• 在页面上有一个定时器以非常快的速度发射，你应该调查一下，因为只是坐在页面上，什么都不做就会耗尽用户的电池。
• 每当你完成滚动时，都会从onScroll触发一个相当昂贵的脚本。这似乎也触发了整个页面的栅格。尝试删除onscroll处理程序并查看页面是否不那么笨拙，如果是这样，你应该尝试优化它。
• 当您点击文章时，广告使用JavaScript定位，而不是CSS定位，这些将在您滚动时始终滞后。您应该考虑使用position: fixed。