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/