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 上發布了一篇有關最大內容繪製的優質文章。

新表單功能

許多開發人員會建立自訂表單控制項，以便自訂現有元素的外觀和感受，或是建立瀏覽器中未內建的新控制項。這通常需要使用 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 有哪些新功能！