专注企业商务信息发布服务
 微信公众号
中享网

Vue 性能开始反超 React 了?

[复制链接]
zxw88 发表于 2022-7-26 15:40:48 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
在之前的全球网站统计中,利用 React 构建的网站比例远大于 Vue,而随着 Vue 的飞速发展,尤其是去年发布了 Vue3 后来,越来越多的人开始使用了。
那么在这种情况下,用 Vue 构建的网站比例如何了呢?除了 Vue 和 React,其它框架的占比如何?每个网站的性能又如何?
所有数据无法证明这些框架孰优孰劣,毕竟框架只是提供能力,所以比较结果仅供参考
本文数据来自于 Google Chrome User Experience Report,这是用户在使用 Chrome 浏览器访问网页时自动上报并记录的,应该还比较有权威性
前言

Chrome 所统计的网站性能指标主要来源于三个维度:

  • LCP[1](Largest Contentful Paint)
  • FID[2](First Input Delay)
  • CLS[3](Cumulative Layout Shift)
164501hx8412xh0wjxvxa4.jpg

Core Web Vitals
这些也是在 Google Search 中统计权重的重要指标
在 Chrome 的用户体验报告里主要统计到的前端开发框架有:Vue、React、Angular JS、Angular、Preact、Svelte、Next.js、Nuxt.js、SvelteKit ...
各大框架性能如何?

结合这三个指标,综合数据如下:
164501woqakl9lpsuctksp.jpg

移动端(综合)
164502bn999554fuihrmxr.jpg

PC 端(综合)
这里有个有意思的点,Preact 只有 4kb 左右,而 React 有 32kb 左右,都知道前者是后者的轻量级的替代方案,从图中数据可以看出,这两者性能差不多,甚至在 PC 从图表数据上来看 Preact 还有于 React
再把这三个指标拆开来看看各大框架的表现情况
164502lokrkuordozjn62w.jpg

FID
这个指标没什么好看的,所有的框架几乎都很完美
在业界流传着一句话:大型应用选React,小型应用选Vue
刚才看的都是统计的所有网站的数据,我们来看下网站排名前 100万 的网站数据
164503r2x4oc2ouu2kze2t.jpg

LCP
164503oejih5fgej8qehnq.jpg

CLS
看这两张图表,Vue 构建的网站似乎性能都超过了 React ?
恰巧最近也看了 Vue3 的框架设计的书,真的是惊叹 Vue 框架设计的 之处
资源大小

用户报告其实也统计了各个网站 JS 资源下载情况,这也是跟网站性能有所关联的,毕竟资源过大或多或少也会减慢页面的渲染速度,尤其是 JS 文件,需要先下载再解析
164503fyfnlm7lpnzpniud.jpg

JS下载大小
可以看到基本上每个框架构建的网站所需要下载的 JS 资源大小都达到了 1000kb 甚至以上,毕竟 SPA 应用会一次性把所有的文件都下载下来,这都很正常
从图中看 Svelte 好像是最优的?这是意料之中的,毕竟跟每个框架的设计有关,Svelte 选择了纯编译时(官方所说的无 runtime),也就是最终编译成直接操作原生 DOM 的代码,那么所需要下载的 JS 资源肯定相较于其它框架是少一些的
又看到个有意思的点,想抛出一个疑问,Preact 明明是 React 轻量替代方案,图中展现的数据来看,Preact 确实最"重"的?这是为什么?
再来看一个跟框架本身无关的数据吧,那就是各大网站的图片下载量
164504p3353xmx3dsuji5e.jpg

图片资源
SSR & SSG

大家都知道 SSR 和 SSG 的出现就是为了解决 SPA 应用带来的一些性能问题,目的是为了使网站能更快地展现在用户面前,以此来提升网站的性能指标(本文所说的 Core Web Vitals )
用户使用报告里同样也收集了使用了这些技术的网站的相关数据,一起来看一下
164504vsn2s2rruzht0n2z.jpg

性能
164505zlbxtmzij9imm9ei.jpg

数量
最吸引人眼球的就是 SvelteKit 然而,它的数据指标似乎比其它的框架高出了将近一倍,不过可惜的是统计到的数据只有 33 个,相较于其它框架的数量差距太大了,留个悬念吧,不知道等它量级起来后,是否还能保持这样的性能
对于 CLS、FID、LCP 这三个指标来说,大家最关心的应该是 LCP,毕竟这是最影响用户体验的指标,那么在使用和没使用服务端渲染框架的网站在 LCP 这项指标上的表现又如何呢?
164505p7cuv7tl479u5cts.jpg

发现了特别特别有意思的点:

  • Next.js 的 LCP 指标远 低 于 React
  • Nuxt.js 的 LCP 指标远 高 于 Vue
同样是服务端渲染框架为何差别这么大?
回到 LCP 指标本身,其目前并不会计算所有元素,因为这样会使这个指标变得非常复杂,它现在只关注下面的元素:

  • <img> 元素
  • <svg> 元素
  • <video> 元素
  • 通过 url() 函数加载背景图片的元素
  • 包含文本节点或其他内联文本元素子级的块级元素。
大部分网站都是以图片为主导元素的,有没有可能是图片影响的?了解 Next.js 的人都知道,该框架自己封装了一个 image 组件,该组件内部对图片做了很多处理,例如:利用内置的代理服务器对图片进行 格式转换、压缩、懒加载,利用 srcset[4] 属性对图片进行优化
我在想这些虽然看起来是 Next.js 的优点,但其实也是它的缺点,在对图片进行处理时肯定会有一些耗时,影响渲染速度
再找一张数据表来看看我的猜想是否符合:
164506lx9i9zx2kr2kxxe2.jpg

我们看了这几个框架构建的网站中图片下载情况,尽管 Next.js 应用图片下载量很小,但它的 LCP 指标仍然垫底???反而 Nuxt.js 的数据令人惊叹,图片下载量将近是 Next.js 的三倍,LCP 指标还远远高于它
我倒不是惊叹于为什么 Nuxt.js 远超于 Next.js,疑惑的是 Next.js 的这个指标为什么这么差,我翻阅了很多资料都没有结论,也许是过渡优化或优化不当带来的弊端?(如果你们有什么想法,可以评论区留言)

今日头条
免责声明:文章来源转载今日头条优质自媒体,版权归原创作者所有,转载无任何商业目的,如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,感谢您的理解,谢谢合作!
回复

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


0关注

0粉丝

6070帖子

排行榜
作者专栏

关注我们:微信订阅

微信公众号

微信客服

全国服务热线:

189-8727-5712

网站名称:中享网

运营中心:云南省昆明市

联系邮箱:314562380#qq.com

Copyright   ©2014-2023  中享网Powered by©Discuz!技术支持:中享网     ( 滇ICP备16008358号-6 )|网站地图

免责声明:本站所刊载的各类形式(包括但不仅限于文字、图片、图表)的作品仅供参考使用,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责。

本站所有资源收集于互联网,分享目的仅供大家学习与参考,版权归原创作者所有,如有侵权,请联系管理员及时删除!

滇公网安备 53011102001243号