RadeVentListener：客户端框架性能的故事

React的受欢迎程度并非没有批评者。该框架的相当大的尺寸（约120 kib缩小）显着影响启动时间，尤其是仅依靠客户端渲染时。即使使用客户端水合的服务器端渲染也仍然是性能密集的。尽管React在复杂的州管理中表现出色，但其资源需求通常超过更简单的应用程序中的好处。这可以有效地排除使用功能较低的硬件的用户。

尽管我保留了React的性能开销，但我还是感谢其组件化模型和JSX语法。服务器端渲染（或使用preact，我首选的替代方案）仍然是宝贵的资产。但是，确定适当的客户端用法仍然是一个挑战。本文详细介绍了我有关优化React性能的发现，以获得更好的用户体验。

上下文：RSS提要应用程序

我的rss feed应用程序bylines.fyi在服务器和客户端都使用JavaScript。虽然我并不固有地不喜欢客户端框架，但我的经验突出了两个反复出现的问题：

1. 框架可以掩盖基础的网络平台，从而阻碍对它们何时真正有益的深刻理解。
2. 框架并不总是保证最佳用户体验。

蒂姆·卡德克（Tim Kadlec）对Web框架性能的Httparchive研究加剧了这些问题，揭示了React的表现不佳。我的目标是在减轻其客户端缺陷的同时利用React的服务器端优势。

实验：移动导航切换

我的RSS应用需要客户端的JavaScript来进行简单的移动导航切换，这是“简单状态”的经典示例。我经常看到反应组件过度用于此类简单任务，从而导致不必要的性能开销。该实验虽然看似琐碎，但它是了解框架选择如何扩展的关键基准。重要的是要注意，大多数开发人员不仅会依靠这种次要功能的反应，但是结果说明了对运行时性能的架构影响。

测试条件

该实验比较了四个设备上的三个移动导航实现：

1. 状态反应组件：服务器渲染和客户端熔融。
2. 状态的预先反应组件：服务器渲染和客户端水合。
3. 无状态的提前部分：服务器渲染，未水合；使用标准事件听众。

设备包括：

1. 诺基亚2 Android电话（Chrome 83）
2. 华硕X550CC笔记本电脑（Windows 10，Chrome 83）
3. 第一代iPhone SE（Safari 13）
4. 第二代iPhone SE（Safari 13）

指标

为每个实施和设备测量了以下指标：

1. 启动时间：包括框架加载和水合（react/preaxct），或者只是事件侦听器代码（EventListener）。
2. 水合时间：启动时间的子集（仅反应/预先反应）。
3. 移动导航开放时间：在事件处理中测量框架开销。

方法论

测试涉及远程调试和分析，每个场景和设备的十个迭代记录了每个度量的CPU时间。网络性能不是一个因素。

结果

由于数据的复杂性，结果以表格格式显示，显示最小，最大，中值和平均CPU时间。 （详细的表格在随附的电子表格中可用）。关键发现包括：

• React的高创业和水合成本：在低端诺基亚2上尤其明显。
• PREACT的提高性能：比React的速度要快得多，但在诺基亚2上仍超出了理想的框架预算。
• 卓越的事件听众的性能：始终比React和Exct都要快，尤其是对于简单的互动。

讨论：浅呼叫堆栈

性能差异源于框架加载和水合的开销。尽管某些性能权衡是不可避免的，但对于开发人员的便利性而言，余额通常会倾向于开发人员的体验，而用户则以牺牲用户为代价。呼叫堆栈的React和PreACT Hydration突出了重大处理需求，尤其是对于简单的任务。使用本地事件侦听器为简单的状态管理提供了一种更有效的方法。

结论和建议

这种分析不是作为反应批评的，而是鼓励批判性评估框架选择及其性能的影响。几种策略可以减轻绩效问题：

1. 在可能的情况下，对无状态组件的重构状态组件。
2. 避免客户端的JavaScript和无状态组件的水合。
3. 使用独立于框架的事件听众进行简单的交互。
4. 懒惰的水合物组件使用相交观察者或requestIdleCallback 。
5. 将预先反应视为反应的更快替代方法。
6. 使用navigator.deviceMemory适应低内存设备的用户体验。

优先考虑各种设备的性能测试，以确保具有不同硬件功能的用户包容性。目标应该是每个人的快速访问的网络体验。

特别感谢埃里克·贝利（Eric Bailey）的编辑反馈和CSS-Tricks员工发表本文。

以上是RadeVentListener：客户端框架性能的故事的详细内容。更多信息请关注PHP中文网其他相关文章！