🎮 👰🏽 🚙 Web应用程序的性能是什么？ 🧔🏿 ❇️ 👡

有些应用程序加载很快，而有些则加载很慢，但是由于这种情况呢？页面加载速度是衡量应用程序性能的唯一方法吗？

在一篇文章中很难回答这些问题以及许多其他问题。因此，我整理了链接目录，并将其分为几类。但是对于初学者来说，关于什么是性能以及何时应该考虑它的一些理论。

当出现性能问题时

您可以开发Web应用程序很多年，而应用程序性能几乎没有问题。

但是，很可能在以下情况下出现问题：

大数据出现（您需要在地图上绘制大列表或成千上万的点）。
应用程序变大（数百个用户方案，数十个屏幕，表单等）。
来自不同地区的大量客户（例如，每天来自世界各地的300,000多个客户）。
市场竞争激烈（可以肯定的是，如果运行速度更快，用户将更喜欢竞争对手的应用程序）。
需要移动版本（移动设备上的浏览器仍会遇到性能问题）。

什么表现包括

在全球范围内，Web应用程序性能问题可分为两类：数据传输和运行时。

数据传输意味着下载应用程序正常运行所需的任何资源。
在运行时下-应用程序操作，渲染和用户输入处理。

这些类别中的每一个类别都包含许多我们通常不会想到的细微差别，但它们区分了高质量的应用程序和劣质的应用程序。

以下是最受欢迎的Web应用程序性能指标（所有指标均应最低）：

页面加载

TTFB-接收第一个字节的时间（到第一个字节的时间）。
FCP-首次呈现内容的时间（First Contentful Paint）。
FMP是第一个有意义的绘画时期。
TTI-页面可以响应用户输入的时间（互动时间）。

运行

用户输入响应时间。
接口重绘时间。

尽管TTFB和TTI都是页面加载性能的指标，但是与运行时相关的问题也会影响它们。

如何搜索和分析性能问题

开发人员库中的主要工具包是Chrome DevTools或类似的工具，例如Firebug / Firefox开发人员工具。
可以撰写有关它们的单独文章，但我们将自己限制在最重要的地方。

网络 -允许您详细分析页面上加载了哪些资源，从哪些资源以何种速度加载等等。该工具通常用于手动分析页面加载速度。

性能 -在此选项卡中，您可以记录代码执行调用，输入/输出操作以及其他内容。另外，可以通过节流网络和CPU的仿真来完成记录。例如，检查弱设备上的应用程序。

灯塔 -Chrome DevTools内置的工具，可启动页面加载，记录指标，对其进行分析，甚至提供提高性能的建议。

如何衡量/监控绩效

监视Web应用程序性能的工具可以分为两类：进行综合测量的工具和记录来自实际用户的性能数据的工具。

综合监视工具包括Lighthouse和Webpagetest。
为了监测实际用户（RUM -真实用户监控）mPulse和Sematext是合适的。

此外，有些工具（例如Webpack-bundle-analyzer）无法分配给这两个类别。但是在他们的帮助下，您可以测量一些影响性能的参数，例如捆绑包的大小。

数据传输

TCP连接，DNS查找 -即使对服务器的连接配置正确，也可以加快页面加载速度。特别是，如果您使用DNS预取甚至IP地址而不是域名。

TTFB（到第一个字节的时间）。获取第一个字节的时间是一个重要的指标。为了加快速度，您应该在发布index.html之前尝试在服务器上实现尽可能少的逻辑。

HTTP1 vs HTTP2 - HTTP2通过多路复用或压缩报头可以大大加快页面加载速度。此外，新的（相对）协议打开了许多功能，例如服务器推送。

域分片。如果您需要为API请求发送大量HTTP标头，而不是为静态请求发送HTTP标头，则最好将它们分为不同的域。

CDN（内容交付网络）将帮助加快地理上分散的客户端的加载。

资源优先级划分（预加载，预取，预连接）是由于正确的资源加载策略而导致的页面加载加速。浏览器使您可以为不同类型的资源设置优先级，并提前下载对于首次渲染重要的内容。

静态压缩：GZIP和Brotli。 Brotli是一种压缩算法，可以减少静态权重，从而提高下载速度。这是我同事的一个很好的解决方案。

Webp与Png和Jpg。Webp是Png的绝佳替代品。除了图像权重较低之外，Webp的质量也不差。现在，这种格式支持大约78％的浏览器。但是，即使您需要100％的支持，也可以使用picture标签在Png上实现后备。

运行

任务，微任务。通过正确划分代码执行的优先级，您可以摆脱烦恼，并加快对用户输入的响应。

requestIdleCallback是一个有用的函数，允许您在空闲时间在帧结束时（帧/刻度）或用户不活动时执行代码。这将有助于摆脱所有相同的滞后和“冻结”。

requestAnimationFrame允许您适当地计划动画并最大程度地每秒渲染60帧。

ES2015和ES5。 ES2015提供了比ES5更高效的许多功能。

Dom操作。使用DOM进行操作非常昂贵，您需要仔细且有意义地执行它们。例如，如果可以通过一次调用完成，请勿循环调用querySelector（）。

渲染阻塞资源。加载一些资源可能会阻止渲染。为避免这种情况，您需要使用属性defer，async，preload。

指针事件可达到60 FPS ：没有什么是很好的技巧，通过滚动页面可以达到60 FPS。它的工作原理非常简单：在滚动过程中，所有鼠标事件处理程序均被禁用。

被动事件监听器-一种使页面在触摸屏上平滑滚动的方法。简而言之，浏览器对触摸事件的侦听器的流程处理不完善。如果在创建事件处理程序时设置了被动参数，浏览器将清楚地理解该处理程序不会取消滚动和渲染，而无需等待其完成。

虚拟滚动是一种聪明的方式，它不呈现大列表，而是在滚动时生成大列表。使您消耗更少的内存并方便滚动列表。

避免使用大型复杂布局和布局限制。布局/重排是一项昂贵的操作，需要对渲染参数进行许多重新计算。为了避免频繁调用它们，您需要正确构建布局并操作DOM。

是什么促使布局/回流 -备忘单，您可以在其中找到可导致布局/重排的功能和参数的列表。

部件

摇树 -从捆绑中删除未使用的代码，并加快页面加载速度。

代码拆分 -将代码划分为多个块，您可以优化首次加载并打开“延迟”下载部分代码的功能。

混淆可以减小包的大小，甚至可以稍微掩盖您的代码。

建筑

服务器端渲染可能是在首次启动时立即进行SPA渲染的最著名方法。这是某些搜索引擎（不仅是）的一项重要要求。

延迟加载图像和视频（+ native）-一种本地解决方案，由于图像和视频的“延迟”加载，旨在改善首次渲染的指标。

延迟加载模块/路由是在所有流行的框架和库中都可以找到的工具。允许您“延迟”加载应用程序功能。

使用Service Worker缓存文件使您可以在浏览器中缓存文件，而不必每次都从服务器下载文件。也许是浏览器应用程序中离线模式的唯一方法。

HTTP缓存 -使用某些HTTP标头可以大大提高页面加载速度并减少服务器负载。

Web应用程序的性能是什么？