Chrome 64 的新功能

Pete LePage

还有更多功能！

我是 Pete LePage。我们来深入了解一下 Chrome 64 中面向开发者的新功能！

想要查看完整的变更列表？请查看 Chromium 源代码库更改列表。

ResizeObserver

跟踪元素大小的变化可能有点麻烦。您很可能会将监听器附加到文档的 resize 事件，然后调用 getBoundingClientRect 或 getComputedStyle。但这两种情况都可能会导致布局抖动。

如果浏览器窗口的大小没有发生变化，但文档中添加了新元素，该怎么办？或者您向某个元素添加了 display: none？这两种方法都会更改页面中其他元素的大小。

每当元素的大小发生变化时，ResizeObserver 都会通知您，并提供元素的新高度和宽度，从而降低布局抖动风险。

与其他观察器一样，使用它非常简单，只需创建一个 ResizeObserver 对象并将回调传递给构造函数即可。回调将会收到一个 ResizeOberverEntries 数组（每个被观察元素一个条目），其中包含元素的新尺寸。

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

如需了解详情和实际示例，请参阅 ResizeObserver：它就像 Elements 的 document.onresize。

我讨厌下标签页。您知道，这种情况是指某个网页打开指向某个目标网址的弹出式窗口，并且会导航到该网页。通常，其中一个是广告或您不希望显示的内容。

从 Chrome 64 开始，系统会阻止此类导航，Chrome 会向用户显示一些原生界面，以便用户根据需要选择是否执行重定向。

import.meta

编写 JavaScript 模块时，您通常需要访问有关当前模块的主机特定元数据。Chrome 64 现在支持模块中的 import.meta 属性，并将模块的网址公开为 import.meta.url。

如果您想解析相对于模块文件（而不是当前 HTML 文档）的资源，这非常有用。

等等！

当然，这只是 Chrome 64 中面向开发者的部分变更，还有许多其他变更。

  • Chrome 现在支持在正则表达式中使用命名捕获和 Unicode 属性转义字符。
  • <audio> 和 <video> 元素的默认 preload 值现在为 metadata。这样一来，Chrome 就与其他浏览器保持一致，并且通过仅加载元数据而非媒体本身的方式减少带宽和资源使用。
  • 您现在可以使用 Request.prototype.cache 查看 Request 的缓存模式，并确定请求是否为重新加载请求。
  • 现在，您可以使用 Focus Management API 将焦点定位于某个元素上，而无需使用 preventScroll 属性滚动到该元素。

window.alert()

哦，还有一件事！虽然这并不是真正的“开发者功能”，但我还是很高兴。window.alert() 不再将后台标签页移至前台！而是会在用户切换回该标签页时显示提醒。

不再发生随机标签页切换，因为某个东西触发了 window.alert。 我正在查看您的旧版 Google 日历。

请务必订阅我们的 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，Chrome 65 发布后，我会立即为您介绍 Chrome 中的新变化！