深度解析React 18应用性能提升

众所周知，React 18 引入的一个重要特性就是并发功能，从根本上改变了 React 应用程序的渲染方式。本文将带大家一同探讨这些最新功能的具体作用，特别是如何提高应用程序性能。

一、主线程与长任务

当我们在浏览器中运行 JavaScript 时，JS 引擎会在单线程环境下执行代码内容，而该环境通常称为主线程。除了执行 JS 代码之外，主线程还负责处理其他任务，包括管理用户交互（如鼠标单击和键盘输入）、处理网络事件、计时器、更新动画并管理浏览器的重排和重绘等。

图片

在处理一项任务时，其余任务均处于等待状态。虽然浏览器在执行小规模任务时能提供丝滑无缝的用户体验，但面对更长的任务时则可能出现问题。由于任务耗时较长，其他任务可能一直被悬置和等待。一般来说，任何运行时间超过 50 毫秒的任务均被定义为“长任务”。

图片

这里的 50 毫秒标准基于以下事实：设备必须每 16 毫秒生成一个新帧（相当于 60 fps）才能保持流畅的视觉体验。然而，设备在此期间还需要执行其他任务，例如响应用户输入和执行 JavaScript 代码。

所以 50 毫秒基准测试能保证设备为帧渲染和其他任务保留必要的资源，始终提供额外的约 33.33 毫秒时间执行其他任务。感兴趣的朋友可以参阅这篇博文：https://web.dev/rail/#res