HUA

前端是直接和客户交互的界面，前端的流畅性对于客户的体验和留存率至关重要，可以说，前端界面的流畅性是一款产品能不能成功的关键因素之一。要解决界面卡顿，首先我们先要知道造成页面卡顿的原因：

  • 什么是长任务？

    长任务是指JS代码执行耗时超过50ms，能让用户感知到页面卡顿的代码执行流。

  • 长任务为什么会造成页面卡顿？

    UI界面的渲染由UI线程控制，UI线程和JS线程是互斥的，所以在执行JS代码时，UI线程无法工作，就表现出页面卡死状态。

我们现在来模拟一个长任务，看看它是怎么影响页面流畅性的：

  • 先看效果（GIF），这里我们给div加了个滚动的动画，当我们开始执行长任务后，页面卡住了，等待执行完后才恢复，总耗时3秒左右，记住总耗时，后面会用到。

  • 再看代码（有点长，主要看JS部分，后面的优化方案代码只展示优化过的JS函数）
 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6    <title>Document</title>
 7    <style>
 8      .myDiv {
 9        width: 100px;
10        height: 100px;
11        margin: 50px;
12        background-color: blue;
13        position: relative;
14        animation: my-animation 5s linear infinite;
15      }
16      @keyframes my-animation {
17        from {
18          left: 0%;
19          rotate: 0deg;
20        }
21        to {
22          left: 100%;
23          rotate: 360deg;
24        }
25      }
26    </style>
27  </head>
28  <body>
29    <div class="myDiv"></div>
30    <button onclick="longTask()">执行长任务</button>
31    
32    <script>
33      
34      function myFunc() {
35        const startTime = Date.now();
36        while (Date.now() - startTime < 10) {}
37      }
38
39      
40      function longTask() {
41        console.log("开始长任务");
42        const startTime = Date.now();
43        for (let i = 0; i < 300; i++) {
44          myFunc();
45        }
46        console.log(`长任务结束,总耗时:${Date.now() - startTime}ms`);
47      }
48    </script>
49  </body>
50</html>
51

本段代码有一个模拟耗时的函数，有一个模拟长任务的函数（调用300次耗时函数），后面的优化方案都会基于这段代码来进行。

setTimeout 宏任务方案

第一个优化方案，我们将长任务拆成多个宏任务来执行，这里我们用setTimeout函数。为什么拆成多个宏任务可以优化卡顿问题呢？

正如我们上文所说，页面卡顿的原因是因为JS执行线程占用了控制权，导致UI线程无法工作。在浏览器的事件轮询（EventLoop）机制中，每一个宏任务执行完之后会将控制权重新交给UI线程，待UI线程执行完渲染任务后，才会继续执行下一个宏任务。浏览器轮询机制流程图如下所示，想要深入了解浏览器轮询机制，可以参考我的另一篇文章：从进程和线程入手，我彻底明白了EventLoop的原理！ !

有

无

Script标签

执行宏任务

是否有微任务

执行微任务

UI渲染

  • 先看效果（GIF），执行长任务的同时，页面也很流畅，没有了先前卡顿的感觉，总耗时4.4秒。

  • 再看代码

 1
 2function timeOutTask(i, startTime) {
 3  setTimeout(() => {
 4    if (!startTime) {
 5      console.log("开始长任务");
 6      i = 0;
 7      startTime = Date.now();
 8    }
 9    if (i === 300) {
10      console.log(`长任务结束,总耗时:${Date.now() - startTime}ms`);
11      return;
12    }
13    myFunc();
14    timeOutTask(++i, startTime);
15  });
16}

把代码改为多个宏任务之后，解决了页面卡顿的问题，但是总耗时比之前多了1.4秒，主要原因是因为递归调用需要不断地向下开栈，会增加开销。当我们每个任务都不依赖于上一个任务的执行结果时，就可以不使用递归，直接使用循环创建宏任务。

  • 先看效果（GIF），耗时缩短到了3.1秒，但是可以看到明显掉帧。

  • 再看代码
 1
 2function timeOutTask2() {
 3  console.log("开始长任务");
 4  const startTime = Date.now();
 5
 6  for (let i = 0; i < 300; i++) {
 7    setTimeout(() => {
 8      myFunc();
 9      if (i === 300 - 1) {
10        console.log(`长任务结束,总耗时:${Date.now() - startTime}ms`);
11      }
12    });
13  }
14}

使用300个循环同时创建宏任务后，虽然耗时降低了，但是div滚动会出现明显掉帧，这也是我们不愿意看到的，那执行代码速度和页面流畅度就没办法兼得了吗？很幸运，requestIdleCallback函数可以帮你解决这个难题。

requestIdleCallback 函数方案

requestIdleCallback提供了由浏览器决定，在空闲的时候执行队列任务的能力，从而不会影响到UI线程的正常运行，保证了页面的流畅性。

它的用法也很简单，第一个参数是一个函数，浏览器空闲的时候就会把函数放到队列执行，第二个参数为options，包含一个timeout，则超时时间，即使浏览器非空闲，超时时间到了，也会将任务放到事件队列。 下面我们把setTimeout替换为requestIdleCallback

  • 先看效果（GIF），耗时3.1秒，也没有出现掉帧的情况。

  • 再看代码
 1
 2function callbackTask() {
 3  console.log("开始长任务");
 4  const startTime = Date.now();
 5
 6  for (let i = 0; i < 300; i++) {
 7    requestIdleCallback(() => {
 8      myFunc();
 9      if (i === 300 - 1) {
10        console.log(`长任务结束,总耗时:${Date.now() - startTime}ms`);
11      }
12    });
13  }
14}

requestIdleCallback解决了setTimeout方案掉帧的问题，这两种方案都需要拆分任务，有没有一种不需要拆分任务，还能不影响页面流畅度的方法呢？Web Worker满足你。

Web Worker 多线程方案

WebWorker是运行在后台的javascript，独立于其他脚本，不会影响页面的性能。

  • 先看效果，耗时不到3.1秒，页面也没有受到影响。

  • 再看代码，需要额外创建一个js文件。（注意，浏览器本地直接运行HTML会被当成跨域，需要开一个服务运行，我使用的http-server）

task.js 文件代码

 1
 2function myFunc() {
 3  const startTime = Date.now();
 4  while (Date.now() - startTime < 10) {}
 5}
 6
 7
 8for (let i = 0; i < 300; i++) {
 9  myFunc();
10}
11
12
13self.postMessage("我执行完啦");

主文件代码

 1
 2function workerTask() {
 3  console.log("开始长任务");
 4  const startTime = Date.now();
 5  const worker = new Worker("./task.js");
 6
 7  worker.addEventListener("message", (e) => {
 8    console.log(`长任务结束,总耗时:${Date.now() - startTime}ms`);
 9  });
10}

WebWorker方案额外增加的耗时很少，也不需要拆分代码，也不会影响页面性能，算是很完美的一种方案了。 但它也有一些缺点：

  • 浏览器兼容性差
  • 不能访问DOM，即不能更新UI
  • 不能跨域加载JS

三种方案中，如果不需要访问DOM的话，我认为最好的方案为WebWorker方案，其次requestIdleCallback方案，最后是setTimeout方案。 WebWorker和requestIdleCallback属于比较新的特性，并非所有浏览器都支持，所以我们需要先进行判断，代码如下：

 1if (typeof Worker !== 'undefined') {
 2  
 3}else if(typeof requestIdleCallback !== 'undefined'){
 4  
 5}else{
 6  
 7}

希望本文对您有帮助，其他所有代码可在下方直接执行。（WebWorker不支持）

个人笔记记录 2021 ~ 2025