performance - 在 Chrome devtools 时间轴上自动化/重播

Question

我有一个网页，如果应用了某些样式，滚动时可能会出现卡顿。我的问题是如何系统地测试个人风格的效果。我不想每次都手动向下滚动页面，我想执行一些可复制的操作，以便轻松比较两个不同样式表的效果。是否可以录制和重放序列？

Answer 1

在 Chrome 中你可以尝试使用:

console.timeline('description');
// your code
console.timelineEnd('description');

您会收到弃用警告，但它可以记录时间线。

或

您可以使用 The Intern http://theintern.io/自动执行您想要执行的重复任务，例如向下滚动页面。在这种情况下，您将为每个样式更改编写一个测试用例，在使用 Frame Timing API 进行测量时滚动页面 https://github.com/GoogleChrome/frame-timing-polyfill

每个测试都希望帧速率高于某个值。