Home Blogs 优化React,Angular或Vue单页应用程序以提高性能
Applications

优化React,Angular或Vue单页应用程序以提高性能

About The Author

Outline

在这篇文章中,我们将了解Vue,React和Angular在性能方面的比较,以及如何优化在这些前端框架上运行的电子商务SPA以获得最佳用户体验。

Angular,React和Vue在性能方面如何比较

运行一个快速的网站,通过更好的SEO排名,更多的访客,更长的会话,导致底线增长,因此, 更多收入。 许多了解速度作用的电子商务领导者 已经转向无头商务架构,从而实现了现代前端的采用,例如进步的Web应用程序和SPA。 轻量级SPA前端越来越受欢迎,因为它们是解决现代电子商务平台固有的各种性能问题的可靠方法,因此运营商可以提供快如闪电的店面。

这就是理论。 为了验证这些崇高的主张,我们进行了一个小型的内部性能分析。 为此,我们测试了在领先前端框架上运行的近2,000个受欢迎的电子商务网站,并根据Lighthouse 6分数评估了它们的性能。 结果令人惊讶—测试的SPA前端的平均Lighthouse得分只有24分,中位值为19分(满分100分)! 虽然听起来很低,但这仍然比美国领先的500家互联网零售商的收入平均得分高26 %

Vue.js研究中心的速度最快,平均评分为27分,中位数为20分。 Angular网站的平均成绩为23分;然而,他们的表现分数更分散,中位数只有18分。 React网站是测试最慢的网站,平均Lighthouse评分为22分,中位数为18分。 这是令人惊讶的,特别是因为该框架被一些最大的玩家使用,包括像PayPal,Grammarly和Vimeo等网站,等等。

测试的结论相当明确—尽管人们认为SPA比传统网站更快,但仍有改进的余地。 此外,Google Crux和其他测量工具不会跟踪单页应用程序(SPA)的页面转换,将它们错误地描述为比它们慢得多,并惩罚它们的分数。 我们在博客上的另一篇文章中详细介绍了此问题。

启动时间和运行时性能对Lighthouse分数的影响

应用程序的性能由两个指标定义: 启动时间运行时性能。 代码包的大小主要影响前者,即应用程序代码和框架代码的组合。 运行时性能取决于框架的特定优化功能及其处理DOM操作和更新的方式。

包大小

所有三个框架都具有大小相似的最小代码包。 虽然框架的捆绑包大小会影响启动时间,但在比较Angular,React和Vue的性能时,度量不应是主要关注点。

更准确地说,Angular bundle size (血管束大小)仅略大于Vue和React bundle size (反应束大小),其中Vue bundle (Vue捆绑包)比React bundle (反应捆绑包)小一点。 此外,值得注意的是Angular开发团队正在稳步优化其(源)代码包的大小。

有关近似数字,请参见下图。

Angular,React和Vue都提供了出色的运行时性能,每一个都同样适合成为具有大量流量的复杂创收网站的主干。

Lighthouse的TTI和LCP指标

Lighthouse是一款出色的测试工具,可返回宝贵的速度见解。 它可以识别可能的性能问题并帮助优化站点的各个方面。 灯塔评分是根据多个指标的加权平均值计算得出的(转到此处查看完整的消耗)。 尽管如此,从用户的角度来看,最大的Contentful Paint (LCP),Time to Interactive (TTI)和Cumulative Layout Shift (CLS)很可能是最重要的内容。 TTI和LCP直接连接感知的负载速度。

TTI很好地体现了框架包大小对SPA速度的影响,因为在用户与应用交互之前,需要对包进行全面评估。 TTI较长的站点在加载时将显示站点的各个部分,但不允许用户与其交互,这最终可能会导致失望。

另一方面,LCP指标衡量页面内容的最大元素在屏幕上呈现之前所需的时间。

Lighthouse与Crux实时浏览数据

