技术总是在不断发展，为了配合最新的 Web 应用程序，用户对需要提供最高标准的浏览器的要求很高。 幸运的是，我们现在使用的浏览器已经改进了功能，可以更好地进行内存和 CPU 分配、代码执行等。 实现高质量应用程序的关键因素之一是使用良好的 JavaScript 框架。 反应、角和 Vue 是一些最流行的 JavaScript 框架。 JavaScript 向浏览器添加了一个新的性能测试层，这使我们能够测量应用程序的周转时间。 这是一个关键步骤，因为周转时间 对用户有巨大的影响。 根据众多客户体验研究，加载网站的预期时间应在 3 秒以下。 3 秒后，用户继续使用该网站的机会将降至 50%，这可能导致公司遭受巨大损失。
客户端 JavaScript 性能至关重要
在 JavaScript 执行期间，浏览器正在利用影响接收结果时间的资源。 这样的时间也会随着多个执行周期而变化。 分析这些因素，不可避免地在测试策略中包括客户端性能测试。 一个好的客户端性能测试工具可以帮助您识别此类问题。 在这篇文章中，我们将解释各种JavaScript框架及其属性。 我们还将解释一个分步 指南 ，以展示如何使用 LoadView 以及每个步骤 Web 记录器 进行客户端性能测试，以编写复杂的用户路径和场景。
JavaScript 框架已解释
JavaScript框架的一个主要优点是，它将帮助我们以吸引人的用户界面和更快的页面加载时间来交付应用程序。 在传统方法中，网站内容是在服务器端生成的，并且会使用浏览器进行检索，浏览器需要与服务器连接每个请求。 浏览器现在非常先进，它们可以动态地与服务器通信，而无需开发人员进行太多的干预。 因此，现代JavaScript框架现在在他们的技术上非常先进，特别是随着效率和资源利用率的提高。 下面列出了一些现代 JavaScript 框架功能：
- 高效的数据管理和更快的性能。 仅必要时编写网页内容更新。 虚拟文档对象模型 （DOM） 将管理呈现的内容和实际 DOM 仅在内容更改时使用。
- 网站标记内的数据格式良好，易于理解。
- 内容根据组件显示。
JavaScript 框架的优势
以下是 JavaScript 框架的一些优点，这些优点被 Web 应用程序广泛使用。
执行速度
由于 JavaScript 在浏览器中运行，因此执行速度非常快。 在时间编译中，JavaScript 只需要与服务器没有通信。
代码简单
如果你已经具备基本的java知识，学习JavaScript就很容易了。
JavaScript 人气
JavaScript 在网络上随处可见。 由于执行速度和 代码简单性，全球主要组织已经在其应用程序中采用了JavaScript。
服务器加载时间
JavaScript 在客户端使用，因此它减少了对服务器的需求。 简单的应用程序甚至可以完全忽略服务器的需求。
醒目的界面
JavaScript 可用于创建功能，从而大大增强用户界面和所有 用户体验。
JavaScript 的缺点
安全
JavaScript 非常容易受到恶意攻击。 除了在浏览器上禁用 JavaScript 执行，没有其他方法可以避免。
比较： 反应与 Vue vs. 角
学习和研究一个新的JavaScript框架可能很有趣。 他们都有自己的优点和缺点。 当我们谈论一个框架时，它完全取决于项目、团队及其功能的独特性。 我们将尝试通过 比较这些框架的一些关键功能来解释不同的因素。
React
反应是由Facebook开发，并在2009年发布。 它是一个灵活的 JavaScript 库来构建用户界面。 它是当今增长最快的JavaScript框架之一，因为它被 大型Web应用程序使用。 它还用于构建单页应用程序 （SCA）。 像 Facebook ， Instagram 等， 可能到处被大多数人使用。
反应的优势
React 使用简单的抽象，并且具有概念完整性，这使得反应成为开发人员的最爱。 他们有自己的模板引擎开始工作;React 还配备了范例组件和事件模型，以便开发人员更易于管理。
反应的缺点
主要关心的是安全性，因为 React 在 HTML 中使用 JavaScript。
Angular
Angular 由谷歌开发，于 2010 年发布。 由于应用程序 接口 庞大，结构标准化，它适用于SPA。 Angular 的很大一部分已用 TypeScript 语言编写，但大多数开发人员更喜欢使用其 JavaScript 替代方法。
角的优点
AngularJS 管理自己的绑定，并且不要求开发人员在 all.it 确保所有所做的更改在模型中立即更新，而不会延迟。 由于角支持缓存，因此它减少了应用程序服务器的工作量，以便可以有效地将服务器资源用于其他重要任务。 此外，开发质量良好的应用程序原型非常容易，编码更少。 其他主要有趣的方面是使用普通HTML模板，它帮助开发人员更有效地重用模板。
角的缺点
安全性是所有 JavaScript 框架的一个主要问题。 避免安全问题的唯一方法就是在浏览器中禁用 JavaScript。 如果您以 JavaScript 禁用模式访问应用程序，则基于角度的主要属性将不起作用。 Angular的学习过程也可能是一个主要问题，因为在线提供的帮助有限。
Vue
Vue 是一个渐进的、可增量采用的 JavaScript 框架，由一位之前在 Angular 上工作的前 Google 员工开发。 它于2015年首次发布。 在速度、社区支持和受欢迎程度方面，它优于其他主要框架。 与它的优势数量相比，它的缺点较少。
Vue 的优势
使用 VueJS，您可以通过多种方式构建应用程序功能，这使得它成为开发人员的最爱。 Vue 使用单个文件组件，它覆盖所有 HTML 属性、用途、语义等。 它还允许其组件相互通信，这是此框架的一个关键因素。 像 Netflix 、 Adobe 和小米这样的大公司都在使用 Vue 。
Vue 的缺点
自第一版发布以来，一直有重大问题与框架的稳定性有关。 Vue 不能用于稳定性和安全性非常重要的大型项目，因为它会对组织造成更大的影响。
并排比较：ReactJS、VueJS 和 AngularJS
下图显示了框架之间的基本差异以及性能标准。
反应与 Vue 与角：其他注意事项
稳定性
与 Vue 相比， 角和反应更稳定。 Vue 在基于高科技的应用方面有很多问题。
兼容性
角与 DOM 库和框架兼容。 此外，它还包含许多支持库。 Vue 的第三方库支持少得多。
学习曲线
Vue.js 的学习曲线与 React 相比是很好的，因为它使用了较少的抽象。 角的学习曲线也相对较少。
设置复杂性
角是最复杂的框架，但 Vue 易于设置。
社区支持
与反应和 Vue 不同， Angular 的社区支持范围更广。 许多免费教程、第三方工具和库可用于角和 React。 在社区支持方面，Vue远远落后于他们。
框架大小
Vue 是最小的，角是最大的，当涉及到大小。 随着大小的增加，它将导致应用程序性能的延迟。 如果您使用 Angular 来开发应用程序，我们需要分别在客户端上下载 HTML 文件，这将导致大量数据。 相反，Vue 和 React 只需要 JavaScript 文件来执行。
复杂性
对于复杂的功能应用程序，React 是首选， 因为它具有高性能和稳定性。 尽管我们可以将 Vue 用于小型项目，但此框架在项目规模方面也会不稳定。
许可证要求
反应使用 3 条款 BSD 许可证。 Vue 和 Angular 需要 MIT 许可证。
建筑
Vue 和 Angular 使用支持双向数据绑定的 MVC 体系结构创建。 反应支持单向流动。 由于移动开发的复杂性，建议使用 React 实现更好的稳定性。
优化案例研究
长期以来，JavaScript 中涉及重的站点一直存在性能问题，尤其是在页面加载时间方面。 在汽车/电动汽车行业，由于网站在图形和技术 细节上很重，因此看到与JavaScript相关的性能问题并不少见。 通过使用 LoadView，电动汽车网站“查找我的电气“能够将他们使用的特斯拉 3 型页面上的加载时间总共减少 3.8 秒以上，并减少所需的脚本数量。 这一净性能增长能够帮助他们为网站用户提供更好的体验。
性能基准：角与 Vue 与反应
下图显示了各种性能基准方面，如交互式时间、脚本启动时间和内存效率。
JavaScript 启动指标 ，Stefankrause.net
使用 LoadView 加载测试 JavaScript 应用程序
LoadView 是一个完全托管的基于云的负载测试平台，允许用户测试网站、Web 应用程序、API、流媒体等的性能。 LoadView 可以测试基于现代 JavaScript 框架（如角、反应和 Vue）构建的 Web 应用程序。 LoadView 也是当今市场上唯一使用真实浏览器的解决方案之一，使开发人员能够从用户的角度测量和查看实际性能。 这正是我们加载测试基于 JavaScript 的应用程序时想要的。
以下步骤概述了 对现代 JavaScript 应用程序进行负载测试的过程。 LoadView 的工作方式与真正的浏览器类似，并支持浏览器级别的 JavaScript 执行和 身份验证 逻辑。 所有您需要做的就是使用内置的 EveryStep Web 记录器编写 SPA 页面上 的用户操作脚本，并设置负载测试。 真的就这么简单。 使用 LoadView，您不必担心设置额外的硬件或第三方软件 – 一切都已准备就绪，可以进行测试。 如果您正在寻找最先进的负载和性能测试平台，以及强大的功能，没有比 LoadView 更好的选择。
第 1 步。 初始设置和使用每步 Web 记录器
我们要测试的网站是 histography.io .它是一个纯粹的基于JavaScript的应用程序，在单个页面视图中显示世界历史事件。
如果您没有 LoadView 帐户，可以 注册免费试用。 您会自动收到免费的负载测试。 如果您已经有一个帐户，您直接登录到您的帐户，或启动 EveryStep Web 记录器 开始编写脚本。 或者，如果您已登录您的帐户，请单击”新 测试”， 这将打开记录器窗口，如下所示。 选择 Web 应用程序。
第 2 步。 输入 URL 并记录新脚本
一旦你点击 Web应用程序，它将启动每步网络记录器。 您需要输入 Web 应用程序的地址。。 就我们而言，这是histography.io。 您甚至可以根据您的要求 在桌面/ 移动之间切换。 根据您的选择，录制模式将更改。 有不同的移动选项可用，例如 Android，iPhone等。 此外，还有一个选项，在屏幕方向之间切换，这将模仿移动/屏幕行为。 输入要求后，单击”立即录制”。
录制将启动，您可以浏览需要为负载测试录制的流。 在脚本代码部分，您可以看到录制的详细信息，我们可以根据需要修改代码。 您可以添加特定参数，如 延迟、加密变量、网络条件等，以满足您的特定要求。
第 3 步。 完成脚本
完成 录制 后，单击”停止”。 单击 “立即播放 “以重播脚本。 这将确保录制期间没有捕获错误。 脚本将用您录制的用户路径重播。
如果脚本中出现错误，将显示一条错误消息。 否则，如果没有错误，它将显示下面的成功消息。 如有必要，保存脚本并在以后修改。
单击”保存脚本”按钮后，将显示 录制的脚本 详细信息。 可以更改此脚本以进一步增强。
- 添加步骤。 要向脚本末尾添加其他步骤，只需按记录按钮，然后选择选项即可继续添加步骤。
- 使用工具修改脚本。 使用向导在脚本中间添加新行;使用向导在脚本中间添加新行;您可以在要添加新行的编辑窗格（屏幕底部）中右键单击脚本。 将显示包含要作为新步骤添加的工具的上下文菜单。
- 编辑变量。 要编辑关键字、字段值（如用户名和密码）等变量，请左键单击带下划线的字段标签以编辑该值。
- 上下文参数。 可以将脚本方法参数转换为上下文。
有关编辑脚本的信息，请访问我们的知识 库页面。
第 4 步。 创建您的设备
单击”创建 设备” 按钮开始测试执行步骤。
如果需要，您可以在继续之前进行任何最终更改。 单击调整用户行为或编辑设备以进行进一步更改。 根据用户数和持续时间，您可以查看执行的总成本。
第 5 步。 创建负载测试
选择任何负载类型曲线，具体取决于您的要求。 LoadView 为您提供了三种不同的选择：负载步进曲线、基于目标的曲线和动态可调曲线。 根据您的特定性能要求，您可以决定负载类型。 我们为此测试选择了负载步进曲线。
如果您有世界各地的客户正在访问您的应用程序，您可以根据客户的位置选择 LoadView Load 生成器。 我们已经选择了明尼苏达州的位置，但是，LoadView平台为您提供超过15个位置可供选择。 根据所需的用户数，您可以选择服务器数量。 请注意，客户端/JavaScript 性能测试将非常繁重。
第 6 步。 开始负载测试
选择测试类型和服务器后，单击 “继续“。 测试完成后，系统会要求您提供电子邮件地址，该电子邮件地址需要通知您。 默认测试结果也将发送给 LoadView 帐户的所有者。 有两个选项可用于启动测试。 您可以立即开始测试，也可以安排它供以后使用。
测试启动后，您可以看到有关测试状态的实时信息。 将提供有关服务器的所有信息以及方案详细信息。 如果要进行最后一分钟的更改，还可以取消测试。 将提交测试的初始状态，并在测试重新开始后更改为运行状态。
第 7 步。 负载测试执行
工作模型图（也称为执行计划信息）将在” 测试摘要” 选项卡下提供，这还将提供有关运行测试的最大用户数的信息。 它还将显示实际用户数和预期用户数。
成功会话总数和错误会话总数。 此图将为您提供有关错误的信息。
第8步。 性能测试分析和报告
测试完成后，您将看到负载测试报告以及执行详细信息，其中将提供有关执行的总体信息。 您还将在电子邮件中收到一份负载测试报告，内容包括详细信息和 PDF 附件。 这可以与您的团队成员共享。
最后的想法：如何运行JavaScript应用程序性能测试
JavaScript 框架提供了创建旨在提供独特用户体验的应用程序的独特功能。 通过加载测试 JavaScript 应用程序，确保对 JavaScript 框架的时间和投资。 EveryStep Web 记录器的主要优点是，您不需要任何编码经验或技能，这使得任何人都很容易使用。 了解有关使用 EveryStep Web 刻录机的信息。
LoadView 平台可以帮助您测试网站和应用程序，以处理大型流量事件，如黑色星期五/网络星期一。 确保您的电子商务网站和应用程序在流量高峰下能够执行，这永远不会太早。
立即开始注册 LoadView 免费试用版，或与性能工程师一 起注册一 对一演示。 他们将很乐意通过并演示 LoadView 提供的所有功能。