重新绘制巨大的渲染树时,改善用户体验是不可避免的

时间:2015-11-14 17:17:57

标签: javascript svg mousewheel requestanimationframe debouncing

我有一个巨大的SVG,它有很多图形元素,鼠标滚轮缩放事件被触发,重新绘制整个SVG。 通过一些分析,我可以分解在这种情况下所花费的时间,

  • 转换SVG所需的计算时间为1-2毫秒。
  • 应用转换后,绘制操作需要500ms-1.5秒(用户体验非常缓慢)。

据我所知,绘制操作将取决于SVG / HTML的渲染树,在这种情况下它非常大。 我想过尝试以下方法来改善用户体验

  1. 使用'debouncing'以便我将多个滚动事件合并到 给定间隔内的一个信号。
  2. 可能使用'requestAnimationFrame'和'debouncing'。
  3. 寻找优化SVG渲染树的方法,尽管我觉得 由于其他限制,这在我的案例中很难。
  4. 这些是正确的方法还是我向错误的方向前进? 在重新绘画不可避免的情况下,还可以使用哪些其他技术来获得更流畅的用户体验?

0 个答案:

没有答案