Chrome 86 重要更新解读

作者 | 彼洋

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 重要更新解读

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 重要更新解读


Chrome 86 重要更新解读

关注「Alibaba F2E」

把握阿里巴巴前端新动向

上一篇:mysql5.7常用语句及常见错误


下一篇:Dwr 框架简单实例