值得注意的是,合成速度测量工具(如Lighthouse)并不完整。 站点速度更多地关系到用户浏览站点时的”感觉”。 Lighthouse性能分数是一个很好的参考点,但它有点随意,很难与真实体验关联。 例如,在用户体验方面,60分的性能得分与50分相比有多高,很难进行翻译。

合成测试还倾向于模拟旧设备和连接(例如,Lighthouse模拟3G连接),而实际上,大多数移动用户都在快速LTE甚至5G网络上。

在特定框架上运行的站点可能会”感觉”更快,但由于其原始性能得分而与其他站点无关,反之亦然。 这主要是由于每个框架采用特定技巧(例如延迟加载)来提高网站对用户的”感觉”的速度。

在接下来的章节中,我们将回顾每个框架为改善网站性能提供的机会。

角度

Angular使用新的标记和属性扩展HTML代码,并解释属性以执行数据绑定。

由于其丰富的功能,工作应用程序可能比Vue或React大得多(约500KB),这可能会对性能产生轻微影响。

Angular的MVC抽象(源代码)

以下是Angular的主要优点的快速摘要。

  • 代码生成。 Angular可为JavaScript虚拟机生成高度优化的代码,从而获得手写代码的优势。 HTML模板与JavaScript相结合,为其他框架中不可能的优化打开了大门,例如React。
  • 代码分割。 得益于Component Router,Angular应用程序可快速加载,从而实现自动代码分割。 这样,用户就可以加载渲染其请求的视图所需的代码。
  • 真正的DOM。 Angular使用真正的DOM;因此,它最适合内容只会不时更新的单页应用程序,而不是那些经常更改的应用程序,例如大多数电子商务网站。 操作虚拟DOM的速度要快得多,因为屏幕上不会绘制任何内容。

反应

React由Facebook创建和开发,是最流行的开源移动应用框架之一。 它不提供广泛的库;因此,它的大小比Angular小得多。

借助单向数据,React可以更好地控制项目—在设计应用时,React开发人员可以将子组件嵌套在更高层次的父组件中。

React提供了一些有趣的功能,包括:

  • 虚拟DOM: 仅在需要时重新呈现节点。 React将新数据与原始DOM进行比较,并自动更新视图。 这增强了需要定期更新内容的各种规模的应用程序的性能。
  • 单向数据绑定: React使用通量控制应用程序架构的单向数据绑定。 ReactJS可帮助用户更新视图,而Flux则控制应用程序工作流程。 虚拟DOM可以将新数据与原始DOM进行比较并自动更新视图,从而增加了优势。
  • 支持捆绑和树摇: 最大程度地减少最终用户的资源负载。
  • 服务器端渲染(SSR)支持: 在特定实现中提供速度提升。

与Angular和Vue相比,React采用了某些技术,可使最终用户更快地”感觉”页面。 例如,该框架优先考虑用户输入,而不是呈现页面上的内容。

VUE

VUE速度快,体积小,仅约30KB (gzipped),因此首次加载速度更快。 这使得它成为所有三个框架中最小的一个,并显著加快了Vue上运行的网站的性能。

VUE提供:

  • 服务器端呈现(SSR)
  • 摇晃树木
  • 捆绑
  • 虚拟DOM: 项目中的更改不会正确影响DOM。 修改真实DOM是一项资源密集型任务,因此首先对虚拟DOM应用更新。

查看 这份详细的基准测试 报告,比较主要JavaScript框架和库的启动时间,内存分配和特定操作的持续时间。 与React相比,Vue在内存分配和启动时间方面稍好一些,尽管React在运行时速度稍快一些。

Angular和Vue使用结合JavaScript的HTML模板。 这为他们提供了额外的优化空间React不提供。 例如,Vue跟踪依赖关系,防止不必要地呈现子组件。

VUE与React与Angular SPA优化

我们知道基准和性能得分并不能说明整个情况。 网站速度可能因应用程序大小和优化工作而异。 以下是一些帮助优化Vue,React和Angular SPA以提高速度的想法。

