0

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

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

在查看时间线时，我注意到当离开 web 应用程序时，每帧都坐在那里，我有以下记录：

在此处输入图像描述

据我了解，每一帧都有太多的事情要做，还有很多时间。或者至少应该有。如果绘画需要 7.654 毫秒和 1.577 毫秒的非仪器操作，那么 CPU 需要 21.818 毫秒，以及导致大约空闲时间的原因。帧之间的 80 毫秒？

在此处输入图像描述

时间线没有以任何方式过滤，所以我很不确定如何找出发生了什么。

我要优化的 webapp 位于http://www.vol.at/?forcemobile

4

1 回答 1

3

当页面不滚动时您看到的 9 FPS 似乎来自导致 DOM 更新的计时器。这就是为什么“帧”之间有很多时间。这个 FPS 名称有点令人困惑，您想要的计数器是当您单击右下角的 DevTools“设置”齿轮并启用“显示 FPS 仪表”时获得的计数器。

你真的很想在滚动时录制 - 当你什么都不做时页面不会呈现@60fps - 试试看 - 只需加载 about:blank （或一些非常简单的页面）并尝试录制时间轴 - 你应该看不到（或很少）事件。

滚动性能是一个非常复杂的话题，我想引导您访问jankfree.org。该页面包含大量高质量的讲座和教程。您可能需要查看滚动性能教程和此 Google IO 演讲来帮助您入门。

从您的页面非常简短地看，它似乎是：

  • 页面上有一个以非常快的速度触发的计时器，您应该调查一下，因为只是坐在页面上，什么都不做会耗尽用户的电池。
  • 每当您完成滚动时，都会从 onScroll 触发一个非常昂贵的脚本。这似乎也触发了整个页面的光栅。尝试删除 onscroll 处理程序并查看页面是否不那么卡顿，如果是这样，您应该尝试优化它。
  • 当你点击一篇文章时，广告是使用 JavaScript 定位的，而不是 CSS 定位，当你滚动时，这些总是会滞后。您应该考虑使用position: fixed.
于 2013-11-14T11:41:03.807 回答