收藏文章 楼主

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

版块:网站建设   类型:普通   作者:小羊羔links   查看:727   回复:0   获赞:0   时间:2022-02-13 13:42:28

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

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

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

所以,今天我想通过分析许多不同维度的数据来剖析这些变化,以及我们作为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方面的表现如何。

小羊羔锚文本外链网站长https://seo-links.cn 
回复列表
默认   热门   正序   倒序

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

Powered by 小羊羔外链网 8.3.7

©2015 - 2024 小羊羔外链网

免费发软文外链 鄂ICP备16014738号-6

您的IP:3.81.165.210,2024-03-29 17:55:42,Processed in 0.05052 second(s).

支持原创软件,抵制盗版,共创美好明天!
头像

用户名:

粉丝数:

签名:

资料 关注 好友 消息