时间切片的实践,前端提升性能的方式（一）

本文就给大家介绍一个性能优化的手段之一：时间切片（Time Slicing）

根据W3C性能小组的介绍，超过50ms的任务就是长任务。

前言

现在有这么个需求，就是后端一次性返回5万条数据，需要一次性加载出来渲染到地图上，做一个轨迹回放功能，只是遍历数据的话用不了多长时间，但是由于用到cesium中的api，将经纬度转换为弧度，这个处理的时间为2分钟，并且页面也会卡死不动，经过几天百度的摸索，最终找到”时间切片”这个方案

1.什么是时间切片

时间切片的核心思想是：当一群任务在一个通道内执行，如果当前的任务不能在50毫秒内执行完，那么为了不阻塞主线程，这个任务应该让出主线程的控制权，使浏览器可以处理其他任务。让出控制权意味着停止执行当前任务，让浏览器去执行其他任务，随后再回来继续执行没有执行完的任务。

所以时间切片的目的是不阻塞主线程，而实现目的的技术手段是将一个长任务拆分成很多个不超过50ms的小任务分散在宏任务队列中执行。

宏任务与微任务不懂的 下方链接

宏任务和微任务-CSDN博客

上图可以看到主线程中有一个长任务，这个任务会阻塞主线程。使用时间切片将它切割成很多个小任务后，可以看到现在的主线程有很多密密麻麻的小任务，我们将它放大后如下图所示

可以看到每个小任务中间是有空隙的，代表着任务执行了一小段时间后，将让出主线程的控制权，让浏览器执行其他的任务。

使用时间切片的缺点是，任务运行的总时间变长了，这是因为它每处理完一个小任务后，主线程会空闲出来，并且在下一个小任务开始处理之前有一小段延迟。

但是为了避免卡死浏览器，这种取舍是很有必要的。

2.实践时间切片

下面我们正式利用Generator开始封装一个时间切片执行器。利用generator的特性把每一次yield都放在requestIdleCallback里执行，直到全部执行完毕，就可以轻松达到时间切片的效果了。

 //需要传值的话在调用timeSlicing时在gen后面跟上传的值，并且gen函数中接受，add方法中使用 //例如：function timeSlicing(gen，item,item2){} //首先我们封装一个时间切片执行器 function timeSlicing(gen) { if (typeof gen !== "function") throw new Error("TypeError: the param expect a generator function"); var g = gen();//也就是这里将timeSlicing传的值接受并且传入add()方法中 if (!g || typeof g.next !== "function") return; return function next() { var start = performance.now(); var res = null; do { res = g.next(); } while (res.done !== true && performance.now() - start < 25); if (res.done) return; window.requestIdleCallback(next); }; } function* gen(){// 这里接收传值 let i=0; while(i<){ yield add(i); // 这里继续传值 i++ } } //然后把长任务变成generator函数，交由时间切片执行器来控制执行 //这个方法当中放入你需要对数据进行的操作 const add = function(i){ //这里接收你所需要的值 let item = document.createElement("li"); item.innerText = 第${i++}条; listDom.appendChild(item); } //使用时间切片来插入10W条数据 在你需要执行的函数中调用封装的方法 function bigInsert(){ timeSlicing(gen)() }

4.总结

时间切片不是什么高级的api，而是一种根据浏览器渲染特性衍生出的优化方案，是一种优化思想，把计算量过大，容易阻塞渲染的逻辑切割成一个个小的任务来执行，留给浏览器渲染的时间来达到肉眼可见的流畅，本质上并没有优化什么js的计算性能，所以，有些算法的逻辑该优化还是需要从算法的思想上去优化。

因为本人在目前这个需求中困了好几天，在此记录，希望能帮到有需要的人