2022WEB开发有了新的性能方面基准

2022年网页开发的基准将会是:性能方面的低版本Android设备，标准方面的Safari(从两年前迄今为止的版本)，以及网络方面的4G。一般来说，网络并没有很好地满足这些需求，特别是在性能方面，过度依赖JavaScript等因素阻碍了我们网站的性能。

你好!我是Alan Dávalos, LINE的前端工程师。你可能认为这篇文章的只是标题党，但请耐心听我讲一下，我保证这是值得的。主要原因是，在2021年至2022年之间，网络发生了一些重大变化，这些变化影响了我们应对网络发展的整体方式。

所以，今天我想通过分析许多不同维度的数据来剖析这些变化，以及我们作为web开发者如何适应它们。

2021年最大的变化是ie浏览器的"淘汰"

虽然2021年发生了很多变化，但没有一个比IE正式"退役"更大的变化。微软在2021年5月宣布了这一消息，到8月，包括微软365在内的许多微软产品都正式放弃了对IE的支持。IE的正式退役日期定于2022年6月，但还有其他几个原因可以让我们认为IE现在已经完全"淘汰"了。

一些大型网站放弃了对IE的支持

在微软宣布这一消息后，许多其他项目开始放弃对IE的支持。这其中包括很多包含海量用户的大型网站:

例如，谷歌搜索在2021年10月放弃了对IE的支持。

此外，WordPress还宣布，他们会在2021年7月发布的WordPress 5.8版本中放弃对IE的支持。

IE目前的市场份额

IE的市场份额在2021年大幅下降

2021年全球浏览器市场份额分布:

在全球范围内，IE目前的市场份额不到0.5%。即使是在IE市场份额高于其他国家的日本，IE的市场份额也接近2%，并且有下降的趋势。

web开发的新基准

到目前为止，由于IE的市场份额，我们一直支持它。但是现在，基本上没有什么好的理由继续支持IE。然而，这带来了一个新问题，IE是许多工具的支持基线。IE的开发已经停止了很长一段时间，所以它所支持的web标准与现代浏览器所支持的web标准非常不同。

现在IE消失了，基线变得模糊了。因此，我将通过分析我们用户设备的当前状态来定义一个新的基线。

用户的设备和浏览器

浏览器和操作系统的市场份额

让我们以不同的格式来看看浏览器市场份额图表:

这里我想强调几种趋势,换言之，我们至少需要支持以下3个浏览器引擎:

• Chrome, Edge -- 三星网络浏览器和Opera的基础。

• Gecko -- Firefox的基础。

• WebKit -- Safari的基础。

浏览器与网络标准的一致性

在不同的浏览器中，最影响web开发的部分是它们实现了不同的web标准。如上所述，我们应该关注3种浏览器引擎。那么，让我们来看看这些不同的浏览器是如何实现网络标准的。检查这些差异的最简单的方法是使用下面的Web平台测试数据。

Web平台仅一个浏览器不通过测试(其余浏览器测试通过):

注:上图来源为:"Browser Specific Failures"-摘自2021年12月4日

此图表显示了仅在一个浏览器中失败的Web平台测试的数量。换句话说，其他两个浏览器已经实现了多少特性。

很明显我们可以看到，只有Safari还没有实现的网络标准的数量比Firefox和Chrome多很多倍。准确地说，是火狐的2.4倍，Chrome的4.7倍。

此外，我们还应该考虑到Safari和iOS之间的密切关系。具体来说，有两点:

• 其他移动浏览器的更新独立于操作系统，而Safari只有在iOS更新时才会更新。新版本的iOS不再支持的iOS设备不能更新到最新版本的Safari。

• iOS中的所有浏览器都是基于Webkit的:iOS中有Chrome和Firefox版本，但它们使用的引擎与iOS中的Safari相同。这是因为苹果有一条规定，即所有iOS浏览器都必须使用Webkit。iOS和Safari之间的这种关系也意味着我们必须检查iOS版本的市场份额随着每一个新的主要iOS版本的发布而发生的变化。

iOS主要版本的季度市场份额如下:

为了更深入地了解每个iOS版本的市场份额是如何变化的，让我们来看看iOS 12在过去2年的市场份额变化:

• 从2019年第一季度到第三季度，iOS 12的份额逐渐增长，但随着iPhone 11和iOS 13在第三季度的发布，这一数字直线下降。

• 从那以后，iOS 12的市场份额在接下来的一年里下降到了20%以下。

• 然后，在2020年第三季度iPhone 12和iOS 14发布后，iOS 12的份额急剧下降，到2021年第二季度，它的份额微不足道。

• 在iOS 12上发生的同样的情况也出现在后来的版本13和14上。

