Chrome 77 中的新功能

Pete LePage

Chrome 77 现已发布！

我是 Pete LePage，让我们一起深入了解 Chrome 77 中面向开发者的新功能！

最大内容渲染时间

了解和衡量网站的实际性能可能并非易事。load 或 DOMContentLoaded 等指标无法告诉您用户在屏幕上看到的内容。首次绘制和首次内容绘制仅捕获体验的开始部分。首次有效绘制时间更好，但比较复杂，有时会出错。

Largest Contentful Paint API 从 Chrome 77 开始提供，用于报告视口中可见的最大内容元素的渲染时间，并支持衡量网页的主要内容何时加载。

如需衡量 Largest Contentful Paint，您需要使用 Performance Observer，并查找 largest-contentful-paint 事件。

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

由于网页通常分阶段加载，因此网页上最大的元素可能会发生变化，因此您应仅向分析服务报告最后一个 largest-contentful-paint 事件。

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

Phil 在 web.dev 上发表了一篇关于 Largest Contentful Paint 的优质文章。

新的表单功能

许多开发者为了自定义现有元素的外观和风格，或者构建未内置在浏览器中的新控件，会构建自定义表单控件。这通常涉及使用 JavaScript 和隐藏的 <input> 元素，但这并不是一个完美的解决方案。

Chrome 77 中新增了两项 Web 功能，可让您更轻松地构建自定义表单控件，并消除许多现有限制。

formdata 事件

formdata 事件是一种低级 API，可让任何 JavaScript 代码参与表单提交。如需使用它，请向您要与之互动的表单添加 formdata 事件监听器。

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

当用户点击“提交”按钮时，表单会触发 formdata 事件，其中包含一个 FormData 对象，用于存储要提交的所有数据。然后，您可以在 formdata 事件处理脚本中更新或修改 formdata，然后再提交。

与表单关联的自定义元素

与表单关联的自定义元素有助于弥合自定义元素与原生控件之间的差距。添加静态 formAssociated 属性会告知浏览器将自定义元素视为与所有其他表单元素一样对待。您还应添加输入元素中常见的属性，例如 name、value 和 validity，以确保与原生控件保持一致。

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

如需了解所有详细信息，请参阅 web.dev 上更强大的表单控件！

原生延迟加载

我不确定自己是如何在上一视频中漏掉原生延迟加载的！它非常棒，因此我现在就将其添加进来。延迟加载是一种技术，可让您将非关键资源（例如屏幕外的 <img> 或 <iframe>）的加载推迟到需要时再加载，从而提高网页的性能。

从 Chrome 76 开始，浏览器会为您处理延迟加载，而无需您编写自定义延迟加载代码或使用单独的 JavaScript 库。

如需告知浏览器您想要延迟加载图片或 iframe，请使用 loading="lazy" 属性。位于“可见区域”内的图片和 iframe 会正常加载。而位于下方的项仅在用户滚动到附近时才会提取。

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

如需了解详情，请参阅 web.dev 上的适用于 Web 的浏览器级延迟加载。

2019 年 Chrome 开发者峰会

Chrome 开发者峰会将于 11 月 11 日和 12 日举行。

这是一个绝佳的机会，您可以了解 Web 平台即将推出的最新工具和更新，并直接听取 Chrome 工程团队的介绍。

该峰会将在我们的 YouTube 频道上进行直播。如果您想亲自参加，可以访问 2019 年 Chrome 开发者峰会网站申请邀请。

等等！

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

Contact Picker API 目前正处于试用阶段，它是一种新的按需选择器，可让用户从联系人列表中选择一个或多个条目，并与网站分享所选联系人的有限详细信息。

此外，intl.NumberFormat API 中新增了一些测量单位。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 77 中的其他变更，请点击以下链接。

订阅

如需及时了解我们的最新视频，请订阅我们的 Chrome Developers YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

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