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：它类似于 Element 的 document.onresize。

我讨厌 Tab 键。您应该了解，当页面打开一个指向某个目的地的弹出式窗口并在其中导航时。而其中通常会包含您不想要的广告或其他内容

从 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