JavaScript前端性能优化：虚拟滚动、Web Worker与脚本加载策略

虚拟滚动

在开发过程中，处理大数据加载导致的页面卡顿是常见挑战。通常采用分页策略，但某些场景下必须在前端一次性加载全部数据。例如，曾遇到一个组件强制一次性渲染数万条数据，导致打开时页面严重卡顿，最终通过引入虚拟滚动技术解决了这一难题。

当面临长列表渲染且条目数量巨大时，渲染耗时增加且滚动易引发页面卡顿，严重影响用户体验。此时，采用虚拟滚动是有效的解决方案。

虚拟滚动的核心在于仅渲染可视区域内的列表项，非可视区域不予渲染，并在滚动过程中动态更新可视区域内容。该方案在优化海量数据渲染时效果显著。以下图示清晰展示了虚拟滚动的工作原理。

虚拟滚动的基本原理如下：

首先计算列表总高度 totalHeight，在触发滚动事件时，根据 scrollTop 值动态更新 startIndex 和 endIndex，进而从列表数据 listData 中截取对应元素进行渲染。

虚拟滚动插件

虚拟滚动的应用场景广泛，网络上已有许多成熟的第三方库可供选用，开发者可根据需求选择更便捷的工具来优化页面性能。

常见的虚拟滚动插件包括 vue-virtual-scroller、vue-virtual-scroll-list、react-tiny-virtual-list 以及 react-virtualized 等。

此处简要介绍 vue-virtual-scroller 插件的使用方法。

// 安装插件
npm install vue-virtual-scroller
// main.js
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
Vue.use(VueVirtualScroller)
// 使用
<template> 
  <RecycleScroller 
    class="scroller" 
    :items="list" 
    :item-size="32" 
    key-field="id" 
    v-slot="{ item }"> 
      <div class="user"> {{ item.name }} </div>
  </RecycleScroller> 
</template>

该插件主要提供 RecycleScroller.vue 和 DynamicScroller.vue 两个组件。其中，RecycleScroller 要求列表项 item 的高度为静态值，即所有列表项高度一致；而 DynamicScroller 则支持动态高度的列表项。

Web Worker优化长任务

浏览器页面渲染采用单线程机制，导致CSS与JS代码无法同时渲染。由于GUI渲染线程与JS引擎线程互斥，当页面中存在大量长任务时，会阻塞UI渲染，引发界面卡顿或掉帧现象。

若将下述代码直接置于主线程执行，计算过程中页面将处于假死状态，无法进行任何交互操作。

let sum = 0;
for (let i = 0; i < 200000; i++) {
    for (let i = 0; i < 10000; i++) {
      sum += Math.random()
    }
  }

使用 Web Worker 执行上述代码时，在计算过程中页面保持正常响应，无卡顿现象。

// worker.js
onmessage = function (e) {
  // onmessage获取传入的初始值
  let sum = e.data;
  for (let i = 0; i < 200000; i++) {
    for (let i = 0; i < 10000; i++) {
      sum += Math.random()
    }
  }
  // 将计算的结果传递出去
  postMessage(sum);
}

Web Worker的通信时长

尽管Web Worker功能强大，但不应滥用，因为加载worker脚本本身会消耗服务器资源。并非所有执行时间超过 50ms 的任务都适合使用Web Worker，还需考虑通信耗时。例如，若某运算耗时 100ms，但通信耗时为 300ms，使用Web Worker反而可能导致整体效率更低。

新建Web Worker时，浏览器会加载对应的 worker.js 资源。下图中的 Time 字段表示该资源的通信时长（亦称加载时长）。

当任务运算时长减去通信时长的结果大于 50ms 时，推荐使用Web Worker。

requestAnimationFrame 制作动画

为了提升页面视觉效果，动画不可或缺。然而，不当的动画实现可能导致页面卡顿并消耗大量浏览器资源。为解决此类问题，可使用 requestAnimationFrame API 来处理动画效果。

requestAnimationFrame 是浏览器专为动画设计的API，其刷新频率与显示器刷新率保持一致。使用该API可有效解决使用 setTimeout 或 setInterval 制作动画时的卡顿问题。

①引擎层面差异

