Chrome 77 中的新功能

Chrome 77 现已推出!

我是 Pete LePage,接下来我们将深入了解 Chrome 77 会为开发者带来哪些新变化!

最大内容渲染时间

了解和衡量网站的实际表现并非易事。 loadDOMContentLoaded 等指标并不会告诉您用户在屏幕上看到的内容。First Paint 和 First Contentful Paint 仅捕获体验的开始。“首次有效渲染时间”更好,但很复杂,有时还出错。

Largest Contentful Paint API 从 Chrome 77 开始提供,可报告视口中可见的最大内容元素的渲染时间,并让您可以衡量页面主要内容的加载时间。

如需衡量 Largest Contentful Paint,您需要使用性能观察器,并查找 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 属性会告知浏览器像对待所有其他表单元素一样对待自定义元素。您还应添加输入元素上的常用属性(如 namevaluevalidity),以确保与原生控件保持一致。

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 上的浏览器级延迟加载(适用于网页)

2019 年 Chrome 开发者峰会

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

通过这次难得的机会,您可以了解 Web 平台的最新工具和更新,并直接听取 Chrome 工程团队的意见。

我们将在 YouTube 频道中现场直播;如果您想要亲临现场,可以访问 2019 年 Chrome 开发者峰会网站索取邀请函。

还有更多其他奖励!

以上只是 Chrome 77 中面向开发者的诸多变更,当然,还有很多变化。

Contact Picker API 作为源试用提供,是一种新的按需选择器,可让用户从联系人列表中选择一个或多个条目,并与网站分享所选联系人的有限详细信息。

intl.NumberFormat API 中提供了新的测量单位。

深入阅读

这仅涵盖了部分重要的亮点。请访问以下链接,了解 Chrome 77 中的其他变化。

订阅

如果您想及时了解我们的视频,请订阅我们的 Chrome 开发者 YouTube 频道,这样,每当我们发布新视频时,您都会收到电子邮件通知。

我叫 Pete LePage