Chrome 83 版的新功能

Chrome 83 現已推出穩定版。

以下是一些注意事項:

我是 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 致力於翻新表單控制項的外觀,我真的覺得十分驚訝。除了精美的視覺風格外,這些機型也提供更優異的觸控支援和更優質的無障礙功能,包括更完善的鍵盤支援!

新的表單控制項已納入 Microsoft Edge,目前可在 Chrome 83 版中使用。詳情請參閱 Chromium 網誌上的「表單控制項與焦點更新」。

來源試用

使用 measureMemory() 測量記憶體

在 Chrome 83 版中開始來源試用,performance.measureMemory() 是一項新的 API,可讓您測量網頁的記憶體用量,並偵測記憶體流失情形。

記憶體流失很容易引入:

  • 忘記取消註冊事件監聽器
  • 從 iframe 擷取物件
  • 不關閉工作站
  • 累積陣列中的物件
  • 諸如此類

記憶體流失情形會導致網頁顯示速度緩慢,並會對使用者造成疲乏。

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

請前往 web.dev 查看使用 measureMemory() 監控網頁的記憶體總用量,瞭解新 API 的所有詳細資料。

Native File System API 更新

Native File System 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 將網站「跨源隔離」

網站體驗指標

評估使用者體驗品質有很多面向,雖然使用者體驗的某些面向是網站和情境,但還有一組通用信號 (「網站體驗核心指標」) 對所有網路體驗來說至關重要。這類核心使用者體驗需求包括網頁內容的載入體驗、互動性和視覺穩定性。這些需求是 2020 年網站體驗核心指標的基礎。

這些指標都會擷取以使用者為中心的重要結果,可實際評估欄位,並支援研究室診斷指標對等項目和工具。舉例來說,雖然「最大內容繪製」是頂層載入指標,但也會高度依賴首次顯示內容繪製 (FCP) 和第一個位元組時間 (TTFB),而這仍是監控和改善的關鍵。

詳情請參閱 Chromium 網誌上的「網站體驗指標簡介:網站健康狀態的重要指標」一文。

其他更新

想知道未來將推出哪些產品嗎?請查看 Fugu API 追蹤工具,瞭解如何查看!

其他資訊

這份文件僅涵蓋部分重點功能。請查看下方連結,瞭解 Chrome 83 版的其他異動。

訂閱

想要隨時掌握最新影片,並訂閱我們的 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。

我是 Pete LePage,「需要」剪髮。Chrome 84 版本推出後,我會馬上說明 Chrome 的新功能!