这是前端的失落十年。我们开发者现在能做什么？

在前端领域，我们正经历着一个“失落的十年”，因为尽管现代工具和框架被广泛推广和使用，但实际的用户体验，特别是在移动设备和边缘用户方面，却令人担忧。目前，只有38%的移动网站通过了核心网络生命周期指标（Core Web Vitals），这表明大多数网站未能提供令人满意的性能。视频中指出，“流行”工具的使用反而导致了更差的结果，尤其是当衡量用户真实体验的指标变得更加诚实时。这意味着许多流行的开发工具和框架优先考虑开发者体验而非最终用户体验，并且没有考虑到全球设备和网络环境的实际限制。为了应对这一挑战，开发者需要重新聚焦于工程核心原则，即理解并适应硬件、网络和浏览器环境的限制。这意味着在开发过程中，我们需要回归到以用户为中心的设计，充分利用平台原生能力，减少对JavaScript的过度依赖，并避免使用那些为过去桌面网络环境设计的工具和抽象。

前端的“失落十年”

在前端开发领域，尽管有许多新的工具和框架涌现并被广泛营销和采用，但我们正面临一个“失落的十年”。这主要体现在最终用户体验的恶化上，尤其是在移动设备和边缘用户群体中。当前，移动网站的核心网络生命周期指标（Core Web Vitals）通过率仅为38%，这远低于任何可接受的标准。这意味着大多数网站都未能提供流畅、快速的用户体验，这与其所宣称的进步背道而驰。更令人担忧的是，当衡量标准变得更加诚实，真正反映用户实际体验时，那些依赖流行工具和框架的网站表现反而更差。

许多最受资助、使用最广泛和营销最广泛的工具，恰恰让他们的用户陷入了困境。

这表明，流行并不等同于高效或高质量，许多工具可能只在特定的、高端的开发环境中表现良好，而忽略了全球用户所面临的真实设备和网络限制。因此，前端开发者需要重新审视他们的开发方法，将重点从工具的流行度转移到实际的用户价值和工程质量上。

工程原则与限制因素

成功的平台是为了让用户花更多时间使用在该平台上构建的应用程序。对于前端工程师而言，这意味着我们需要像其他工程领域一样，理解并构建解决方案以应对实际存在的限制。这些限制包括设备端的CPU、图形性能和存储性能。网络上的资源是共享的，并且由于不同浏览器运行时、扩展程序以及浏览器对内容的处理方式，网页开发人员所发送的并非“指令”，而是“期望”，或者说“影响力导向的编程”。因此，我们很难精确预测内容如何在用户的设备上呈现。此外，Web的目标用户群体极其多样化，不仅包括使用最新高端设备的用户，更包括那些使用老旧、低价设备的用户。连接网络的类型也高度多样化，从快速的宽带到缓慢的3G甚至更差的网络。最后，用户使用的不同浏览器决定了我们可以编程的软件生态系统和可用的API。理解这些限制至关重要，因为它们直接影响我们选择的材料、性能特性以及预算。

失败的证明：核心网络生命周期指标

核心网络生命周期指标（Core Web Vitals）清晰地揭示了前端开发的失败模式。这些指标来自Google的Chrome用户体验报告，包含了Interaction to Next Paint (INP)、Largest Contentful Paint (LCP)和Cumulative Layout Shift (CLS)。令人震惊的是，只有38%的移动网站通过了这些指标，这在任何课程中都无法算作及格。即使是二级页面，即那些主要内容可能已经被缓存的页面，也只有一半能够通过移动设备上的测试。

Web Almanac的数据进一步揭示了问题所在：许多投入大量资金、广泛使用和积极营销的工具，却让用户陷入了困境。当Core Web Vitals从“首次交互延迟”转向更诚实的“INP”时，那些采用流行工具的网站反而表现最差。这意味着这些工具可能在旧的指标上表现良好，但当指标更准确地反映用户真实体验时，它们的不足就暴露无遗。

当指标变得更加诚实，并试图更准确地反映用户整天所看到的内容时，那些投资于这些工具的人发现自己比那些投资于更简单技术栈的人遇到了更多麻烦。

这表明，工具的流行度与其在真实世界中的效果之间存在巨大的脱节。因此，开发者需要重新审视他们的工具选择，并优先考虑那些能够为终端用户提供卓越体验的解决方案。

Web在平台竞争中落败

当前，Web作为平台正在与其他平台竞争中大幅落后。在美国，Web在设备使用时间中所占的比例很低，并且还在持续下降。虽然Web的绝对使用量可能保持稳定，但设备的总使用时间却在增加，这意味着用户正在将更多的时间花在其他应用上，而非Web应用。这种趋势对Web开发者而言应该是警示，它表明Web生态系统正面临被其他平台取代的风险。这种情况就像是在目睹自己的生态系统被其他事物所超越，这无疑是“失败”的体现。

为了扭转这种局面，Web开发者需要重新聚焦于为边缘用户提供优质体验。这意味着不能仅仅针对最新的MacBook Pro或高端iPhone进行开发，因为这些设备的性能远超大多数用户的设备。真正的目标设备是像Surface SE或HP Stream 14这样的低端设备。例如，$250的Surface SE配备了N4020赛扬芯片，4GB内存和非常慢的eMMC存储。而亚马逊畅销的HP Stream 14也使用了类似的芯片，同样存在内存小、缓存少和eMMC慢的问题。这些设备上的CPU核心通常不会全速运行，以便延长电池续航。大多数计算机是手机，而且手机上的浏览器大多是近三年内发布的，不存在像桌面端那样的老旧浏览器（如IE）问题。然而，即便是名义上拥有八核的手机，例如配备Cortex A73和A53核心的设备，其核心也大部分时间处于关闭状态，Web应用通常只能使用一到两个核心。

