时间分片

时间分片

当执行时间超过 50ms 就是长任务

当延迟超过 100ms 就会让用户感觉到明显的延迟

解决方法 web worker 或者是时间分片

Web Worker

可以自行查看 MDN

时间分片

场景：需要渲染一个很长的列表 --- 比较常用的方式就是使用分页

没有优化时的代码 ---- 页面渲染有很明显的延迟 刷新一次要等很长时间

requestAnimationFrame + DocumentFragment

页面刷新变快，等待时间明显减少

requestIdleCallback + generator

知识点补充

Generator 函数

执行到 yield 就停下来，并将 yield 后边表达式的值，作为返回对象的 value 属性值，此时函数还没有执行完， 返回对象的 done 属性值是 false。知道没有 yeild 关键字的时候，表示 generator 函数执行完毕，next 方法返回的对象的 value 就是 return 的值，没有 return 语句时表示 return undefined，done 就是 true

window.requestIdleCallback()

window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间 timeout，则有可能为了在超时前执行函数而打乱执行顺序。

你可以在空闲回调函数中调用 requestIdleCallback()，以便在下一次通过事件循环之前调度另一个回调。

强烈建议使用 timeout 选项进行必要的工作，否则可能会在触发回调之前经过几秒钟。

var handle = window.requestIdleCallback(callback[, options])

返回值

一个 ID，可以把它传入 Window.cancelIdleCallback() 方法来结束回调。

回调函数可以接受到一个参数

这个参数它提供了一个方法, 可以让你判断用户代理(浏览器)还剩余多少闲置时间可以用来执行耗时任务 timeRemaining()；didTimeout, didTimeout 属性用来判断当前的回调函数是否被执行因为回调函数存在过期时间

requestIdleCallback 的第二个参数用来指定执行超时时间，即回调函数在规定的时间内是否被执行，如果没有执行 didTimeout 属性将为 ture，如果任务是急需完成的此时应该忽略剩余时间逻辑上强制执行回调函数