上周分享了《2021年 CSS 使用趋势》。今天来看看2021年JavaScript在不同方面的使用趋势~
测试依据：
本文所有指标均来自 HTTP Archive 数据集。HTTP Archive 是一个社区运行的项目，自 2010 年以来一直在跟踪网络的构建方式。在幕后使用 WebPageTest 和 Lighthouse，每月测试大约 820 万个网站的元数据，并将其包含在公共 BigQuery 数据库中进行分析。
测试网站：820万个；数据处理：39.5TB。
一、加载了多少JavaScript？
下面是每个页面加载的 JavaScript 脚本大小分布情况：
可以看到，第50百分位（中值）时，每个移动页面会加载427kb的JavaScript脚本，而每个桌面页面会加载463kb的JavaScript脚本。
下面是每个移动页面上未使用的JavaScript脚本的大小分布情况：
下面是每个移动页面上未使用与总共的JavaScript脚本大小的分布情况：
最终，总加载的 JavaScript 中未使用的占到了36.2%。可以使用Lighthouse来检查网页中未使用的JavaScript，并选择性删除未使用的代码，以减少浪费的JavaScript所占的百分比。
二、有多少JavaScript请求？
页面上出发的请求可能是导致页面加载缓慢的原因之一。下面是每个页面的JavaScript请求数分布情况：
下面是2020年和2021年每个移动端页面中JavaScript请求数的分布情况：
可以看到，与去年相比，2021年请求的JavaScript资源数量略有增加，加载的JavaScript资源中位数为桌面页面20个，移动页面19个。
三、JavaScript 是如何请求的？
JavaScript可以通过多种行时加载到页面中，并且它的请求方式会影响页面的性能。
1. async 和 defer
JavaScript的加载可能会阻塞渲染，这是导致性能问题的一个因素。异步或延迟加载 JavaScript 在某些方面会有助于改善这种体验。使用async和defer属性都可以实现异步加载脚本。下面是async和defer在页面中使用的占比：
2. preload 和 prefetch
在呈现页面时，浏览器会下载指定的资源。当使用preload属性时，会告诉浏览器该脚本的下载具有更高的优先级。当使用prefetch时，浏览器就会空闲时下载该脚本。下面是在JavaScript脚本上使用这两个属性的比例：
下面是每个页面中JavaScript脚本中preload属性的使用情况：
下面是每个页面中JavaScript脚本中prefetch属性的使用情况：
3. first-part 和 third-part
下面是每个移动页面上第一方和第三方JavaScript请求数：
下面是每个桌面页面上第一方和第三方JavaScript请求数：
可以看到，请求的第三方JavaScript脚本数总会比第一方多一点。这种效果可能是由于第三方脚本为网络提供了实用的交互功能。
四、JavaScript是如何交付的？
JavaScript脚本可以通过压缩和缩小来更快地进行加载。下面来看看这两种方式的使用程度。
1. 压缩
压缩就是资源在通过网络进行传输时减小文件大小的过程。这样可以有效地缩短 JavaScript 资源的下载时间，这些资源都是高度可压缩的。下面是常用的压缩JavaScript资源的方法及其使用比例：
可以看到，大多数的资源，要不就是使用gzip、brotli进行压缩，要不就是不压缩。其中55.4% 的移动页面的 JavaScript 资源使用 Gzip 来压缩，30.8% 的 JavaScript 资源使用 Brotli 进行压缩。
下面是第一方资源和第三方资源常用的JavaScript资源压缩方法及其使用比例：
下面是第一方和第三方未压缩资源的大小及其使用比例：
可以看到，90% 未压缩的第三方 JavaScript 资源都小于 5 KB。
2. 缩小
压缩只会改变 JavaScript 资源在网络上的传输大小，而缩小会使代码本身更小、更高效。这不仅有助于减少脚本的加载时间，还有助于减少客户端解析脚本所花费的时间。
下面是移动页面中未缩小的JavaScript在Lighthouse中的评分情况：
这里的0.00表示最低分数，1.00表示最高分数。67.1%的移动压面的评分在0.9-1.0之间。也就是说，仍然有超过30%的页面的未缩小的JavaScript评分低于0.9。
下面是每个移动页面未缩小的JavaScript脚本的大小的分布情况：
根据Lighthouse的审计报告，57.4%的移动页面有0KB未缩小的JavaScript脚本。17.9%的移动页面包含0-10KB大小的未缩小的JavaScript。
下面是移动页面未缩小的JavaScript分布情况：
可以看到，平均 82.0% 的移动页面未缩小的 JavaScript 实际上来自第一方脚本。
3. SourceMap
SourceMap是与 JavaScript 资源一起发送的信息，允许浏览器将缩小的资源映射回其源代码。这对于开发人员在生产环境中进行调试很有用。不过，只有0.1%的移动页面使用了SourceMap。
五、库和框架
1. 库的使用
这里使用Wappalyzer来检测页面上使用的技术，下面是 JavaScript 库和框架的使用情况：
可以看到，jQuery 仍然是使用最多的库，有84%的移动页面使用了jQuery。从去年以来，React 的使用率从 4% 跃升至 8%，这是一个显著的增长。
那为什么到2021年了，还有那么多网站使用jQuery呢？主要有两个原因：
- 大多数WordPress网站使用jQuery开发，而接近三分之一的网站都使用了WordPress；
- 其他几个常用JavaScript库仍然依赖于jQuery，这有助于间接使用jQuery。
最流行的jQuery版本是3.5.1。有21.3%的移动页面使用了该版本。
2. 框架和库的组合
下面来看看流行的框架和库是如何在同一页面上一起使用的：
可以看到，前十名的库和框架组合都包含jQuery。
3. 安全漏洞
使用 JavaScript 库有优点也有缺点。使用这些库时，一个缺点是旧版本可能包含跨站点脚本(XSS)等安全风险。Lighthouse 检测页面上使用的 JavaScript 库时，如果其版本在开源Snyk 漏洞数据库中存在任何已知漏洞，就会审核失败。
63.9% 的移动页面使用了具有已知安全漏洞的 JavaScript 库或框架。下面是移动页面中已经发现包含易受攻击的JavaScript库和框架的占比情况：
可以看到，57.6% 的 jQuery 页面发现了 JavaScript 漏洞，而2020年为80.9%。
六、如何使用JavaScript？
既然已经了解了如何获取JavaScript，下面来看看可以使用它来做什么呢？
1. AJAX
使用JavaScript的一种方式就是与服务器进行通信。下面是每个页面发出的异步请求数的分布情况：
桌面页面中每个页面的异步请求数最大值为623，移动页面中每个页面异步请求数最大值为867。
下面是同步和异步 AJAX 请求的使用占比情况：
2.5% 的移动页面使用了已弃用的同步 AJAX 请求。下面是近三年来，移动页面中使用同步和异步 AJAX 请求的占比情况：
可以看到，异步 AJAX 请求的使用有明显的增加。但是，同步 AJAX 请求的使用并没有显着下降。
我们可以将这些 AJAX 请求大致分为三个不同的 API：核心 API XMLHttpRequest(XHR)、Fetch、 Beacon。
下面是每个页面中 XMLHttpRequest 请求数的分布情况：
下面是每个页面中 Fetch 请求数的分布情况：
下面是每个页面中 Beacon 请求数的分布情况：
下面是XHR和Fetch近三年来的使用情况：
2. Web Components 和 shadow DOM
随着Web 组件化的发展，构建单页面应用的开发人员可能会将用户视图视为一组组件，这不仅是为了开发人员为每个功能构建专用的组件，也是为了最大限度地提高组件的可重用性。它可以在同一个应用程序的不同视图中，也可以在完全不同的应用程序中。此类用例导致在应用程序中使用自定义元素和 Web Components。
可以说，随着许多 JavaScript 框架越来越流行，可重用性和构建专用的基于功能的组件的想法已被更广泛地采用。
自定义元素就是构建在 HTMLElement API 基础上的自定义元素。浏览器提供了一个customElements API，允许开发人员定义元素并将其作为自定义元素注册到浏览器中。3.0% 的移动页面中使用了自定义元素。
Shadow DOM允许开发人员在 DOM 中为引入浏览器的自定义元素来创建专用子树。它确保元素内部的样式和节点在元素外部不可访问。0.4% 的移动页面使用 Web Components 的 shadow DOM 规范来确保元素的作用域子树。
关于本文：
原文：https://almanac.httparchive.org/en/2021/javascript
作者：Nishu Goel
译者：CUGGZ
