Chrome 86 重要更新解读

Chrome 86 在2020年10月推出了稳定版，现已全面应用于 Android、Chrome OS、Linux、macOS 和 Windows等平台， 我们一起来看下这次的重要更新。若要看全部更新，请移步（ https://www.chromestatus.com/features#milestone=86 ）。

新增稳定功能

文件系统访问

还记得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);
}

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

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

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

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

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

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

要想排查网站的混合内容，使用 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 表单，表单字段下方会有极为醒目的「此表单不安全」文本提示。

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

后台标签页更省电

如果一个标签页在后台运行了五分钟以上，这个页面就会被暂时冻结，相应的 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 伪元素，来改变其颜色、尺寸、形状等信息。

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

废弃&删除的功能

删除 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 功能会被彻底禁用。

参考文献

• https://developers.google.com/web/updates/2020/10/nic86

• https://blog.chromium.org/2020/09/chrome-86-improved-focus-highlighting.html

• https://sspai.com/post/63084

• https://blog.p2hp.com/archives/7490

• https://web.dev/file-system-access/

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

关注 「Alibaba F2E」

把握阿里巴巴前端新动向