• 综上所述，我们可以肯定的是，在过去2年里，iOS市场份额将持续占据90%以上。换句话说，我们只需要支持过去两年发布的Safari版本。

移动端网络状况分析

到目前为止，我们主要谈论的是设备和浏览器，但现在让我们看看一个对用户体验有很大影响的因素，而web开发者却没有影响:网络连接。

当连接到Wi-Fi网络时，连接基本上是稳定的，但移动网络就不是这样了。让我们来看看移动网络的现状。

3G 和 4G

当使用诸如Lighthouse之类的测试工具时，网络可以被用来模拟3G，但是最近全球的移动网络都发生了变化。根据Opensignal 2020年5月的一份报告，全球4G的平均可用性为86.8%。因此，我们可以放心地假设，全球大多数用户都可以接入4G网络。

5G

然而，5G网络仍远未成为现实。根据Opensignal 2021年11月的一份报告，全球5G可用性最高的国家只有韩国的29.1%。

新的基准线是什么?

考虑到上述所有数据，web开发的新基线将是:

• Safari是网络标准的基准:我们开发的站点必须在至少2年前的Safari版本中运行。

• 低端Android设备是性能的基准:低端Android设备在过去几年中几乎没有进步，所以我们必须确保我们的站点具有不错的性能。

• 4G是网络的基准:近年来，全球范围内的移动网络已经变得更快、更稳定。

我们在多大程度上满足了用户需求?

我们已经成功地定义了构成基线的3个部分，但这还不够。我们需要看看我们在多大程度上满足了用户的需求。然而，深入的分析会为不同的项目带来不同的结果。

考虑到这一点，我将进一步分析整个网络。幸运的是，我们有一个很好的数据来源，2021年网络年鉴。这是由HTTP Archive创建的年度报告。在这份报告中，他们分析了超过820万个网站，创建了24个章节。在本文中，我们将从这些章节中选取一些数据，看看当前的网络与上述定义的基线匹配得如何。

2021年网站的中位数

2021年的网站体积的中位数为1923 KB。如果我们按文件类型划分大小，我们可以看到图像和JavaScript占据了大部分的比例。

按文件类型划分的网站size中位数:

通过上面这些数据，我们很清晰地看到在图像处理(image资源)占据了最大的比例，但我们更应该特别注意JS的大小。因为处理图像不像处理JS那么复杂。图像基本上可以被渲染，只要他们被下载，但JS需要被解析和执行。所以，一般来说，JS的处理会占用更多的资源。

此外，根据Alex Russell上面提到的文章，当在4G网络上测试一个低级Android设备时，一个网站要保持良好的性能，需要100kb的HTML和CSS以及350kb的JS。换句话说，当前的中位数站点在HTML和CSS方面满足了性能预算，但在JS方面却远远超过了预算。

HTML和CSS的使用情况分析

网页年鉴中有一章同时介绍了HTML和CSS，其中包含了大量的信息。我想强调几个关键的数据点，我认为它们可以用来举例说明我们目前是如何使用HTML和CSS的。

HTML

让我们先来谈谈HTML，目前有112个未弃用的HTML元素。但是页面中使用的HTML元素的中位数是31。显然，没有必要在所有页面中使用每个元素，但是这31个元素包括诸如html标签、body标签和script标签。这意味着我们用来显示内容的元素数量实际上更少了。

在最常用的HTML元素列表中,div标签第一名，span 标签第三名,p标签第七名。此外，页面有98.9%的概率是div标签,div肯定是最常用来显示内容的元素。

相比之下，main元素被使用的概率只有27.9%。这之所以重要，是因为，相比于aside以及header等其他元素，main元素是没有应用特殊样式但具有语义化的元素之一。换句话说，main标签的使用可以作为一个指示器，指示有多少页面主动使用语义化元素。这就是27.9%这个数字如此重要的原因。

CSS

对于CSS的使用，我认为有一个数据点可以很好地总结CSS的使用，这就是现代布局特性的使用:Flex和Grid的使用率。

Flex和Grid的使用率:

正如你所看到的，虽然71%的页面使用了Flex，但只有8%的页面使用了Grid。造成这种差异的最大原因在于对IE的支持。IE只支持旧的Grid规范，所以想要支持IE的页面必须考虑到这一点。CSS特性不能像JS特性那样容易填充。这可能是许多开发人员放弃使用Grid的主要原因。然而，现在我们可以减少对IE的支持，许多例如Grid之类的现代CSS特性就可以考虑使用。

性能

目前最常用的性能测量方法是通过测量核心指标Web Vitals (CWV)。采用这个测量方法的原因是CWV被用作谷歌搜索的排名因素可能是最大的一个。让我们看看网络在CWV方面的表现如何。