设备与网络：现实的经济影响

在理解 Web 开发的实际限制时，设备的经济性是一个核心因素。全球范围内，全新解锁手机的平均售价在过去十年间一直徘徊在$270到$350之间。这意味着用户所使用的中位数设备价格并未像高端手机那样快速上涨。对于笔记本电脑这一主导的PC形式，平均售价也维持在$650左右。更重要的是，市场上大多数设备都是旧的。移动设备的平均使用寿命意味着，用户目前使用的中位数手机可能是在两年前以$350的价格购买的，而中位数笔记本电脑则可能是在五年前以$650的价格购买的。微软Edge浏览器的遥测数据显示，大约三分之一的用户设备仍使用机械硬盘，或内存不足4GB，或CPU核心数少于4个，并且这一低端设备群体的比例在过去两年中仅下降了7%。

此外，网络连接状况也参差不齐。在“增长市场”，即那些边际用户众多的地区，网络条件仍然相当恶劣，即便正在快速改善，也只是从3G到慢速4G的基线提升。这意味着开发者不能假设所有用户都拥有快速稳定的网络连接。

简而言之，Web开发者需要认识到，他们所开发的应用将运行在大量老旧、低价的设备上，其中大部分是手机，且并非运行macOS或iOS。因此，构建Web应用时必须针对这些现实条件进行优化，否则将无法有效地为广大用户提供服务。

设备类型	平均售价（美元）	典型配置	生命周期现实
手机	$270 - $350	两年中位数手机	大多数是旧的低端安卓设备
笔记本电脑	$650	五年中位数笔记本	大量老旧设备，如4GB内存，机械硬盘

摩尔定律的终结与JavaScript的局限

尽管晶体管的数量仍在增加，但登纳德缩放定律（Dennard scaling）的终结意味着，我们无法同时点亮更多晶体管，也无法让它们运行得更快。大约在十多年前，千兆赫（gigahertz）的增长就停滞了，这意味着芯片尺寸缩小不再能带来程序运行速度的可靠提升。整个JavaScript生态系统几乎都是建立在这一假设之上，即单线程程序每年都会自动变快。然而，这种情况已经结束了。

现在，我们面临的是更多的“暗核心（dark cores）”，它们为了节省电量而处于低功耗状态，大部分时间不被点亮。因此，尽管手机的CPU核心数量可能增加了，但实际的CPU峰值性能却可能从2017年左右开始呈下降趋势，因为电池续航成为主要限制因素。这意味着你的JavaScript代码运行在主线程上，其性能严重依赖于设备的单核性能。例如，$350的三星Galaxy A25手机，其速度仅为iPhone的三分之一。高端手机如iPhone之所以速度快，是因为它们拥有大量的缓存，这避免了因等待主内存而导致的停滞。但在大多数低端手机上，几乎没有缓存，这使得JavaScript代码更容易因分支预测失败或V8引擎的去优化而陷入停滞。

我想让你们在这次 JavaScript 会议上理解的是，从一个在 TC39 工作了十年的人的角度来看，JavaScript 过去是、现在是、将来也永远是在网络上做任何事情最慢的方式。

这意味着，每一次你选择用JavaScript来交付用户体验，都是一个冒险的决定。让JavaScript程序快速运行，需要像优化Python程序一样，尽可能地将计算繁重的任务卸载到C++等底层库中，并在JavaScript本身花费尽可能少的时间。如果在用户交互的关键路径上运行大量JavaScript代码，用户体验将不堪设想。

重塑前端开发：质量与用户体验至上

为了在当前前端面临的困境中取得成功，开发者必须改变思维模式，将重心放在质量和边缘用户体验上。这不仅仅是为了用户，也是为了业务的成功，因为市场总是在边缘地带创造利润。这意味着开发者需要建立自己的心智模型和测试环境，以理解如何为这些用户提供良好的体验，提供与业务或企业战略相符的最佳质量产品。

要实现这一点，关键在于“发送更少的代码，运行更少的代码，并让底层系统完成大部分工作”。因为JavaScript天然是Web上执行任何操作最慢的方式。如果你的整个技术栈都只依赖JavaScript，那么你就默认无法触及边缘用户，除非你具备极高的纪律性。例如，微软Edge浏览器在内部进行了一次名为“Web UI 2”的转型。他们将之前基于React和各种抽象构建的设置页面，完全重建为基于平台原生能力。这次重建使得页面速度提升了约40%。

最重要的事情不是工具，而是焦点。我们决定关注边缘用户的质量，这塑造了每一个决策。

这表明，工具本身并非最重要的，重要的是开发者对用户体验的关注和决策。我们不能仅仅接受别人对工具和技术栈的看法，而是要通过实际测试来验证其是否真正为用户带来了好的结果。这种以质量和用户为中心的工程方法，才是当前前端“失落十年”的解药。

Takeaways

理解真实的用户环境: 大多数用户使用的设备是老旧、低价的手机和笔记本电脑，而非高端旗舰产品。网络连接也常常不理想。
重新聚焦工程质量: Web应用程序的成功与否，应以最终用户体验为衡量标准，而非工具的受欢迎程度或开发者的偏好。
JavaScript的性能限制: JavaScript在Web上总是最慢的执行方式。优化性能需要将更多工作卸载给浏览器底层（C++）和平台原生能力。
避免过度依赖抽象和旧工具: 许多流行的框架和工具是为过去的桌面环境设计的，将其应用于移动和低端设备只会导致糟糕的用户体验。
测试真实设备: 开发者应在实际的边缘设备上进行测试，而不仅仅是模拟器或高端设备，以了解用户实际遇到的问题。
优化和精简: 减少代码量、优化执行路径、充分利用浏览器内置功能可以显著提升性能。