PWA 与本机实践：如何在每个方面提供性能

对于大多数文章来说，“[PWA0 或本地”讨论在决策时结束。但对于那些建造者来说，这个决定只是一个开始。选择正确的平台并运行不佳会产生与选择错误平台相同的结果：用户放弃一个缓慢的产品。

我见过快速的 PWA 和非常慢的 PWA。我见过本机应用程序流畅而本机应用程序卡住。平台不保证性能；执行保证。每种方法都有自己的失败点、陷阱和护理实践。

本文适用于那些已经做出决定并且现在需要交付的人。我不会抽象地比较 [PWA1] 和本机，而是讨论如何在实践中保持每一种的性能，每一种容易陷入困境，以及如何做才能使速度到达用户并保持不变。

性能是用户的感受，而不是图表显示的

在任何技术之前，值得调整重要的事情。对于用户来说，性能并不是一个基准数字。这是应用程序响应的感觉。它可以快速看到有用的东西，触摸它并得到响应，而不是在屏幕冻结的情况下等待。

这种区别改变了我们的工作方式。优化用户没有注意到的内部指标是浪费。优化第一次有用交互的时间、响应的流畅性和避免崩溃才是保留的因素。

在 [PWA2] 和本地语言中，统治者都是感知。技术发生了变化，但目标是相同的：无论用户在哪里看，产品都能看起来很快。谁追求这个目标，而不是追求漂亮的数字，谁就能做得更好。

PWA 的致命弱点是网络的重量。当它在浏览器中运行时，您加载的所有内容（脚本、样式、库）都会影响打开时间。最常见的错误是累积依赖项，直到应用程序变慢，而没有人意识到这种情况何时发生。

第一个做法是保持应用程序的精简。仅加载第一个屏幕所需的内容并推迟其余部分。破解代码，以便用户不会立即下载他们稍后才会使用的内容。从初始负载减少的每千字节都显示为感知速度。

二是掌握Service Worker缓存。这就是使 PWA 在后续访问中立即打开并离线工作的原因。但配置不当的缓存会提供旧内容或阻止更新到达。在实践中，按资源类型定义策略，积极对待未更改的内容，验证更改的内容，并在每次交付时测试更新，以免将用户锁定在旧版本中。

第三是用真实数据和真实条件进行测量：连接速度慢，设备简陋。在开发者的机器上运行的东西可以在用户的手机上爬行。当测量进入传输流时，[PWA5] 的性能得以保持，而不是依赖打印。

Native 具有原始的性能优势，但这会产生一种错误的安全感。这里的陷阱不是加载重量，而是对设备资源的粗心使用：内存、电池、主线程上的工作。

第一个做法是保护界面的流动性。在本机中，在绘制屏幕的线程中完成的任何繁重操作都会导致明显的崩溃。繁重的工作，处理，数据访问，网络，需要退出该线程以便界面继续响应。滚动和点击崩溃几乎总是来自这里。

第二是照顾好内存和资源。泄漏内存或占用资源的本机应用程序会随着使用而降级，打开时间越长，速度就越慢。在实践中，这需要严格控制释放未使用的内容并在长时间会话中测试应用程序，而不仅仅是快速启动。

三是尊重设备。短期测试中不会出现电池和数据消耗过多的情况，但在实际使用中却会破坏应用程序的声誉并导致卸载。随着时间的推移，衡量应用程序在不同设备上的行为，是将演示中看起来不错的本机与维持用户生活质量的本机区分开来的。

这两种方法都有一个共同的陷阱，首先是文化，然后是技术：将性能留到最后。

将速度视为最后调整的团队，在产品准备就绪后，会发现性能不佳通常在于架构，而不是细节。如果不考虑速度，您就无法“稍后优化”所构建的内容。最后一刻的收益很小；结构性问题很大。

避免这种情况的做法是将性能作为一个连续的标准。尽早测量，建立可接受的负载和响应上限，并将性能回归视为缺陷，而不是可选的改进。在 [PWA6] 和本机中，保留的速度是从一开始就照顾到的速度，一个接一个的交付。

另一个共同的错误是没有在真实条件下进行测量。开发者设备功能强大，网络良好。不是用户。仅存在于构建者环境中的性能是一种幻想。

适用于 [PWA7] 和原生的教训是相同的：性能不是平台的效果，而是仔细和持续执行的结果。即使是最好的技术选择，如果不遵守纪律地执行，也会产生缓慢的产品。适度的选择，精心执行，可以带来卓越的体验。

在 [PWA8] 中，该学科重点关注权重和缓存。在本机中，在资源使用和流动性方面。在这两种情况下，敌人都是自满：假设它很快，因为它对你来说很快，但很晚才发现它对用户来说并不快。

那些为其他人构建的人需要衡量他们对产品的体验，而不是产品在受控开发环境中的表现。这种在最差的设备、最差的连接上进行测试的谦逊态度，正是人们使用的产品与他们卸载的产品的区别所在。

[PWA9] 和本地人之间的决定很重要。但执行也同样重要，这是大多数产品成败的关键。表演是日常工作，没有平台可以替代这项工作。

如果您的团队正在交付产品并希望构建一种能够在日常生活中生存的绩效文化，那么博客上还有其他关于 PWA、本机和产品工程的文本。如果您想讨论您案例中的瓶颈，只需致电即可。