setTimeout 和 setInterval 属于JS引擎，而 requestAnimationFrame 属于GUI引擎。由于JS引擎与GUI引擎互斥，GUI引擎在渲染时会阻塞JS引擎的计算过程。

②时间准确性对比

requestAnimationFrame 的刷新频率固定且准确；而 setTimeout 和 setInterval 作为宏任务，受事件轮询机制影响，其他任务可能阻塞或延迟JS任务执行，导致定时器时间不准确。

③性能层面差异

当页面被隐藏或最小化时，setTimeout 和 setInterval 仍会在后台继续执行动画任务；而使用 requestAnimationFrame 时，若页面处于未激活状态，系统会暂停屏幕刷新任务，从而节省资源。

JS的加载方式

关于页面加载，许多人知晓在单线程加载模式下，错误的编码方式会导致页面阻塞，进而影响用户体验。因此，深入了解JS的加载方式至关重要。

①正常模式

<script src="index.js"></script>

在此模式下，JS会阻塞DOM渲染。浏览器必须等待 index.js 加载并执行完毕后，才能进行其他操作。这意味着若页面执行至该代码处，DOM渲染将直接暂停，直至JS文件加载完成才会继续绘制页面。

②async 模式

<script async src="index.js"></script>

在 async 模式下，JS加载是异步的，不会阻塞DOM渲染。async 加载是无序的，一旦加载结束，JS会立即执行。

适用场景：若该JS资源与DOM元素无依赖关系，且不产生其他资源所需数据，可使用 async 模式，例如埋点统计脚本。

③defer 模式

<script defer src="index.js"></script>

在 defer 模式下，JS加载同样是异步的，但defer资源会在 DOMContentLoaded 事件触发前加载完毕，且defer保证加载顺序。

若存在多个设置了 defer 的 script 标签，即使后续资源先返回，也会按照引入的前后顺序执行。因此，defer 可用于控制JS文件的执行顺序，例如 element-ui.js 依赖于 vue.js，需先引入 vue.js，再引入 element-ui.js。

适用场景：一般情况下均可使用 defer，特别是在需要控制资源加载顺序时。

④module 模式

<script type="module">import {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> a } from './a.js'</script>

在现代主流浏览器中，script 标签可添加 type="module" 属性，浏览器会对内部的 import 引用发起HTTP请求以获取模块内容。此时 script 的行为类似于 defer，即在后台下载并等待DOM解析。

Vite 正是利用浏览器对原生ES Module的支持，在开发阶段跳过打包过程，从而提升编译效率。

⑤preload 模式

<link rel="preload" as="script" href="index.js" rel="external nofollow"  rel="external nofollow" >

link 标签的 preload 属性：用于提前加载所需依赖，这些资源将获得优先加载权。

1）preload 加载的资源在浏览器渲染机制之前处理，且不会阻塞 onload 事件；

2）preload 加载的JS脚本，其加载与执行过程分离，即 preload 预加载脚本代码，待需要时自行调用；

⑥prefetch 模式

<link rel="prefetch" as="script" href="index.js" rel="external nofollow"  rel="external nofollow" >

prefetch 利用浏览器空闲时间，加载页面未来可能用到的资源。通常用于加载其他页面（非首页）所需资源，以加快后续页面的打开速度。

prefetch 特点如下：

1）prefetch 加载的资源可获取非当前页面所需资源，并将其放入缓存至少5分钟（无论资源是否可缓存）；

2）当页面跳转时，未完成的 prefetch 请求不会被中断。

加载方式的总结

async 和 defer 是 script 标签的专属属性；对于网页中的其他资源，可通过 link 的 preload 和 prefetch 属性进行预加载。

如今，现代框架已将 preload 和 prefetch 集成到打包流程中。通过灵活配置，可使用这些预加载功能；同时，也可根据情况向 script 标签添加 async 或 defer 属性以处理资源，从而显著提升性能。因此，在使用打包工具时，通常无需手动管理复杂的加载形式，通过简单配置即可达到预期效果。

到此，关于JavaScript前端优化策略的深入详解文章介绍完毕。如需了解更多JS前端优化策略内容，请搜索本站历史文章或继续浏览相关文章。感谢大家的支持！