一个js绘图库的优化技巧

最近在项目中使用Cytoscape.js、D3.js和DataV等前端绘图库。

图形常见的操作有拖拽、缩放、平移等。

页面出现这些动作事件后，这些绘图库都会抛出一个hook，然我们有机会根据业务需求，在合适的时机完成图形操作。

问题就来了，例如拖拽事件，用户拖拽一个节点是一个持续的过程，浏览器有可能1s中抛出好几百个“drag”事件。

如果每个“drag”事件，我们都去做绘制图形相关的计算，那么会浪费很多计算资源。

因为浏览器一般1s中最多也就绘制60次，也就是说，尽管我们1秒钟计算了好几百次，只有其中60次的计算结果能够展示在界面上，大部分计算都是无效的，白白浪费了计算资源。

那么有什么优化方法呢？

首先想到的是debounce或者throttle函数, 能够降低回调函数的执行频率。但缺点是，时间参数门限的选取比较纠结，参数大了，用户操作会有卡顿延时感；参数门限小了话，又有可能浪费性能。

最好的办法就是浏览器要绘制界面之前，完成相关的计算，这样不多不少，每个计算结果都能得到展示。

所以，最后的答案来了 —— window.requestAnimationFrame(callback)。这个web API是前端应用绘图库的必备API，能够让用户有丝滑的交互体验，同时让计算开销降到最低。