本頁面由 Cloud Translation API 翻譯而成。

Chrome 83 版的新功能

Pete LePage

Chrome 83 即將推出穩定版。

以下是一些注意事項：

信任類型可協助防範跨網站指令碼漏洞。
表單元素進行重要的改造。
偵測記憶體流失的新方法。
原生檔案系統 API 會啟動新的來源試用，並提供額外功能。
新的跨來源政策
我們推出了 Web Vitals 計畫，針對不可或缺的品質信號提供統合一致的指南，協助您打造出色的網頁使用者體驗。
以及更多。

我是 Pete LePage，在家工作並拍攝影片。現在就讓我們一起來看看 Chrome 83 版為開發人員帶來哪些新功能！

信任的類型

以 DOM 為基礎的跨網站指令碼攻擊是網路上最常見的安全漏洞之一。很容易不小心在網頁中加入這類內容。信任類型可協助防範這類安全漏洞，因為這類類型會要求您先處理資料，再將資料傳遞至可能有危險的函式。

以 innerHTML 為例，如果已啟用信任類型，當我嘗試傳遞字串時，系統會傳回 TypeError，因為瀏覽器不知道是否可以信任字串。

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

相反地，我必須使用 textContent 等安全函式，傳入可信任的類型，或是建立元素並使用 appendChild()。

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

開啟信任類型之前，請先使用 report-only CSP 標頭找出並修正任何違規情形。

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

將所有按鈕都向上按鈕後，你就能妥善開啟這項功能。如需完整詳細資料，請參閱 web.dev 上的「使用信任類型防範以 DOM 為基礎的跨網站指令碼攻擊漏洞」。

表單控制項更新

我們每天都會使用 HTML 表單控制項，這些控制項是許多網路互動功能的關鍵。這些工具易於使用、內建無障礙功能，且使用者也熟悉這些工具。表單控制項的樣式在不同瀏覽器和作業系統之間可能不一致。我們經常必須提供多個 CSS 規則，才能在各裝置上取得一致的外觀。

微軟一直致力於讓表單控制項的樣式更現代化，這點讓我印象深刻。除了良好的視覺風格外，這類錶面還帶來更優質的觸控支援功能，以及更優質的無障礙設計，包括更完善的鍵盤支援！

新的表單控制項已在 Microsoft Edge 推出，現在也已在 Chrome 83 版推出。詳情請參閱 Chromium 網誌上的表單控制項和焦點更新。

來源試用

使用 `measureMemory()` 測量記憶體

在 Chrome 83 中開始來源試用，performance.measureMemory() 是一種新的 API，可用於評估網頁的記憶體用量，並偵測記憶體流失。

記憶體流失很容易發生：

忘記取消註冊事件監聽器
從 iframe 擷取物件
未關閉 worker
累計陣列中的物件
諸如此類

記憶體耗損會導致網頁載入速度緩慢，並讓使用者覺得網頁內容過多。

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

如要瞭解新 API 的所有詳細資訊，請參閱 web.dev 上的「使用 measureMemory() 監控網頁的總記憶體用量」。

原生檔案系統 API 更新

原生檔案系統 API 在 Chrome 83 中開始新的來源試用，支援可寫入串流，並可儲存檔案句柄。

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

可寫入串流可讓您更輕鬆地寫入檔案，而且由於它是串流，您可以輕鬆將回應從一個串流傳送至另一個串流。

將檔案句柄儲存到 IndexedDB，即可儲存狀態，或記住使用者正在處理的檔案。例如保留近期編輯的檔案清單、開啟使用者上次使用的檔案等等。

您需要使用新的來源試用權杖才能使用這些功能，因此請參閱我的最新文章：Native File System API：簡化對 web.dev 的存取作業，並提供所有詳細資訊，以及如何取得新的來源試用權杖。

其他來源試用

請查看原始試用版的完整功能清單。

新的跨來源政策

某些網路 API 會增加 Spectre 等旁路攻擊的風險。為降低這類風險，瀏覽器提供名為「跨來源隔離」的選擇加入式隔離環境。跨來源隔離狀態也會防止修改 document.domain。能夠修改 document.domain 可讓同網站文件之間進行通訊，並被視為相同來源政策的漏洞。

請參閱 Eiji 的文章使用 COOP 和 COEP 讓網站「跨來源隔離」，瞭解完整詳細資訊。

Web Vitals

評估使用者體驗品質有許多面向，雖然使用者體驗的某些層面取決於網站及情境，但有一系列共同的信號 (「網站使用體驗核心指標」) 對所有網站體驗至關重要。這類核心使用者體驗需求包括網頁內容的載入體驗、互動性和視覺穩定性，這些都是 2020 年網站體驗核心指標的基礎。

最大內容繪製用於評估感知的載入速度，並在載入網頁時間軸中標示網頁主要內容可能已載入的時間點。
首次輸入延遲時間可評估網頁的回應速度，並量化使用者首次與網頁互動時的體驗。
累計版面配置位移會評估視覺穩定性，並量化可見網頁內容的意外版面配置位移量。

所有這些指標都會擷取以使用者為本的重要結果，可在實地測試中進行評估，並提供實驗室診斷指標等相關工具。舉例來說，雖然 Largest Contentful Paint 是主要的載入指標，但也極度仰賴首次顯示內容所需時間 (FCP) 和首個位元組回應時間 (TTFB)，這兩項指標仍是監控和改善的關鍵。

如需更多資訊，請參閱 Chromium 網誌上的Web Vitals 簡介：診斷網站健康狀態的基本指標，瞭解完整詳情。

其他

Chrome 現在支援 Barcode Detection API，因此能夠偵測及解碼條碼。
新的 CSS @supports 函式可為 CSS 選取器提供功能偵測。
新的 ARIA 註解可支援螢幕閱讀器的無障礙功能，用於註解、建議和具有語義意義的文字醒目顯示 (類似 <mark>)。
prefers-color-scheme 媒體查詢可讓作者支援自己的深色主題，以便完全掌控自己建構的體驗。
JavaScript 現在支援共用工作站中的模組。

想知道未來的發展嗎？詳情請參閱 Fugu API 追蹤程式！

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 83 的其他異動。

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

我是 Pete LePage，我需要修剪頭髮，但 Chrome 84 一推出，我就會在這裡告訴你 Chrome 的新功能！