Chrome 开发工具时间线 onClick 绘制时间答案

【问题标题】：Chrome Dev Tools Timeline onClick Paint timeChrome 开发工具时间线 onClick 绘制时间
【发布时间】：2017-10-04 11:19:21
【问题描述】：

我正在使用 Chrome 开发工具来尝试计算从点击事件显示隐藏面板到绘制需要多长时间。我使用 Chrome 开发工具记录了从用户单击按钮到隐藏面板绘制的时间。附图中顺序如下：事件点击642ms+更新层树44ms+绘制6.69ms。

考虑到与 Google 的 RAIL 模型相比，交互似乎很慢的性能。我只是想知道我是否正确计算了这个。

【问题讨论】：

【解决方案1】：

您的计算方法似乎正确。目标是测量用户的操作与页面显示对用户的响应之间的时间。所以在这种情况下，click 事件的开始代表用户的操作，Paint 活动的结束代表页面的响应。

您还可以单击+按住+拖动来查看选择的录音花了多长时间。

是的，就 RAIL 模型的建议而言，600 毫秒很慢。页面最多应在 100 毫秒内响应。 IE。从点击的那一刻起，页面的绘制时间应该不超过 100 毫秒。

【讨论】：

感谢您的信息和提示！关于为什么 onclick 这么慢的任何建议？我应该去哪里看看为什么这么慢。
Main 部分中的火焰图准确地告诉您点击事件期间发生的所有活动。您应该会看到详细的 JS 调用日志（不过，该信息可能会被隐藏）。再为整个 Main 部分截屏，我可以提供更多帮助。