Chrome 77 版新功能

Pete LePage

Chrome 77 已推出！

我是 Pete LePage，讓我們深入瞭解 Chrome 77 版開發人員的新功能！

最大內容繪製

要瞭解並評估網站的實際成效並不容易。load 或 DOMContentLoaded 等指標不會告訴您使用者在螢幕上看到什麼。首次繪製和首次顯示內容所需時間只會擷取體驗的開頭。畫面首次有效顯示所需時間會比較好，但這項指標很複雜，有時也會出錯。

Largest Contentful Paint API 自 Chrome 77 起推出，可回報可視區域中最大可見內容元素的算繪時間，並評估網頁主要內容的載入時間。

如要評估最大內容繪製，您需要使用 PerformanceObserver，並尋找 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);

由於網頁通常會分階段載入，因此網頁上最大的元素可能會變更，因此您應該只向 Analytics 服務回報最後的 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 上發布了一篇有關最大內容繪製的優質文章。

全新表單功能

許多開發人員會建立自訂表單控制項，以便自訂現有元素的外觀和感受，或是建立瀏覽器中未內建的新控制項。這通常需要使用 JavaScript 和隱藏的 <input> 元素，但這並非完美的解決方案。

Chrome 77 新增了兩項網頁功能，可讓您更輕鬆地建構自訂表單控制項，並移除許多現有的限制。

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 上的「瀏覽器層級的網頁延遲載入」。

Chrome Dev Summit 2019

Chrome 開發人員高峰會將於 11 月 11 日和 12 日登場。

在這個大好機會，您可以瞭解網路平台的最新工具和更新內容，以及 Chrome 工程團隊的直接消息。

這場活動會在我們的 YouTube 頻道上進行直播。如果您想親臨現場，可以前往 Chrome 開發人員高峰會 2019 網站索取邀請函。

還有更多獎品等著您！

當然，這只是 Chrome 77 中針對開發人員所做的部分變更，還有更多變更。

Contact Picker API 可做為來源測試版使用，是一種新的按需挑選器，可讓使用者從聯絡人名單中選取一個或多個項目，並與網站分享所選聯絡人的部分詳細資料。

此外，intl.NumberFormat API 中也新增了測量單位。

延伸閱讀

這只涵蓋部分重點功能。如要瞭解 Chrome 77 版的其他變更，請點選下方連結。

訂閱

如要隨時掌握最新影片，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Pete LePage，每當 Chrome 78 推出時，我就會立即 向大家說明 Chrome 的新功能！