如何运用JS时间分片技术缓解长任务造成的页面卡顿问题？

本文共计1364个文字，预计阅读时间需要6分钟。

目录+起因+处理方法+事件循环+浏览器渲染时机+原始代码+代码+效果+函数改造+代码+效果+优化时间分割+代码+效果+对比优化前后+代码+效果+最后+起因+同事遇到一个动画展示的问题

目录

• 起因
• 处理办法
• 事件循环
• 浏览器渲染时机
• 原始代码
• 代码
• 效果
• 函数改造
• 代码
• 效果
• 优化时间分片
• 代码
• 效果
• 对比优化前后
• 代码
• 效果
• 最后

起因

同事遇到一个动画展示的问题，就是下面要执行一个运算量很大的函数，他要加载一个 loading，但他发现把 loading 的元素 display: block; 页面中也不会立刻出现 loading 动画，出现动画的时候是运算函数执行完毕之后。

处理办法

有两种方法去处理这种耗时任务，第一种就是 webWorker，但是一些 dom 的操作做不了，于是就想到了通过 generator 函数来解决，下面先简单了解下事件循环。