JS长任务（耗时操作）导致页面卡顿，优化方案
前端是直接和客户交互的界面，前端的流畅性对于客户的体验和留存率至关重要，可以说，前端界面的流畅性是一款产品能不能成功的关键因素之一。要解决界面卡顿，首先我们先要知道造成页面卡顿的原因：
-
什么是长任务？
长任务是指JS代码执行耗时超过50ms，能让用户感知到页面卡顿的代码执行流。
-
长任务为什么会造成页面卡顿？
UI界面的渲染由UI线程控制，UI线程和JS线程是互斥的，所以在执行JS代码时，UI线程无法工作，就表现出页面卡死状态。
我们现在来模拟一个长任务，看看它是怎么影响页面流畅性的：
- 先看效果（GIF），这里我们给div加了个滚动的动画，当我们开始执行长任务后，页面卡住了，等待执行完后才恢复，总耗时3秒左右，记住总耗时，后面会用到。
- 再看代码（有点长，主要看JS部分，后面的优化方案代码只展示优化过的JS函数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.myDiv {
width: 100px;
height: 100px;
margin: 50px;
background-color: blue;
position: relative;
animation: my-animation 5s linear infinite;
}
@keyframes my-animation {
from {
left: 0%;
rotate: 0deg;
}
to {
left: 100%;
rotate: 360deg;
}
}
</style>
</head>
<body>
<div class="myDiv"></div>
<button onclick="longTask()">执行长任务</button>
<script>
function myFunc() {
const startTime = Date.now();
while (Date.now() - startTime < 10) {}
}
function longTask() {
console.log("开始长任务");
const startTime = Date.now();
for (let i = 0; i < 300; i++) {
myFunc();
}
console.log(`长任务结束,总耗时:${Date.now() - startTime}ms`);
}
</script>
</body>
</html>
本段代码有一个模拟耗时的函数，有一个模拟长任务的函数（调用300次耗时函数），后面的优化方案都会基于这段代码来进行。
setTimeout 宏任务方案
第一个优化方案，我们将长任务拆成多个宏任务来执行，这里我们用setTimeout函数。为什么拆成多个宏任务可以优化卡顿问题呢？
正如我们上文所说，页面卡顿的原因是因为JS执行线程占用了控制权，导致UI线程无法工作。在浏览器的事件轮询（EventLoop）机制中，每一个宏任务执行完之后会将控制权重新交给UI线程，待UI线程执行完渲染任务后，才会继续执行下一个宏任务。浏览器轮询机制流程图如下所示，想要深入了解浏览器轮询机制，可以参考我的另一篇文章：从进程和线程入手，我彻底明白了EventLoop的原理！ !
有
无
Script标签
执行宏任务
是否有微任务
执行微任务
UI渲染
-
先看效果（GIF），执行长任务的同时，页面也很流畅，没有了先前卡顿的感觉，总耗时4.4秒。
-
再看代码
function timeOutTask(i, startTime) {
setTimeout(() => {
if (!startTime) {
console.log("开始长任务");
i = 0;
startTime = Date.now();
}
if (i === 300) {
console.log(`长任务结束,总耗时:${Date.now() - startTime}ms`);
return;
}
myFunc();
timeOutTask(++i, startTime);
});
}
把代码改为多个宏任务之后，解决了页面卡顿的问题，但是总耗时比之前多了1.4秒，主要原因是因为递归调用需要不断地向下开栈，会增加开销。当我们每个任务都不依赖于上一个任务的执行结果时，就可以不使用递归，直接使用循环创建宏任务。
- 先看效果（GIF），耗时缩短到了3.1秒，但是可以看到明显掉帧。
- 再看代码
function timeOutTask2() {
console.log("开始长任务");
const startTime = Date.now();
for (let i = 0; i < 300; i++) {
setTimeout(() => {
myFunc();
if (i === 300 - 1) {
console.log(`长任务结束,总耗时:${Date.now() - startTime}ms`);
}
});
}
}
使用300个循环同时创建宏任务后，虽然耗时降低了，但是div滚动会出现明显掉帧，这也是我们不愿意看到的，那执行代码速度和页面流畅度就没办法兼得了吗？很幸运，requestIdleCallback函数可以帮你解决这个难题。
requestIdleCallback 函数方案
requestIdleCallback提供了由浏览器决定，在空闲的时候执行队列任务的能力，从而不会影响到UI线程的正常运行，保证了页面的流畅性。
它的用法也很简单，第一个参数是一个函数，浏览器空闲的时候就会把函数放到队列执行，第二个参数为options，包含一个timeout，则超时时间，即使浏览器非空闲，超时时间到了，也会将任务放到事件队列。 下面我们把setTimeout替换为requestIdleCallback
- 先看效果（GIF），耗时3.1秒，也没有出现掉帧的情况。
- 再看代码
function callbackTask() {
console.log("开始长任务");
const startTime = Date.now();
for (let i = 0; i < 300; i++) {
requestIdleCallback(() => {
myFunc();
if (i === 300 - 1) {
console.log(`长任务结束,总耗时:${Date.now() - startTime}ms`);
}
});
}
}
requestIdleCallback解决了setTimeout方案掉帧的问题，这两种方案都需要拆分任务，有没有一种不需要拆分任务，还能不影响页面流畅度的方法呢？Web Worker满足你。
Web Worker 多线程方案
WebWorker是运行在后台的javascript，独立于其他脚本，不会影响页面的性能。
- 先看效果，耗时不到3.1秒，页面也没有受到影响。
- 再看代码，需要额外创建一个js文件。（注意，浏览器本地直接运行HTML会被当成跨域，需要开一个服务运行，我使用的http-server）
task.js 文件代码
function myFunc() {
const startTime = Date.now();
while (Date.now() - startTime < 10) {}
}
for (let i = 0; i < 300; i++) {
myFunc();
}
self.postMessage("我执行完啦");
主文件代码
function workerTask() {
console.log("开始长任务");
const startTime = Date.now();
const worker = new Worker("./task.js");
worker.addEventListener("message", (e) => {
console.log(`长任务结束,总耗时:${Date.now() - startTime}ms`);
});
}
WebWorker方案额外增加的耗时很少，也不需要拆分代码，也不会影响页面性能，算是很完美的一种方案了。 但它也有一些缺点：
- 浏览器兼容性差
- 不能访问DOM，即不能更新UI
- 不能跨域加载JS
三种方案中，如果不需要访问DOM的话，我认为最好的方案为WebWorker方案，其次requestIdleCallback方案，最后是setTimeout方案。 WebWorker和requestIdleCallback属于比较新的特性，并非所有浏览器都支持，所以我们需要先进行判断，代码如下：
if (typeof Worker !== 'undefined') {
}else if(typeof requestIdleCallback !== 'undefined'){
}else{
}
希望本文对您有帮助，其他所有代码可在下方直接执行。（WebWorker不支持）
如果您觉得这篇文章有帮助，请点个赞吧～
评论
请登录后发表评论
去登录