Chrome 77 版新功能

Pete LePage

Chrome 77 現已推出！

我是 Pete LePage，讓我們進行深入探索，看看 Chrome 77 為開發人員提供的新功能！

最大內容繪製

瞭解並評估網站的實際成效可能並不容易。 load 或 DOMContentLoaded 等指標無法指出使用者螢幕上顯示的畫面。「First Paint」和「First Contentful Paint」只會擷取體驗的開端。「首次有意義的繪製」會比較好，但過程相當複雜，有時也會出錯。

自 Chrome 77 版起，我們推出的 Largest Contentful Paint API 會回報可視區域中最大可見內容元素的轉譯時間，方便您評估網頁主要內容的載入時間。

如要測量最大內容繪製，您需要使用 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 版新增了兩項網路功能，可讓您輕鬆建構自訂表單控制項，並移除許多現有的限制。

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

2019 年 Chrome 開發人員高峰會

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

藉這個機會瞭解網路平台的最新工具和更新內容，並聽聽 Chrome 工程團隊的想法。

這場活動將在我們的 YouTube 頻道上直播。如要現場參加，可以前往 2019 年 Chrome 開發人員高峰會網站索取邀請。

還有更多獎品等著您！

Chrome 77 中對開發人員的只是其中幾項變更，當然還有許多變更。

Contact Picker API 是新推出的隨選挑選器，可讓使用者從聯絡人清單中選取項目，並將所選聯絡人的有限詳細資料提供給網站。

intl.NumberFormat API 中加入了新的測量單位。

其他資訊

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

訂閱

如要隨時掌握 YouTube 影片的最新消息，然後訂閱我們的 Chrome Developers YouTube 頻道，每當推出新影片時，您都會收到電子郵件通知。

我是 Pete LePage。Chrome 78 推出後，我很樂意告訴大家：Chrome 的新功能！