Chrome 88 新功能解读

短命女 2022-10-24 01:51 241阅读 0赞

## CSS aspect-ratio 属性 ##

`aspect-ratio` 属性对应的就是 `Aspect Ratio`，它的意思就是宽高比，也常称为 纵横比，是几何形状在不同尺寸的比值。举个例子，当矩形方向为横向时的宽高比值，是其长边与短边的比率。常会用来描述图像或屏幕的宽度和高度的比率。通常表示为 `x:y` 或 `x × y`，其中的 冒号 和 乘号 表示中文的 比 之意。

![format_png][]

> 就拿 16:9 来说，第一个数字总是指 宽度，第二个数字是指 高度。如果图像的比例与屏幕的比例不同，你可能无法看到整个图像。如果屏幕比图像窄，图像就不能合适地放入。

在以前，只有某些特定的元素具有长宽比，例如 `image`。这时我们仅指定宽度或高度，元素会根据固有长宽比自动计算另一个。

<img src="..." style="width: 800px;">

在 `Chrome 88` 中， `aspect-ratio` 属性可让你显式指定宽高比，从而实现类似的行为。

.square {
      aspect-ratio: 1 / 1;
    }

## 大幅限制链式 JavaScript 定时器 ##

`Chrome 88` 将在特定情况下大幅限制隐藏页面的链式 `JavaScript` 计时器。这将减少CPU使用率，也将减少电池使用率。

如果你在一个 `setTimeout` 里调用了同一个 `setTimeout`，这就相当于链式调用了：

let chainCount = 0;
    
    function setTimeoutChain() {
      setTimeout(() => {
        chainCount++;
        console.log(`This is number ${chainCount} in the chain`);
        setTimeoutChain();
      }, 500);
    }

在 `Chrome 88` 中，当以下所有的条件都成立时，你的 `setTimeout` 调用就会被节流限制：

*  该页面已经隐藏 5 分钟以上（用户当前打开了其他的页面）
 *  你链式调用的计数是 5 或更多次
 *  该页面已经静音 30 秒以上
 *  未使用 WebRTC

在满足这种情况下，浏览器将每分钟检查一次定时器，你定时器里的逻辑也会在每分钟内分批处理。`Chrome` 官方推荐使用 `setInterval` 来解决这个问题。

## 默认启用 noopener ##

<a class="" href="https://developers.tiktok.com/?refer=tiktok_web" target="_blank">TikTok for Developers</a>

如果你的 a 标签只是有一个 `target="_blank"` 属性，打开新窗口后，新页面能通过 `window.opener` 获取到来源页面的 `window` 对象，如果跳转到一个恶意页面，它可能会恶意读取你的一些信息，甚至进行钓鱼攻击。

为了符合 `HTML` 标准的更改，默认情况下如果你的 a 标签有 `target="_blank"`，现在会默认开启 `rel="noopener"`。

## V8 支持非回溯 RegExp 引擎 ##

由于 `V8` 中的 `RegExp` 引擎默认使用的是 NFA引擎，NFA引擎是用表达式去匹配文本，而表达式又有若干分支和范围，一个分支或者范围匹配失败并不意味着最终匹配失败，正则引擎会去尝试下一个分支或者范围，NFA引擎的核心特点就是会发生回溯。

回溯可不是个好东西。想象一下，面前有两条路，你选择了一条，走到尽头发现是条死路，你只好原路返回尝试另一条路。这个原路返回的过程就叫回溯，它在正则中的含义是吐出已经匹配过的文本。

你可以使用下面的正则在 Chrome 控制台进行测试：

<img src=# onerror=’alert(document.cookie)/>/g);

虽然只是简单的一段正则，但是由于它的分支过多，会引起大量的回溯，从而导致你的浏览器卡死。

为了解决这个问题，从 `v8.8` 开始，V8附带了一个新的实验性非回溯 `RegExp` 引擎，它可以保证在字符串长度变大的情况下保持线性的时间变化：

![format_png 1][]

你可以通过下面的方式配置新的 RegExp 引擎：

*  `--enable-experimental-regexp_engine-on-excessive-backtracks`：在过多的回溯上启用对非回溯引擎的回退。
 *  `--regexp-backtracks-before-fallback N`：（默认 `N=50000`）指定了多少回溯被视为过多，即何时进行回退。
 *  `--enable-experimental-regexp-engine` 直接启用非回溯 `RegExp` 引擎。

## Manifest v3 ##

![format_png 2][]

`Chrome 88` 现在支持使用 `Manifest v3` 构建的扩展程序，用户可以将其上传到 `Chrome` 网上应用店。`Manifest v3` 是一个新的扩展平台，默认情况下可使 `Chrome` 扩展更安全，更高效，更尊重隐私。

> Manifest v3 不允许使用远程托管的代码，这可以帮助 Chrome Web Store 审核人员更好地了解扩展程序带来的风险，并且应该允许你更快地更新扩展。

## 完全禁用 FTP ##

![format_png 3][]

从 86 版本开始，`Chrome` 开始了禁用 `FTP` 的过程，到 88 版本发布后，FTP 被完全禁用：

*  `Chrome 86`：默认情况下，大多数用户仍启用 `FTP`，但对于 `pre-release channels` 禁用了 `FTP`，并且将对稳定用户的百分之一进行实验性关闭。在此版本中，用户可以使用 `--enable-ftp` 命令或 `--enable-features=FtpProtocol`  从命令行重新启用它 。
 *  `Chrome 87`：默认情况下，百分之五十的用户将禁用 `FTP` 支持，但可以使用上面列出的 flag 启用 `FTP` 支持。
 *  `Chrome 88`：`FTP` 支持被完全禁用

## 完全禁用混合内容下载 ##

![format_png 4][]

如上面的过程，从 `81` 版本开始， Chrome 开始阻止混合内容的下载，并在各个版本开启不同文件类型的阻止，到 `Chrome 88` 版本，所有文件类型的混合内容下载被完全阻止。

> 当用户正在访问一个以 HTTPS 开头的网页，但文件是从一个以 HTTP 开头的 URL 下载的。Chrome 将这些情况视为 “混合”和 “不安全”下载。

## 完全禁用 flash ##

![format_png 5][]

`Chrome` 在 `83` 版本对用户使用 flash 开启了进一步提示，比如如果提示激活 `Flash` 插件时并导致状态更改，将会再次给予警告。

2020 年 12 月 31 日，Flash 达到了正式的生命终点，Adobe 正式停止支持该软件。1 月 12 日，Adobe 开始直接阻止 Flash 内容播放。

## 移除 Web Components v0 支持 ##

从 Chrome 88 版本开始，不再支持 `Web Components v0` ，Chrome 使用 `Web Components v1 API` 替代了 `Web Components v0`，并且 `Safari、Firefox、Edge` 都支持了这项改动。

[format_png]: /images/20221024/9a23ce9e54404012a02865f9350b9e57.png
[format_png 1]: /images/20221024/efb23509e4d04c418c241ba1ef22e5c2.png
[format_png 2]: /images/20221024/ae7bb4d0edaf4381a9cb760914171a26.png
[format_png 3]: /images/20221024/e7401c9f5d134ca4816731c1c9235e78.png
[format_png 4]: /images/20221024/dd5d8a127c4943afa68b44fbba24c332.png
[format_png 5]: /images/20221024/75140a605126435ba6131a3665623d26.png