javascript 大运算量 vs 顺滑UI 的一种解决方案

有时候不可避免需要在前端进行比较重的运算，而如此沉重的运算一般来说对ui体验，是会有很大影响的，它甚至可能导致前端在一段时间内，什么响应和操作都无法进行。一般来说，前端的线程是单线程的。当然，目前前端的worker多线程也开始广泛应用了，但多线程又涉及到一个线程间传送数据的问题。当然，多线程肯定也是一个解决此问题的一个重要方案。而本文要提到的是另外一种解决方案。

我们可以把运算量切片，然后把运算了放到requestAnimationFrame中去运行。此方法也并非我原创，此博文也介绍了此方法的应用：

We now have a clean way of running our heavy function without freezing the UI. Furthermore, since we know the number of slices in advance, we could update a counter of finished slices inside the requestAnimationFrame callback which would provide a simple and accurate progress indicator.

采用这种方案的关键在于两个点，第一，我们需要如何去控制每一步的运算量。第二，把每一部的运算结果保存起来，以此在最后才能叠加所有的操作。