Million.js 真的让 React 快 70% 吗

简介: 「Million.js 真的让 React 快 70% 吗」针对这个问题,我们做了很多研究,快来看看适不适合你的项目吧

hello 大家好,我是 superZidan,这篇文章想跟大家聊聊 Million.js 真的比 React 快 70% 吗 这个话题。

Aiden Bai 为 React 开发者发布了新版本的 Million 库。

这个项目并不新鲜。 它于 2021 年 6 月 13 日发布了 0.0.9 版本。

最新版本 编号为 2.4.4,并且表明了该项目现在相当稳定。

它带来了一些小的改进,但这不是最重要的。

由于首页上的声明:

p1.png

至少这是我所看到的在网速较慢的时候加载页面的情况 😅

一段时间后,可以看到计数器上升:

p2.png

React 本身相当快, React + Vite 提供了很棒的开发体验

有什么办法可以让终端用户感受到 页面变得更快

为了回答这个问题,我浏览了技术文档,解释了 Million 如何改进 diff 和 reconciliation

如果你还不熟悉 React,这里有一个对其工作原理的简短回顾:

React 创建了一个称为 Virtual DOM 的结构 。React 不操作真正的 DOM,而是操作 VDOM。从历史上看,它很有用,因为 DOM 操作很慢。

当需要更新真实 DOM 时,React 会比较 DOM 和 VDOM 以将它们进行同步。

整个过程分为两部分。 一种称为 diff, 它是在寻找差异。 reconciliation 是决定 VDOM 更改是否应应用于 DOM 的过程。

总而言之,它像是一个专家,缓存和同步整个系统,来减少操作真实 DOM 的频率。

这个过程非常好,但也需要一些权衡。React 并不真正知道组件树中发生了什么变化。 所以它必须遍历树并找到发生变化的节点。

这意味着对于一个比较大的 DOM,比如一张表,一个小小的变化就会触发大量的计算,纯粹是为了弄清楚发生了什么变化。

假设你有一张表格,以表格形式显示你的兽医诊所患者。 你有 100 名患者,并注意到为新患者提供了错误的姓名。 你需要改变了一只猫的名字。

这个时候,React 可能需要检查 100 行和 10 列才能查看发生了什么变化才能更新 DOM。 这种行为是比较损耗性能的。

Million 不会将组件视为黑盒,只查看它将渲染的内容以及结果是否与之前的渲染不同

p3.png

Million 通过检查组件的状态来识别哪些组件会受到变化的 树传播的影响。 这意味着它能够更快地找出许多静态组件中必须更新的组件。

“树传播”(tree propagation)在 React 中通常指的是组件之间通过虚拟 DOM 树进行的更新传递过程。当某个组件的状态发生变化时,React 会通过重新渲染虚拟 DOM 树来确定哪些组件需要更新,并将这些更新传播到整个组件树中受影响的组件。这个过程被称为树传播,因为更新从根组件开始,逐级向下传递到叶子组件。这种机制可以有效地减少不必要的重新渲染,提高性能

这种能力是 Million.js 库的核心。 官方网站上有一个交互式演示来说明结果:

p4.png

单击 Million.js 时没有任何反应,单击 React 按钮会向我们显示红色的故障动画。

还有一个由 Stefan Krause 开发的 JS 框架速度基准的链接

在比较 React 和 Million.js 之后,我们将看到这样的结果:

p5.png

我们可以看到指标都有不错的提升。

「选择行(select row)」和「交换行(swap rows)」也相当快。 速度几乎和 vanilla JS 一样。 我们看到 Million.js 使 React 速度提高了 4-5 倍

Million.js 页面没有提供方法,因此很难重现 benchmark 中的 70% 数字

但可以肯定的是,benchmark 显示了一些重要的性能改进,而且我确信在某种情况下会达到这个数字。

我喜欢 Million.js 的一点是,你只能将它用于某些组件,这意味着根据需求将其引入更大的项目应该很容易,而且不会有灾难性的风险。

因此,如果仅更改 UI 的一部分并且你的 React 应用程序出现卡顿,Million.js 将帮助你修复它。

真是一个精美的工程作品。 我很喜欢!

本文为翻译文,原文地址 在这里

目录
相关文章
|
24天前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
57 2
|
6月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
11月前
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
314 11
|
11月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
515 10
|
11月前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
300 5
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
286 6
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
11月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
257 0
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
778 4
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
392 3