Chrome 86 重要更新解读

2021-08-09 05:00:04

作者 | 彼洋

Chrome 86 在2020年10月推出了稳定版，现已全面应用于Android、Chrome OS、Linux、macOS 和 Windows等平台，我们一起来看下这次的重要更新。若要看全部更新，请移步。

新增稳定功能

文件系统访问

还记得Chrome 83中的本地文件系统吗，当时的试验功能，现已稳定。通过调用 showOpenFilePicker 方法，你可以唤起文件选择窗口，进而通过返回的文件句柄对文件进行读写。代码如下：

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

在写文件之前，浏览器会检查用户是否已授权写文件，若未授权，会先弹窗提示用户，再进行后续操作。

Chrome 86 重要更新解读

特别的是，调用 showDirectoryPicker 方法会打开文件目录，允许你获取多个文件，或者在目录中创建文件。这很适合IDE、媒体播放器等应用。

全面阻止所有非HTTPS混合内容下载

HTTPS混合内容错误是指初始网页通过安全的HTTPS链接加载，但页面中其他资源，比如图像，视频，样式表，脚本却通过不安全的HTTP链接加载，这样就会出现混合内容错误，也就是不安全因素。

攻击者可拦截不安全的下载地址，将程序替换成恶意软件、甚至访问更多的敏感信息。为管控这些风险，谷歌最终还是决定在Chrome中禁止加载不安全资源。

Chrome 86 重要更新解读从 M82 开始，Chrome 就逐步警告及阻止混合内容的下载，到 M86，会完全阻止下载，时间表如下：

Chrome 86 重要更新解读

要想排查网站的混合内容，使用 Chrome 访问网页，打开开发者工具，选择“Security”-"Non-Secure Origin"，就可以看到Mixed Content（小编身边的网站都是安全的，暂时没找到例子，请各位自行发掘）。

另外，从 M86 开始，图片类型的请求，会自动升级到 HTTPS，并且没有 HTTP 的降级，Audio/Video 类型的请求早在 M80 就开始进行了自动升级。

ParentNode.replaceChildren

目前，要想替换某DOM节点下的全部子节点，必须要先通过 innerHTML 或 removeChild 删除全部子节点，然后再逐个添加，比较麻烦。为此，Chrome 支持了 replaceChildren 方法，可以用参数中的子节点列表替换原有的全部子节点，代码如下：

parentNode.replaceChildren(newChildren);

更多信息，请移步https://www.chromestatus.com/feature/6143552666992640。

更醒目的 HTTP 安全警告

在我们访问 HTTPS 网页时，地址栏最左侧会显示一个锁定图标来表明当前网站是安全的，但如果 HTTPS 网页中嵌入的是并不安全的 HTTP 表单，浏览器则不会给出任何提示信息。而实际上已经有钓鱼网站通过这种方式来盗取用户的敏感信息了。

所以在 Chrome 86 中，如果 HTTPS 的网页中嵌入了不安全的 HTTP 表单，表单字段下方会有极为醒目的「此表单不安全」文本提示。

Chrome 86 重要更新解读

如果你无视提示警告继续提交表单信息，则会看到一个确认警告页面，告知你即将提交的信息并不安全。

Chrome 86 重要更新解读

后台标签页更省电

如果一个标签页在后台运行了五分钟以上，这个页面就会被暂时冻结，相应的 CPU 使用也会被限制在 1% 左右；如果页面支持自动刷新，唤醒时间被限制在每一分钟一次。

新增试用功能

WebHID

HID(Human Interface Device)，人机界面设备。有很多长尾的HID，或者太新，或者太旧，或者不常见，导致无法被系统驱动支持。WebHID API，提供了通过JavaScript访问这些设备的方法。这会大大便利web游戏的操作性，可以使用摇杆、手柄、传感器、震动反馈等等设备。

调用的代码如下：

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

当然，这些强大的API必须要用户授权才能调用。

更多详情请移步https://web.dev/hid/

多屏 Placement API

目前，你可以调用 window.screen() 来获取浏览器所在屏幕，但如果你有多个屏幕，只能获取当前所在的屏幕。

API调用方式及返回结果如下所示：

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

新推出的多屏 Placement API，允许你枚举电脑连接的所有屏幕，并且可以把浏览器窗口放置在特定的屏幕上。这会大大便利幻灯片以及金融相关应用。

在使用API之前，需要先请求许可，第一次请求时会向用户弹窗。

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

获得授权后，调用 window.getScreens() 会返回 Screen 对象列表。

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

:focus-visible

新的CSS选择器，允许你修改默认的focus样式，代码如下：

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

对于列表项的数字或原点，可以使用 ::marker 伪元素，来改变其颜色、尺寸、形状等信息。

除此之外，还可以在设置界面选择「设置 > 高级 > 无障碍 > 短暂地突出显示焦点对象」，选择之后，焦点元素周围会有闪烁的蓝光，提供更为醒目的信息提示。

Chrome 86 重要更新解读

废弃&删除的功能

删除 WebComponents v0

Chrome 80版本已经在桌面和安卓端移除了 WebComponents v0，Chrome 86 进一步把它从WebView移除。这项移除包括Custom Elements v0, Shadow DOM v0, 和 HTML Imports。

移除对FTP的支持

Chrome FTP功能的使用量较低，而且实现有bug，存在安全隐患，何况各平台都有更好用的FTP客户端，不值得继续维护。所以从 M72 开始，Chrome 便已着手阉割 FTP 功能，先是去掉了 HTTP 代理，现在又开始完全移除 FTP 支持，据计划，到 Chrome 88，FTP 功能会被彻底禁用。

参考文献

????第十五届 D2 前端技术论坛开放报名，速抢！

Chrome 86 重要更新解读

关注「Alibaba F2E」

把握阿里巴巴前端新动向

码农公寓

新增稳定功能

文件系统访问

全面阻止所有非HTTPS混合内容下载

ParentNode.replaceChildren

更醒目的 HTTP 安全警告

后台标签页更省电

新增试用功能

WebHID

多屏 Placement API

:focus-visible

废弃&删除的功能

删除 WebComponents v0

移除对FTP的支持

参考文献

相关文章