在这篇文章中，我们将了解Vue，React和Angular在性能方面的比较，以及如何优化在这些前端框架上运行的电子商务SPA以获得最佳用户体验。
Angular，React和Vue在性能方面的比较如何
运行快速网站可通过更好的搜索引擎优化排名，更多的访客，更长的会话以及更高的收入实现利润增长。 许多了解速度作用的电子商务领导者已经转向无头商务架构，从而支持采用先进的Web应用程序和SPA等现代前端。 轻量级SPA前端越来越受欢迎，因为它们是解决现代电子商务平台固有的各种性能问题的可靠方式，因此运营商可以提供快如闪电的店面。
嗯,这就是理论。 为了验证这些崇高的声称，我们进行了一项小型的内部性能分析。 为此，我们测试了在领先前端框架上运行的近2，000个热门电子商务网站，并根据Lighthouse 6得分评估了这些网站的性能。 结果令人惊讶——测试过的SPA前端的灯塔平均得分只有24分,中位数为19分(总分为100分)! 虽然听起来很低，但按收入计算，这仍比美国500家领先互联网零售商的平均得分高出26 %。
Vue.js网站最快,平均得分为27分,中位数为20分。 Angular网站的平均值为23分,但他们的性能分数更分散,中位数仅为18分。 React网站的测试速度最慢，灯塔平均得分为22分，中位数为18分。 这是令人惊讶的,特别是因为框架被一些最大的玩家使用,包括PayPal，Grammarly和Vimeo等网站。
测试的结论相当明确——虽然SPA被认为比传统网站快,但仍有改进的余地。 此外,Google Crux和其他测量工具不会跟踪单页应用程序(SPA)的页面转换,将其歪曲为远低于它们的速度,并惩罚它们的分数。 我们在博客上的另一篇帖子中写下了有关此问题的更多信息。
启动时间和运行时性能对Lighthouse得分的影响
应用程序的性能由两个指标定义:启动时间和运行时性能。 代码包的大小主要影响前者,即应用代码和框架代码的组合。 运行时性能取决于框架的特定优化功能及其处理DOM操作和更新的方式。
捆绑包大小
所有三个框架都有大小相似的最小代码包。 虽然框架的捆绑包大小会影响启动时间，但在比较Angular，React和Vue的性能时，指标不应成为主要关注点。
更确切地说，角束大小仅略大于Vue和反应束大小，其中Vue束比反应束小一点。 另外,值得注意的是,Angular开发团队正在稳步优化其(源代码)代码包的大小。
有关近似数字，请参见下表。
Lighthouse的TTI和LCP指标
Lighthouse是一个很好的测试工具,可以返回宝贵的速度见解。 它可识别可能的性能问题并帮助优化站点的各个方面。 灯塔得分是基于多个指标的加权平均值计算的(点击此处查看完整的数据)。 然而,从用户的角度来看,最大的连续涂料(LCP)，交互时间(TTI)和累积布局偏移(CLS)很可能是最重要的。 TTI和LCP与感知的负载速度直接相连。 TTI很好地体现了框架捆绑包大小对SPA速度的影响,因为在用户可以与应用程序交互之前,需要对捆绑包进行全面评估。 具有较长TTI的站点在加载时将显示站点的各个部分，但不允许用户与其进行交互，这最终可能会导致沮丧。 另一方面，LCP指标衡量页面内容的最大元素在屏幕上呈现之前所需的时间。灯塔与现实生活中浏览数据的对比
值得注意的是,合成速度测量工具(如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的速度要快得多，因为屏幕上没有绘制任何内容。
反应
由Facebook创建和开发的React是最受欢迎的开源移动应用程序框架之一。 它不提供广泛的库;因此,它的大小明显小于Angular。
借助单向数据,React允许更好地控制项目—在设计应用程序时,React开发人员可以将子组件嵌套在更高层次的父组件中。
React提供了一些有趣的功能，包括：
- 虚拟DOM：节点仅在需要时重新呈现。 React会将新数据与原始DOM进行比较，并自动更新视图。 这提高了需要定期更新内容的各种规模应用程序的性能。
- 单向数据绑定：React使用单向数据绑定和通量控制应用架构。 ReactJS帮助用户更新视图,Flux控制应用程序工作流。 Virtual 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模板。 这给了他们额外的空间优化反应没有提供。 例如，Vue跟踪依赖关系，防止不必要的子组件渲染。
VUE vs. React vs. Angular SPA优化
我们知道，基准和绩效分数并不能说明整个情况。 网站速度可能会因应用程序大小和您的优化工作而异。 以下是一些有助于优化Vue，React和Angular Spa的速度的想法。
1.服务器端渲染(SSR)
总体而言，将SSR与SPA站点结合使用有四个主要优点：
- SSR允许您快速加载SPA模板并向用户显示内容(尽管用户可能无法立即与其交互)。 如果没有SSR，用户会盯着空白屏幕，等待内容在浏览器中加载和呈现。
- SSR可减少最终用户计算机上的负载。
- 由于Google现在可以正确地抓取SPA内容,服务器端渲染对于SEO可能不如以前那么重要。 但使用SSR的好处是,许多其他搜索引擎仍然不理解JavaScript,不能正确地抓取JavaScript重的网站。
- 社交网络通常无法正确显示从客户端呈现的SPA网站共享的内容。 例如,Facebook scraper仅依赖于服务器设置的元标记,而不适用于客户端呈现的元标记。 要更好地控制通过Open Graph共享SPA站点时的外观，SSR是必不可少的。
- AMP可加速移动设备上的首次加载，但不允许您使用JavaScript。 无法在客户端上通过React渲染AMP，必须在服务器上完成。 然而,即使SSR到位,也有很多跳圈来将React应用程序转换为有效的AMP应用程序。 幸运的是,一些前端框架(如React Storefront)可以为您处理一切。
SSR最适合静态网站，但电子商务SPA网站仍然可以缓存，并且具有正确的基础设施。 使用Layer0，内容在运行服务器端呈现，然后使用我们的CDN-AS-JavaScript在边缘缓存。 这样,大型数据库驱动的网站,如拥有数千页甚至数百万页的电子商务SPA，个性化设置，实时库存等,可以让用户从登录到结账都感到满意。
CDN-AS-JavaScript服务工作者(称为Layer0 Workers)在访问者点击链接之前，智能地从边缘提取动态数据，并根据他们最有可能点击的内容将其传输到浏览器。
Layer0网络和监控工具可确保动态数据至少在95%的时间内被缓存，使数据库不受通过预取创建的额外请求的影响。 通过这种方式,您可以提供次秒的页面加载,为访客提供从登录到结帐的无缝体验。
Layer0网络和监控工具
总的来说，关于SSR功能和详细文档，Vue更适合React，后者需要第三方库(如Next.js)才能在服务器端呈现页面。
2.安培
AMP通过简化HTML并强制执行CSS和JavaScript的严格限制，在移动Web上创建更好，更快的体验。 然后,这些页面将缓存并预呈现在Google服务器上,这使得过渡到您的应用几乎是瞬时的。
缺点是它不同于您编写PWA/SPA的方式,意味着完全重写应用程序,除非您使用具有内置AMP支持的专用框架,如React Storefront。
AMP页面具有来自Google SERP的流量的中位页面加载量500毫秒。 之所以能够实现这些速度，是因为Google服务器在单击AMP页面链接之前会预取AMP内容并将其预呈现到用户的浏览器。 普通的电子商务网站从谷歌搜索(有机搜索和付费搜索)获得了大量的流量,因此这些收益可以产生巨大的影响。
使用AMP的网站还可以降低退回率，因为通常在等待页面加载时可能会退回的用户现在将获得极速体验。
3.代码分割
随着您继续添加功能，单页应用程序将会随着时间的推移而增长。 但我们知道，每个应用程序都有一些几乎从未使用过的功能，并且速度不必要地降低。 您应该实施代码拆分,以使您的应用尽可能快。
代码拆分涉及为应用中的每个顶级组件创建单独的捆绑包。 对于电子商务SPA，主页，产品列表和产品描述页面将有单独的捆绑包。 这样,当用户通过指向特定产品的链接到达您的应用时,浏览器不需要下载并运行所有之前页面的代码,从而缩短TTI和FID时间。
通过代码拆分，应用程序可以在后台”延迟加载”其他页面组件，并在用户决定导航时使用这些组件。 这节省了带宽并减少了首次输入延迟或FID (注意FID通常用交互时间或TTI指标近似值)，从而提高了您的网站速度和搜索引擎排名。
4.延迟装载
VUE，React和Angular均支持惰性加载，与SSR结合使用可显著提高速度。
在实施SSR时，延迟加载是一个挑战。 服务器应该知道使用了哪些组件来呈现传出HTML，并将这些组件的代码与HTML一起发送。 否则,该应用将需要在浏览器中安装并运行两个渲染循环,然后才能准备好交互,这将增加FID(和TTI ),这可能会导致内容闪烁或抖动。
延迟加载和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和购物车)，而不是仅仅显示无穷无尽的URL列表。 这使您可以采取行动,并看到网站加载时间的差异。
但最重要的是，CDN-AS-JavaScript使用高级预测性预取技术，在用户点击任何内容之前，将缓存数据从边缘流式传输到用户的浏览器中。 这使网站比购物者的点击提前5秒钟，使他们能够通过即时浏览体验让用户满意。
6.移动工具
Angular非常适合构建移动应用程序。 您可以使用该框架构建可在任何设备上运行的Web应用程序,或者通过将Angular与NativeScrip相结合来开发iOS和Android本机应用程序。 这允许您重复使用Angular概念，如数据绑定，依赖注入，服务和路由。
React Native被认为是跨平台开发之王。 它允许开发人员在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引入大型电子商务网站。
即时：通过将现代前端与CDN-AS-JavaScript (边缘动态内容的高速缓存命中率为95%)和Node.js后端(前端)相结合，Layer0帮助复杂网站优化整个堆栈的速度。 它是唯一一个保证大型电子商务网站内容涂料(LCP)时间中位数次次的平台。
简单：Layer0 (现为Edgio)是您的一体化平台，可用于开发，部署，预览，实验，监视和运行前端，使您能够：
- 通过预渲染和即时渲染利用Jamstack for eCommerce
- 通过从产品目录API预取数据，实现零延迟网络连接
- 在应用程序中本地配置边缘(CDN-AS-JavaScript)
- 在本地和预生产中运行边缘规则
- 从GitHub，GitLab或Bitbucket使用每个新分支和推入创建预览URL
- 在边缘运行Splits以进行高性能A/B测试，金丝雀部署和个性化
- 无服务器JavaScript比AWS Lambda更简单，更可靠
结论
运行一个更快的网站不仅仅是一个花花公子。 在一天结束时,你不仅试图让你的用户惊叹,但也试图取悦世界上最大的搜索引擎。 由于谷歌的排名很快将决定,部分,由页面速度,它不能轻视。 一个快速的网站意味着提高你的搜索引擎优化排名和转化率,这反过来,产生更多的收入。
虽然关于每个框架的性能可以说很多，但有三点需要记住：
- 框架性能的实际差异可能微不足道。 SPA站点的性能取决于如此之多的变量，因此无法以有意义的方式并行比较这些框架。
- 无论您是在Angular，Vue还是React上，仍有很大的改进空间。
要使SPA更快地运行，需要结合使用先进的Web技术，而您的内部团队可能无法有效地实施这些技术。 值得庆幸的是，包括Layer0在内的一些具有前瞻性思维的供应商已经为您完成了繁重的工作。
Layer0将服务器端呈现与高级预测性预取和边缘预缓存相结合。 由于动态数据至少在95%的时间内缓存，因此您的数据库不会受到预取创建的额外请求的保护。 Layer0 CDN-AS-JavaScript服务工作者会在访问者点击链接之前智能地提取您的动态页面。 这样,您就可以在单页应用程序上提供次秒的页面加载,为访客提供从登录到结账的无缝体验。