1服务器端渲染(SSR)

总体而言,将SSR与SPA站点配合使用有四个主要优点:

  • SSR允许您快速加载SPA模板并向用户显示内容(尽管用户可能无法立即与其交互)。 如果没有SSR,用户会盯着一个空屏幕,等待内容在浏览器中加载和呈现。
  • SSR减少了最终用户计算机上的负载。
  • 由于Google现在可以正确抓取SPA内容,因此服务器端呈现对SEO的重要性可能不如以前那么重要。 但使用SSR的好处是,许多其他搜索引擎仍然不理解JavaScript,无法正确抓取JavaScript重的网站。
  • 社交网络通常无法正确显示从客户端呈现的SPA网站共享的内容。 例如,Facebook Scraper只依赖于服务器设置的元标记,而不能与客户端呈现的元标记一起使用。 为了更好地控制您的SPA网站在通过Open Graph共享时的外观,SSR是必须的。
  • AMP可加快移动设备上的首次加载速度,但不允许您使用JavaScript。 不可能在客户端上从React呈现AMP,它必须在服务器上完成。 然而,即使在SSR到位后,仍有许多回圈可以跳过,将React应用转换为有效的AMP应用。 幸运的是,一些前端框架,如 React StoreFront,可以为您处理一切。

SSR最适合静态网站,但电子商务SPA网站仍可缓存-具有合适的基础设施。 使用Layer0,内容在动态服务器端呈现,然后使用我们的CDN-as-JavaScript缓存在边缘。 这样,大型数据库驱动的网站(如拥有数千甚至数百万页的电子商务SPA,个性化,实时库存等)就可以让用户从登录到结账的次秒级页面加载体验愉悦。

CDN即JavaScript 服务工作者(称为Layer0 Workers)可在访问者点击链接之前,智能地从边缘获取动态数据,并根据他们最可能点击的内容将其流式传输到浏览器。

Layer0网络和监视工具确保动态数据至少在95%的时间内被缓存,从而保护您的数据库不受预取创建的额外请求的影响。 通过这种方式,您可以提供次秒级页面加载,为您的访客提供从着陆到结账的无缝体验。

Layer0网络和监视工具

总体而言,在SSR功能和详细文档方面,Vue优于React,React需要第三方库(例如,next.js)来呈现服务器端的页面。

2安培

AMP通过简化HTML并强制实施对CSS和JavaScript的严格限制,在移动Web上创建更好,更快的体验。 然后,这些页面将缓存并预渲染在Google服务器上,这使您可以近乎瞬时地过渡到您的应用。

缺点是它不同于您编写PWA/SPA的方式,意味着完全重写应用程序,除非您使用具有内置AMP支持的专用框架,如 React StoreFront

对于来自Google的SERP的流量,AMP页面有500毫秒的中位页面加载。 这些速度是可能的,因为Google服务器在点击AMP页面链接之前,会将AMP内容预取并预渲染到用户的浏览器。 普通的电子商务网站从谷歌搜索(有机和付费)获得了很大一部分流量,因此这些收益可以产生巨大的影响。

使用AMP的网站也会降低跳出率,因为通常在等待页面加载时可能会出现反弹的用户现在将获得闪电般的体验。

3,代码分割

随着您继续添加功能,您的单页应用程序将随着时间的推移而增长。 但我们知道,每个应用程序都有一些几乎从未使用过的功能,这些功能不必要地减慢了运行速度。 您应该实施代码拆分,以使您的应用尽可能快地运行。

代码拆分涉及为应用中的每个顶级组件创建单独的捆绑包。 对于eCommerce SPA,主页,商品列表和商品描述页面将有单独的捆绑包。 这样,当用户通过特定产品的链接到达您的应用时,浏览器不需要下载和运行所有以前页面的代码,从而减少了TTI和FID时间。

