[编辑注：去年底，我们重新推出了Freshworks的帮助小部件，它位于一个网站上，帮助更好地支持客户。在这个由我们的工程团队撰写的多部分博客中，我们讨论了我们是如何选择组件和技术的，以及我们对它所做的改进。系列文章的第一部分在这里。]当我们埋头从头开始重建Freshworks帮助小部件时，我们评估了许多技术和组件。我们的目标，如前一篇文章所述，是为了改善用户体验、性能、可访问性，将某些组件解耦以获得更好的性能，并在将来实现集成。作为印度民主设计的倡导者，我们需要它简单、可扩展、自力更生、精心制作和负担得起。在本文中，我们将研究一下我们用来比较六种不同JavaScript框架来重建反馈小部件的指标。为什么我们要评估新的框架？我们所有的Freshworks产品都是使用余烬框架。虽然Ember帮助我们构建可伸缩的、动态的企业web应用程序，但它不适合构建可嵌入的小部件。这是因为它会消耗大量内存并导致性能问题。我们需要一个轻量级的替代品来构建简单的widget类组件，可以嵌入到客户的网站上。我们也可以在以后开发其他的产品。我们评估的JS框架在我们开始探索不同的框架之前，我们倾向于选择一些流行的框架，比如React和Preact。他们是业界的主要参与者，拥有广泛的应用、社区支持和详细的文档。但是我们还想探索一些新的框架和独立的库来更好地验证我们的偏好。在对我们收集到的数据进行彻底的研究之后，我们最终得到了以下框架：React、Preact、Vue、sivelte和Glimmer。除了这个框架列表，我们还想尝试一下浏览器平台本机提供的Web组件规范，这样我们就可以忽略框架开销了。用于评估的指标我们查看了以下指标来评估每个框架，并向自己提出了许多问题，以便更好地确定我们需要的东西的优先级。1） 易用性CLI约定：该框架是否首先提供了CLI（命令行接口）工具？CLI提供的功能有多详尽？他们只是应用脚手架工具还是更多？CLI对框架约定的强制执行有多灵活？我们在寻找rubyonrails上的一些东西，用于客户端Javascript应用程序。开发人员生产力：JS框架提供了什么级别的抽象以便我们可以提高开发人员的生产率？当我们使用自动更新底层数据更改的集成模板时，开发人员不需要编写多余的代码。构建管道（buildpipeline）：哪个框架提供了帮助开发人员从各种资源（如标记、样式和javascript）构建web应用程序到最终构建文件中的工具？完成构建不需要额外的包。CLI包含了编译、传输、合并和缩小资产的所有工具和库。2） 行业采用率公司是否在生产级应用程序中使用该框架？该框架是否作为该组织开源计划的一部分得到推广？3） 社区框架的社区有多大？社区是统一的还是支离破碎的？是否有文档插件、插件、npm包样板教程或框架指南来支持程序员构建widget？4） 支持框架背后的团队有多大？是否有公司或组织拥有该框架？5） 低内存占用哪个框架内存占用率低？我们正在寻找一个下载和解析成本更低的框架。6） 性能使用该框架构建的应用程序的性能如何？我们希望确保在启动应用程序时，框架在更新/修改DOM所花费的时间方面的性能是良好的。软件包有多大，内存使用情况如何？框架应该检查浏览器中为应用程序分配了多少内存，这样我们在使用框架时就不会有内存泄漏。7） 概念完整性框架应该支持在体系结构和设计方面一致的实现模型。换言之，它应该完成一项任务并做好它。因为我们主要是在寻找一个基于组件范例的框架，我们正在寻找对嵌套组件、组件间通信、事件模型、模板插值和状态管理的更好的支持。8） 学习曲线一个有经验的开发人员学习这个框架有多容易？9） 代码样式框架的代码和约定的可读性和直观性如何？10） 成熟度这个框架有多成熟？生产测试多久了？它的未来有多清晰？11） 单个文件组件单个文件组件对开发人员来说是一个巨大的优势。它们将组件代码及其资产（如标记、样式和行为）封装在单个文件中，以便于维护。浏览和维护框架中的组件有多直观？12） 灵活性框架提供了多少现成的特性？该框架是否同时提供了管理现代web应用程序复杂性所需的特性，以及支持快速迭代的集成开发工具包？框架提供了哪些我们不能没有的主要特性？它有多少功能是强制性的？定制框架有多容易？13） 工装框架提供的所有特性在多大程度上可以协同工作？框架有哪些可用的工具？这个框架有多少稳定的插件？我们用来衡量绩效的工具一旦选择了一个框架，就需要验证它的性能。我们需要一个工具。由于我们处于开发架构的早期阶段，所以将原型应用程序托管到服务器上并使用第三方性能分析服务来执行性能分析是不可行的。相反，我们需要一个既通用又灵活的工具，可以在本地开发环境中进行性能审计。这就是灯塔出现的地方。什么是灯塔审计？Lighthouse是一个开源工具。当对任何网页运行时，它可以审核性能、可访问性、渐进式web应用程序等。灯塔审计工具截图。您可以从命令行或作为节点模块在Chrome DevTools中运行Lighthouse。一旦URL被提供给审计，Lighthouse会针对页面运行一系列测试，并生成一份关于页面表现如何的报告。审计失败也可以在报告中看到。它们被视为在哪里以及如何改进页面的指标。每个审计都有一个参考文档，解释为什么审计很重要，以及如何修复遇到的故障。灯塔参数灯塔报告给了我们一个整体的记分卡在性能和最佳实践方面。这些分数让我们对我们构建的原型应用程序的性能有了一个大致的了解，从性能数字中，我们可以得出关于框架性能的确凿证据。分数可以划分为以下指标。灯塔指标第一次油漆和第一次满意的油漆第一个绘制度量标记浏览器在页面上绘制第一个像素的点。相比之下，第一个Contentful Paint度量标记从DOM绘制的第一个内容位。FMP油漆（第一个有意义）FMP度量衡量页面的主要内容显示在屏幕上所需的时间。互动时间交互时间度量（TTI）标记JavaScript主线程空闲数秒的时间，并强调应用程序对用户输入的响应有多可靠。速度指数速度索引是一个页面加载性能指标，用于测量显示页面可见部分的平均时间。要了解更多关于这些指标的信息，您可以在googlechrome的开发者门户网站的以用户为中心的性能指标中查看。现在我们已经熟悉了用于评估各种框架的指标，在下一篇文章中，我们将深入到细节，并研究每个框架的执行情况。敬请期待。相关岗位下面是我们如何比较Javascript框架来选择最好的智能重复数据消除指南