较为完整的 React.js / Vue.js 的性能比较 Part 1

简介: 本文讲的是较为完整的 React.js / Vue.js 的性能比较 Part 1,所以我把 React 设在了开发模式。创建和合并了许多建议。这个 PR 还是值得一读的,因为它经历了错误地方而一度得到了正确的返
本文讲的是较为完整的 React.js / Vue.js 的性能比较 Part 1,

更新

所以我把 React 设在了开发模式。创建和合并了许多建议。这个 PR 还是值得一读的,因为它经历了错误地方而一度得到了正确的返回; https://github.com/footballradar/VueReactPerf/pull/3.

对于第二部分的这些测试,请访问: 较为完整的 React.js / Vue.js 的性能比较

介绍

plish this, although we are much more experienced with React than we are with Vue.

这个发布的目的是研究 React 和 Vue 作为视图层的区别。选定一个带有频繁更新的数据与固定行数的嵌套表视图作为问题的场景。这很好地表现了我们在 Footbal Radar 面临的前端问题。我们不需要对 React 和 Vue 了解太多来解决这个问题,尽管相比 Vue 来说对于 React 我们已经身经百战了。

你可以在我们的 GitHub上查看我们的代码 - https://github.com/footballradar/VueReactPerf.

The output of both view libs will look like this:

二者 view 的结果如下:

测试

我们会对每种方案运行50个比赛。每场比赛每秒更新一次,并将至少增加它的时钟和一个球员单元。另外的属性是随机独立更新。一旦每场比赛开始,我们就会启动时间线记录30秒。明白起见我会转储一个出我的的笔记本的规格的截图。

数据

Our dataset is an array of 5-a-side football games. Each game updates once a second and we’ll allow for a variable number of games. We won’t go into too much detail about how we’re generating the data but if you’re curious check out oursrc/react.data.js and src/vue.data.js in the 我们的数据设置是一个每方5人的足球比赛。每场比赛都是每秒更新一次,我们允许多场比赛同时进行。在这里我们不赘述生产数据的细节,如果你十分好奇,请访问 GitHub repo查看我们的src/react.data.js 和 src/vue.data.js 。

这就是我们的比赛项目的架构

  • 时钟

  • 得分

    • 主场
    • 客场
  • 队伍

  • 主场

  • 客场

  • 恶意铲球

  • 吃牌

  • 黄牌

  • 红牌

  • 球员

    • 姓名
    • 努力级别
    • 出场顺序

我们要记住在 view 层显示数据。 虽然数据的产生对于 React 和 Vue 相同,还是存在有轻微的差异

  • Immutable.js for React--这能够方便我们施行 shouldComponentUpdate来轻松优化渲染

  • 显示数据--通过订阅数据源,我们可以通过setState()更新 React 。

  • 将数据作为带有接受器的对象显示 -Vue 通过挂钩我们的状态接受器进行实时更新翻译。因此我们需要显示和更新状态作为一个壳边对象

React 实例

为了创建以上视图我们用4个组件收尾:

  • App - 从数据源和带有最新数据的 setState订阅。
  • Games - 通过 App 渲染,获取比赛数组。
  • Game - 利用Games 渲染的一行,获得比赛地图。
  • Player - 通过 'game' 渲染的元组,获取球员地图。

任何时候当有嵌套的数据时,我们可以利用“Immutable 引用检查”的优势,即过创建一个子组件并实现‘shouldComponentUpdate’ 。这个案例当中,我们为Game 和 Player组件进行了此项操作。

shouldComponentUpdate(nextProps){
    return nextProps.game !== this.props.game;
}

考虑到我们所做的一切都是在 Game 地图里面访问属性之后显示,创建比分、队伍和吃牌的子组件就没有那么必要了。

这是来自 React 实例的第一个结果。

概述:

自下而上:

时间线:

大概10% 的浏览器时间用于脚本。当这不是空闲时,它主要是脚本,因此在时间轴中的峰值大都是黄色。我们可以确保时间都花在 React 而不是在重堆栈查找生成数据:

由于没有什么可以比较的,也没有太多好说的。当我们第一次运行测试的时候我忘记了在Game 组件置放shouldComponentUpdate ,造成结果差异巨大。

3行的 Javascript 代码使得工作量减少了5倍。不管怎么样都迁入我们的 Vue 版本。