通过代码分割,应用程序可以在后台”延迟加载”其他页面组件,并在用户决定导航时使用这些组件。 这可以节省带宽并减少首次输入延迟或FID (注意FID通常近似于交互或TTI指标的时间),从而提高网站速度和搜索引擎排名。

4加载缓慢

Vue,React和Angular均支持延迟加载,与SSR相结合,可显著提高速度。

在实施SSR时,延迟加载会带来挑战。 服务器应该知道哪些组件用于呈现出的HTML,并将这些组件的代码与HTML一起发送。 否则,该应用需要在浏览器中安装并运行两个渲染周期,然后才能准备好进行交互,这将增加FID(和TTI),从而可能导致内容Flash或jank。

延迟加载和SSR已连接。 您选择用于延迟加载的库(例如 React Loadable)将影响您在响应中生成最终HTML的方式。 要捕获需要加载以补充服务器上呈现的HTML的分发包,您需要添加 <loadable.capture></ loadable.capture> 添加到您的SSR代码,然后使用React Loadable的getBundles函数找出哪个 <脚本></script> 标记需要添加到文档正文中。

由于延迟加载客户端提示尚未得到所有浏览器的全局支持,因此有几种解决方法可以无缝实现延迟加载。

解决方案1

您可以让映像在安装应用程序时填充客户端,而不是在服务器端呈现映像。

解决方案2

只对”折页下方”的图像使用延迟加载,即,加载后您知道的图像将不会立即显示。 这是一个挑战,因为折叠线可能会根据用户的设备和显示屏大小上下移动。 然而,一些启发式的帮助。 例如,在电子商务类别页面上,您可能会关闭第一组产品图片的延迟加载(它们可能是”在折页上方”)。 对于您知道将始终位于折页上方的项目(例如,标题,公司徽标,购物车图标),您不应该启用延迟加载,并且始终可以将其呈现在服务器端。

解决方案3

检测用户代理可以帮助提供适当版本的SSR呈现页面。 通常不建议使用用户代理检测来实现渐进式增强,但它可以在浏览器获取并实现客户端提示时作为临时解决方法。

此解决方案要求您适当地标准化缓存密钥;否则,您可能会对缓存进行大量的碎片整理。

5现代CDN

优化您的SPA以提高速度,并在上面使用良好的CDN,这将提升您的网站,但仅实现次秒级速度是不够的。 这是因为大多数传统CDN只擅长缓存静态文件,但总体而言,它们不能很好地处理JSON / HTML/SSR数据,而这正是电子商务SPA网站的组成部分。 要使这些网站更快地运行,需要多种Web技术协同工作。 与其他CDN不同,Layer0应用程序感知CDN可以很好地与电子商务SPA配合使用。 它将高速缓存命中率优化至前所未闻的级别,并将智能带到边缘。 这有助于企业主通过将类似页面(例如,PDP,PLP和Cart)分类,而不是仅仅显示无尽的URL列表,从而了解趋势和优化机会。 这使您可以采取行动并查看网站加载时间的差异。

但最重要的是, CDN-as-JavaScript 使用高级预测性预取技术将缓存的数据从边缘流式传输到用户的浏览器,以免用户点击任何内容。 这使网站在购物者点击之前保持5秒,使他们能够通过即时浏览体验让用户满意。

6,移动工具

Angular非常适合构建移动应用程序。 您可以使用该框架构建在任何设备上运行的Web应用程序,或通过将Angular与NativeScrip相结合来开发iOS和Android本机应用程序。 这允许您重用Angular概念,例如数据绑定,依赖关系注入,服务和路由。

React Native被认为是跨平台开发的王者。 它允许开发人员使用类似React的组件在Android和iOS之间重复使用多达99%的JavaScript代码。 这意味着开发人员可以创建100%本机小部件来控制自己的风格。 该框架将视图层作为纯状态输出进行处理,从而轻松创建具有原生外观和性能的iOS/Android配套应用。

