大数据公司绘图很容易碰到上万、上十万、上百万的数据，当前端开发人员面对成千上万条记录要显示的时候，我们该怎么处理？下面探索一下可行性

示例：https://codepen.io/arcsin1/pen/dLmVjM?editors=0010）

缺点：

示例：https://codepen.io/arcsin1/pen/OGZVrj?editors=0110

优点：

缺点：

示例： https://codepen.io/arcsin1/pen/QPRoeY?editors=0010

优点：

无需计算回调时间，动画的流畅性更有保障。
- 无论是setTimeout或者是setInterval都需要指明浏览器回调函数的时间。尽管设置了1000/60的回调时间，也就是每秒60帧的动画，但是并不能保证浏览器的真实回调时间，可能会造成动画卡顿。
- requestAnimationFrame 不需要设置回调时间，跟着浏览器的重绘的钩子走。这种做法更加高效，不会失帧或者卡顿，更大程度的保证了动画的流畅性。
性能优秀，占用更少内存。
- 对隐藏或者不可见元素的动画，requestAnimationFrame 不会进行重绘或者是回流，意味着占用的内存更少，性能更好
requestAnimationFrame会节省资源，运行浏览器时会自动优化调用，在浏览器tab页面不是激活状态下，会自动暂停执行，有效节省CPU的开销

缺点：

示例：https://codepen.io/arcsin1/pen/wZbZKQ

MutationObserver是现代浏览器提供的Web API，用于检测DOM中的变化。使用此API，可以侦听新添加或删除的节点，属性更改或文本节点文本内容的更改。

优点：

缺点：

示例：https://codepen.io/arcsin1/pen/pBmBRo?editors=0110

Canvas比svg来说提供的功能更原始，适合像素处理，动态渲染和大数据量绘制优点

我尝试了web worker和MutationObserver 一起实践是可行的，优化会更好，当然你可以去试试

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果。优点

数据量极大的数据可视化场景，利用CPU，GPU和显卡极大提升渲染速度

也算是个人探索，当然你有更好的方式，可以提出来我们一起探究，谢谢