Vue 实例

起初我并不确定是否要用 Immutable.js 的 Vue ,因为他依赖于挂钩朴素 JavaScript 对象的接收器/给定器。

我第一个尝试确实死在了时间线上面。尽管如此我记录了30秒,只能得到5到20秒的结果。我意识到这可能是因为页面在15秒使用了完全的时间线缓冲!所以我只会打印前10秒的结果。

10秒的时间当中,2秒用于脚本的运行上。这并不乐观。Vue 耗费的时间重新创建组件的数据每次都是一个新的参考,这就是使用 Immutable.js 的一个关键。所有我们抛弃了这个方法。

我们改变了数据结构因而只是显示了状态对象,之后直接传递给了 Vue 实例。 同一比赛的所有的更新连带引用都是相同的;完成地和 React 做的事情相反。也没什么太多代码改变。一旦我们触发了 Immutable.js ,所有需要做的就是显示比赛:

export function createStore(noOfGames) {

    let _state;

    createGames(noOfGames).subscribe((games) => _state = games);

    return {
        get state() {
            return _state;
        },

        set state(x) {
            throw "State cannot be modified from outside";
        }
    }
}

new Vue({
    el: "#app",
    data: {
        games: store.state
    }
});

我们没有订阅组件的数据源,那是我们在 React 的 App 组件里面使用的,我们订阅的是自己小的存储器当中。 利用获取器显示状态,Vue 就可以挂钩通顺保持通过我们获取器的只读状态了。我是从 Vuex 的源码里偷学的这种方法, Vuex 是一种 Vue 的状态管理库。

概述 - Vue:

概述 - React:

第一幅图是 Vue , 第二幅是 React 的概述。看这个饼图,真是空闲呢!我需要运行测试以及 React 多次来保证结果符合要求。

自下而上 - Vue:

自下而上 - React:

我们可以看到,相比 React 来说,Vue 在自身消耗的时间更少。 这是取决于每个组件处理的数据和更新速度。

重堆栈 - Vue:

重堆栈- React:

时间线 - Vue:

时间线 - React:

我想这能代表的东西不少。Vue 的时间线上面,有意义的黄色更少了。内存也相当不错。尽管缓慢上升,或许这表明在我数据生成当中有某种问题发生。

好吧很酷,不过我们全身还有可以商量的实验空间。如果我们使用的规模是100个比赛呢?我们得离开页面一小会让每个游戏都 “开球”

概述 - Vue:

概述 - React:

我们的 Vue 实例处理加载比 React 更好,React 用了3倍的时间进行脚本处理了50个比赛。

不知道为什么那就先试试500个游戏吧,我将只记录前15秒的信息(如果我们没有杀死时间线缓存的话。。。)

概述 - Vue:

概述 - React:

自下而上 - Vue:

自下而上 - React:

说实话我对于 React 前15秒的时间线记录十分吃惊。实际上似乎它比 Vue 实例在时间线使用了更少的缓存。React 页不可用,采集大概10秒来进行时钟更新。Vue 页面的耗费不多但是出于不同的原因,非常令人愉快地看到打印时间比脚本处理时间长。我能标注行和更新并不在峰位,而是在后面。

结论

对于结果我特别震惊,我不知道 Vue 是不是就那么好,随便了。这些不是完美的测试但是他们实际完成了真实的问题,而我们不能够给出完美的解决方案。

takeway 就是 Vue 在处理现存元素/数据的频繁变化方面比 React好,我相信这就是答案。 reactivity system.

感谢您的阅读





原文发布时间为:2016年07月06日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
9天前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
52 1
|
9天前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
21 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
9天前
|
JavaScript 前端开发 应用服务中间件
本地运行打包好的React、Vue项目
本文讨论了如何本地运行打包好的React和Vue项目,并解决了使用React-Router时Tomcat部署刷新页面导致404的问题,提出了将请求转回index.html的解决方案。
13 1
本地运行打包好的React、Vue项目
|
8天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
24 4
|
10天前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
12天前
|
JavaScript 前端开发 算法
vue和react的区别是什么?
vue和react的区别是什么?
|
9天前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
23 0
react字符串转为dom标签,类似于Vue中的v-html
|
21天前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
62 6
|
21天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
36 3
|
22天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js

热门文章

最新文章

下一篇
无影云桌面