当前位置：首页 > news >正文

对为什么react需要时间分片，vue3不需要的浅学习

news 文章来源：https://blog.csdn.net/qishuixian/article/details/140289215 2025/5/2 2:54:29

1、时间分片

时间分片指在让应用在cpu进行大量计算时也能与用户交互，但时间分片只能对大量cpu计算进行优化，无法优化复杂DOM操作，因为要确保用户正在操作的界面是最新。

web卡顿的场景：

1、cpu计算量不大，但dom操作非常复杂（比如说你向页面插入了十万个节点）。这种场景下不管做不做时间分片，页面都会很卡。

2、cpu计算量非常大。理论上时间分片在这种场景里会有较大收益，但是人机交互研究表明，除了动画场景外，大部分用户不会觉得 10 毫秒和 100 毫秒有很大区别。也就是说，时间分片只在 CPU 需要连续计算 100 毫秒以上的情况下才有较大收益。

2、react需要时间分片

React 16引入了Fiber重构，其目的是为了实现虚拟DOM的优先级级别和中断重新开始的渲染过程，这被称为“时间分片”。Fiber框架通过分层调度、暂停和重用执行树的部分来提高其性能，这样可以在浏览器有时间处理用户交互或动画的时候动态地调度工作。

Fiber的引入为React提供了以下优势：

可中断的渲染- 优先级渲染（比如，用户交互比如滚动优先于动画）- 可复用的渲染（比如，在使用用户界面时可以在后台继续渲染其他部分）

这些优点使得React应用程序能够更加高效地更新用户界面，并且不会导致之前版本的“闪烁”问题。

解决方案：

React 16及以上版本会自动使用Fiber框架，无需用户进行任何操作。如果你正在使用React 15或更早的版本，你需要升级到React 16或更高版本以获得Fiber的好处

import React from 'react';
import ReactDOM from 'react-dom';class MyComponent extends React.Component {// ...render() {// 使用新的Fiber渲染算法渲染组件return (<div>{/* ... */}</div>);}
}ReactDOM.render(<MyComponent />, document.getElementById('root'));

在这个例子中，React 16使用Fiber重构实现了虚拟DOM的更新，使得用户界面的渲染能够被中断和重新开始，从而提高了性能。

2.1关于Fiber框架学习。

参考：https://blog.51cto.com/u_11887782/5782954

3、vue3不需要时间分片

Vue 3 不需要时间分片（time slicing）主要是因为它的核心渲染机制和性能优化策略已经足够高效，能够在大多数情况下提供流畅的用户体验。以下是详细的原因：

3.1、编译器优化

Vue 3 引入了一个全新的编译器，能够生成更高效的渲染函数。这个编译器在编译过程中进行了一系列优化，例如：

静态提升：将不变的节点提升为常量，只在初次渲染时计算一次。
预字符串化：将静态内容直接转化为字符串，减少了运行时的开销。
缓存事件处理程序：避免了不必要的重新绑定。

这些优化措施大大减少了 Vue 3 在更新 DOM 时的计算量，使得渲染过程更加高效。

3.2.、响应式系统的改进

Vue 3 使用了基于代理的响应式系统，替代了 Vue 2 中基于 Object.defineProperty 的实现。新的响应式系统更加高效，具备以下优点：

精细的依赖追踪：只追踪实际使用的属性，避免了不必要的依赖收集。
懒惰计算：仅在需要时才计算依赖，减少了计算量。

这些改进使得 Vue 3 能够更快速地响应数据变化，从而减少了渲染开销。

3.3、虚拟 DOM 和 Diff 算法的优化

Vue 3 对虚拟 DOM 及其 diff 算法进行了优化，使得差异计算更加高效：

静态标记：编译期间标记静态节点，跳过不变的部分。
块级优化：将动态节点分块，只对发生变化的块进行更新。

这些优化措施减少了 DOM 更新的频率和范围，提高了整体渲染性能。

3.4、单次异步队列

Vue 3 的更新机制基于单次异步队列（single asynchronous queue），它确保在同一事件循环中只进行一次批量更新。这种方式减少了不必要的重复计算和 DOM 操作，使得更新过程更加高效。

3.5、自动批处理

Vue 3 实现了自动批处理机制，在同一个事件循环中对多次数据更新进行合并，从而减少了渲染次数。这种机制在避免频繁重绘的同时，保证了界面的流畅性。

3.6、现代浏览器的性能

现代浏览器的性能已经得到了极大的提升，尤其是在处理 JavaScript 和 DOM 操作方面。Vue 3 的优化能够充分利用这些性能改进，从而在绝大多数情况下不需要时间分片。

3.7总结

Vue 3 通过编译器优化、响应式系统改进、虚拟 DOM 和 Diff 算法优化、单次异步队列、自动批处理等技术手段，大幅提升了渲染效率和性能。再加上现代浏览器的性能提升，使得 Vue 3 能够在大多数情况下提供流畅的用户体验，而无需借助时间分片等复杂的技术。