性能是生产软件产品时应该考虑的最重要的 (如果不是最重要的话) 向量之一。新用户对软件的采用以及对这些用户的保留在很大程度上取决于解决方案的性能。因此，Google搜索引擎非常著名的轶事是，必须在启动搜索的三秒钟内将有意义的搜索结果返回给用户。超过三秒钟的标记使用户点击浏览器的刷新按钮，认为出了问题。然而，性能对于搜索引擎来说并不重要。用户希望他们每天使用的任何软件都能快速加载并对其交互做出流畅的响应。
软件性能维度
软件性能不是我们可以实现的单一功能，也不是我们可以采取的衡量标准。这是软件的一般行为。我们生产的软件的所有功能都需要考虑它们单独和组合的性能。我们可以在三个主要维度上测量软件性能，并分别尝试在 - 加载时间性能，运行时间性能和软件性能上进行改进。在寻求提高我们软件的性能时，需要考虑所有三个方面，因为追求其中任何一个都不会提高用户的总体满意度。
加载时间性能
这可能是我们观察和测量的三个维度中最容易的。加载时间性能就是我们的软件应用程序加载的速度。对于桌面应用，测量从触发软件可执行应用的用户交互到用户可以开始与软件交互的时间。我们称这种测量为 “互动时间”。加载时间性能对于新用户的入职非常重要。
运行时性能
运行时性能取决于我们的软件对用户交互的响应程度。对于应用程序中的每个导航以及与应用程序中的组件的每个交互，运行时性能都不同。测量运行时性能是在多个级别上完成的 - 单个组件响应性，一般视图响应性，视图之间的导航，内存消耗。运行时性能对于用户保留非常重要。
软性能
软性能是最棘手的维度，因为它是由软件的一般可用性定义的。它是通过观察用户并评估他们执行软件预期的一般任务的简便性和直观性来衡量的。软性能本身有很多方面，从用户查找和导航到他们想要使用的功能有多容易，通过应用程序的外观和感觉有多吸引人，到软件产生的错误消息有多好，为了让您的最终用户了解他们做错了什么。
性能在Web
web中的性能是一个复杂的主题，因为它不仅仅取决于软件是如何编写的以及客户端机器具有什么硬件。它还严重依赖于所使用的浏览器类型，以及资产和资源的优化方式。在过去的10年里，随着对Windows XP和Internet Explorer 6、7、8 (也主要是9和10) 的支持的结束，情况变得更好。但是，Internet Explorer 11仍然带有最新版本的Windows，并且某些旧版应用程序，尤其是仍然包含ActiveX模块的应用程序，需要运行IE11。如果你认为这种情况是边缘情况，你应该知道有很多这样的企业应用程序仍然存在!考虑到IE11，web应用程序的性能变得更加棘手。
让我们来看看我们应该考虑的web应用程序的不同性能方面，以及我们应该如何解决它们，以便为我们的用户提供尽可能最佳的性能。根据前面的概述，我们将查看加载时性能，运行时性能和软性能。
加载时间在Web
加载时间性能是应用程序加载 (对于浏览器中的用户请求) 到应用程序交互所需的时间。您可以使用各种工具来衡量web应用程序的加载时间性能，通常它们会为您提供建议，说明您应该做什么，以改善工具衡量的每个性能方面。目前，我建议您使用Lighthouse Google Chrome扩展程序来衡量您的应用程序的lighthouse分数。
我们应该首先考虑的价值是: 第一个有内容的绘画，第一个有意义的绘画，以及互动的时间。
第一个满意的油漆
第一个内容绘制是在页面上呈现第一个文本或图像时。第一个contentful paint完全取决于下载应用程序所需资源的时间，以及浏览器在开始渲染DOM之前需要做的工作。
为了减少应用第一次内容绘制的时间，您需要最小化应用最初下载的资源的大小和数量，还需要最小化阻止呈现的外部资源 (如外部样式表) 的数量。
完成此操作后，请确保您还执行:
- 返回用户的资源缓存。
- 缩小基于文本的资产，如JavaScript文件和CSS样式表。Uglify.js是你的朋友!
- 1.压缩基于文本的资产。现在每个浏览器都支持Brotli和/或gzip压缩!
- 从基于文本的资产中删除未使用的代码。现代JavaScript框架，如棱角分明,采用树摇动和代码拆分机制，以最大程度地减少传递到客户端机器的有效载荷的大小。对于较旧的代码库，请确保删除指向不再使用的旧样式表以及也已过时的JavaScript文件的链接。
第一个有意义的油漆
第一个有意义的绘制是当页面的主要内容可见时。页面尚未完全交互，但最终用户可以看到呈现的内容。
为了减少应用程序第一次有意义的绘制的时间，你需要考虑优化应用程序的关键渲染路径。关键渲染路径是在接收应用程序的HTML、CSS和JavaScript资源与在用户屏幕上渲染表示这些资源旨在产生的最终结果的像素之间需要执行的集合操作。
要优化您的应用程序在生成第一个有意义的绘制之前所花费的时间，请优化您的渲染阻止资源，尤其是CSS。CSS是一个渲染阻塞资源，因为没有你的样式表，你的应用程序有一个完全不同的外观和感觉。您可以通过为CSS链接引用提供适当的媒体规则来优化CSS。例如，如果使用特定设备方向或特定屏幕尺寸的媒体查询对CSS进行注释，则不会将其视为渲染阻止，并且渲染不会被延迟。这意味着从主CSS文件中拆分特定于媒体的CSS，并分别加载它们，将为您的应用程序提供性能提升。
有关优化关键渲染路径性能的深入信息和建议，请参阅本文。
时间互动
互动时间是您的页面完全互动所需的时间。这意味着不仅内容是完全可见的，而且所有页面事件处理程序都已经为可见内容注册，并且页面在50毫秒内响应用户交互。
一些应用程序以牺牲交互性为代价来优化第一个内容和第一个有意义的油漆。这可能会把用户拒之门外，因为它为他们创造了次优的体验。这是相当混乱有一个完全可见的页面，和页面不响应用户交互，因为事件处理程序尚未附加。
要优化交互的时间，请推迟或删除在页面加载期间运行的所有不必要的JavaScript执行。交互时间的最关键度量是JavaScript启动时间和JavaScript有效负载大小。
运行时性能在Web
运行时性能由应用程序对用户交互的响应程度来定义。识别应用程序性能瓶颈的最佳方法是使用浏览器开发人员工具。我个人的偏好倾向于Chrome开发者工具。
使用dev工具提供的内存分析器也是很好的，以便识别应用程序中的内存泄漏，因为这些会导致应用程序的性能随着时间的推移而降低。当使用像Angular或React这样的SPA (单页应用程序) 框架时，这一点尤其重要，因为您的整个应用程序作为单个网页运行，并且不正确地释放资源将导致您的应用程序不仅性能更差，而且在使用一段时间后也会崩溃。一个很好的介绍内存分析和检测泄漏可以在这里找到。
web应用程序中的每个单独的组件以及它们之间的交互性定义了应用程序的运行时性能。要确保web应用程序具有良好的运行时性能，应考虑以下准则:
- 最小化DOM节点的数量和DOM节点树的深度 尽量减少DOM节点。建议总共有少于1500个DOM节点，并且DOM树深度小于32。
- 最小化附加到DOM element的事件处理程序的数量 尽量减少事件处理程序。例如，如果要对列表中相同类型的元素重复事件处理程序，则在列表元素上附加单个委托事件处理程序，而不是将单个事件处理程序直接附加到它们在列表中的目标元素。
- 在应用程序中正确调整图像大小 - 确保图像不大于它们放置在里面的容器。大图像使您的加载时间和运行时性能慢得多。
- 推迟屏幕外图像加载 - 确保不应该立即可见的图像具有延迟加载策略。
软性能在Web
软性能由应用程序的一般UX (用户体验) 定义。软性能无法衡量，但您可以对应用程序的核心组件进行可用性研究，以发现应用程序可用性的瓶颈。这些研究是由UX专家通过物理观察或软件创建和执行的，该软件记录了参与可用性研究的受试者的用户交互。Indigo.Design是一个很好的可用性研究工具，它允许您创建应用程序的模拟原型，然后允许您在其上定义和执行可用性研究。以下是此工具生成的报告的示例。
通常，要提高应用程序的软性能，您需要:
- 确保可立即访问核心功能 - 如果您希望大部分用户访问某个功能，则可以直接向您的用户呈现该功能，或者创建一个导航元素。核心功能应该可以在与您的页面的两个用户交互中访问。
- 核心导航元素在页面上很容易区分如果你有一个导航元素是你的 “行动号召” 或导航到一个核心功能，那么确保它不会与页面的其余部分混合，或者在页面加载时不会离开屏幕。使用较大的字体和对比色。
- 信息流是一致的 - 确保相关信息不分散在页面上。通常用户从左上角开始按对角线浏览信息。
- 使您的内容可访问 – a11y在web中是必须的。确保为应用程序运行辅助功能测试。Lighthouse Chrome扩展程序还会生成辅助功能报告。
示例是我们如何在Ignite UI for Angular的网格组件中实现数据过滤的可用性。有两种不同的过滤ui可以与组件一起使用，但是与任何一个的一般交互是这样的，即在与组件的两次交互中，用户获得过滤结果。在第一种模式中，在网格标题元素正下方的静态行中有一个始终可见的过滤器芯片。单击过滤器芯片将过滤器行转换为相应列的过滤输入，输入在焦点上，并且已经预先选择了过滤条件 (字符串列的 “包含”)。UI已准备好输入。当用户开始键入时，将根据他们键入的内容对列进行过滤:
如您所见，在与组件的两个用户交互中，用户可以使用筛选的结果。屏幕截图不明显的是，这个组件也是完全可访问的。也可以仅用键盘访问滤波器芯片元件，并且也可以仅使用键盘应用滤波。这些元素也是屏幕可读的。我将此组件作为示例，因为它足够复杂，可以与应用程序进行比较。
其他考虑因素
您应该意识到，所有三个性能维度都应该一起考虑。专注于一个可能会伤害另一个。一个例子是过多地关注运行时性能，这可能导致软性能方面的降级，反之亦然。我将再次用web页面上的网格组件来说明此示例。通常，网格组件旨在可视化大量的表格数据。为了满足web应用程序对加载时间和运行时性能的要求，它们需要虚拟化它们呈现的DOM元素，并且在用户在组件的容器上执行垂直和水平滚动时交换或重用DOM元素。让我们看看它在不同的现有网格组件中的外观:
请注意，这两个网格都具有良好的运行时滚动性能。然而，第一个具有明显的视觉撕裂，这是由为提高运行时性能而进行的去抖动滚动处理引起的。这意味着滚动事件和渲染之间存在延迟。结果是降低了软性能，有利于运行时性能。
结论
软件性能是一个非常广泛的主题，我在本文中所做的就是通过查看一般性能概念来了解它的表面。我的同事Brian Lagunas创建了一篇关于WPF性能提示的优秀文章 ，您可以查看。
接下来，我将深入研究Angular web应用程序的性能，在那里我将查看更多框架和技术特定的性能方面。
这篇文章是一个转帖。原始文章在媒体上。</p