作者 | 彼洋
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); }
在写文件之前，浏览器会检查用户是否已授权写文件，若未授权，会先弹窗提示用户，再进行后续操作。
特别的是，调用 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/
🔥第十五届 D2 前端技术论坛开放报名，速抢！
关注「Alibaba F2E」
把握阿里巴巴前端新动向