尽管Vue落后于React,但它仍然为移动开发提供了几个有价值的解决方案。 例如,NativeScript允许您编写Vue应用程序,并将其编译为原生iOS/Android应用程序。

然后是Vue Native。 该框架结合了Vue和RN生态系统的优点,声明性渲染,双向绑定以及用于创建跨平台本机应用程序的一组基本组件。

水疗中心速度更快,但速度仍有问题

单页应用程序的最初魅力在于,后续页面在导航过程中不会重新加载,从而带来更快,更顺畅的浏览体验。 但是,现代SPA前端只是站点速度解决方案的一部分,仍有一些问题需要解决:

  • 综合速度基准和测试不一定能说明整个情况。 这些框架的速度可能因应用程序大小和优化工作而异。
  • 虽然各种先进的前端技术(包括先进的Web应用程序,SPA和AMP)可以显著改善客户体验,但网站速度是一个全堆栈问题。 它跨越浏览器,边缘和服务器。 这就是为什么需要全堆栈解决方案来加速任何网站,SPA和多页面应用程序的原因。
  • 所有这些技术都可以提高速度,但同时应用时效果最佳。 使所有这些技术协同工作是一项内部团队可能无法处理的复杂任务(例如,需要创建Node.js层)。

Layer0:使Web变得即时且简单

Layer0是一个完整的解决方案,使电子商务网站快速和更容易开发。 它结合了先进的优化技术来加速大型数据库驱动的网站(如电子商务SPA),以及强大的工具,通过将代码置于开发人员工作流的中心,让开发人员每周可以恢复一天的工作。 Layer0基本上将Jamstack带到大型电子商务网站。

即时: 通过将现代前端与边缘动态内容的缓存命中率为95%的CDN-as-JavaScript和Node.js前端后端相结合,Layer0帮助复杂网站优化堆栈的速度。 它是保证大型电子商务网站中位次第二大内容的(LCP)时间的唯一平台。

简单:Layer0 (现为Edgio) 是您的一体化平台,用于开发,部署,预览,实验,监视, 运行前端,使您能够:

  • 通过预渲染和即时渲染利用Jamstack进行电子商务
  • 通过从产品目录API预取数据,实现零延迟网络连接
  • 在您的应用中本地配置边缘(CDN-as-JavaScript)
  • 在本地和预处理中运行边缘规则
  • 从GitHub,GitLab或Bitbucket为每个新分支创建预览URL并推送
  • 在边缘运行拆分以进行性能A/B测试,金丝雀部署和个性化
  • 无服务器JavaScript比AWS Lambda更简单,更可靠

结论

运行更快的网站不仅仅是一个花招。 在一天结束时,你不仅试图哇你的用户,但也试图取悦世界上最大的搜索引擎。 由于谷歌的排名很快就会被部分的页面速度所决定,因此不能掉以轻心。 快速的网站意味着提高您的SEO排名和转化率,这反过来,产生更多的收入.

虽然对于每个框架的性能可以说很多,但有三点需要记住:

  1. 框架性能的实际差异可能微乎其微。 SPA站点的性能取决于如此多的变量,以至于无法以有意义的方式并排比较这些框架。
  2. 无论您使用的是Angular,Vue还是React,仍有很大的改进空间。

要使SPA更快速,需要将高级Web技术组合在一起工作,您的内部团队可能无法有效地实施这些技术。 值得庆幸的是,包括Layer0在内的一些具有前瞻性的供应商已经为您完成了繁重的工作。

Layer0将服务器端呈现与边缘的高级预测预取和预缓存相结合。 由于动态数据至少在95%的时间内被缓存,因此您的数据库将受到保护,不会受到预取创建的额外请求的影响。 Layer0 CDN即JavaScript服务工作者会在访客点击链接之前智能获取动态页面。 通过这种方式,您可以在单页应用程序上提供次秒级页面加载,为您的访客提供从着陆到结账的无缝体验。

Tags

Just For You