D3 v3 zoom/drag 鼠标右键比左键性能更好?
D3 v3 zoom/drag performance better with right mouse rather than left?
我有一个基于 D3 v3 的图表,使用内置的缩放行为来处理拖动平移功能。 zoom
处理程序正在使用 requestAnimationFrame
进行更新,而不是仅在每次平移操作时调用更新。
当我开始在我的图表中使用大量数据时,我注意到使用鼠标右键而不是左键拖动期间的更新性能要好得多。在深入研究 Chrome DevTools 之后,我发现这两种操作之间存在非常奇怪的差异。
这是右键拖动以平移图表时的时间线视图块。
这就是我期望的时间线样子,帧更新相对有规律并且被尽可能快地调用。 ~25ms 用于更新,~60ms 用于重绘。每帧总计约 85 毫秒。
这是离开时在同一图表中具有完全相同数据的时间线
拖.
如您所见,每一帧都花费了更多时间(~175 毫秒),一帧更新结束与下一帧开始之间存在巨大的时间间隔。时间线上看不到任何处理,只有几个selectstart
事件处理程序的实例(不是我添加的,好像是D3),最多需要0.23ms。
我已经删除了我能在图表上找到的所有其他事件处理程序,但没有任何效果
我之前看到Chrome在拖动操作的过程中做了一些优化,并且看到了那段时间HTTP流量的速度变慢,但是没有纯客户端更新。
这是一个已知问题吗? D3 是否为向左拖动做了一些特别的事情?有人以前看过这个吗?
有一个默认处理程序正在影响您的时间和性能。
调用 preventDefault() 来禁用它。
我有一个基于 D3 v3 的图表,使用内置的缩放行为来处理拖动平移功能。 zoom
处理程序正在使用 requestAnimationFrame
进行更新,而不是仅在每次平移操作时调用更新。
当我开始在我的图表中使用大量数据时,我注意到使用鼠标右键而不是左键拖动期间的更新性能要好得多。在深入研究 Chrome DevTools 之后,我发现这两种操作之间存在非常奇怪的差异。
这是右键拖动以平移图表时的时间线视图块。
这就是我期望的时间线样子,帧更新相对有规律并且被尽可能快地调用。 ~25ms 用于更新,~60ms 用于重绘。每帧总计约 85 毫秒。
这是离开时在同一图表中具有完全相同数据的时间线 拖.
如您所见,每一帧都花费了更多时间(~175 毫秒),一帧更新结束与下一帧开始之间存在巨大的时间间隔。时间线上看不到任何处理,只有几个selectstart
事件处理程序的实例(不是我添加的,好像是D3),最多需要0.23ms。
我已经删除了我能在图表上找到的所有其他事件处理程序,但没有任何效果
我之前看到Chrome在拖动操作的过程中做了一些优化,并且看到了那段时间HTTP流量的速度变慢,但是没有纯客户端更新。
这是一个已知问题吗? D3 是否为向左拖动做了一些特别的事情?有人以前看过这个吗?
有一个默认处理程序正在影响您的时间和性能。
调用 preventDefault() 来禁用它。