Chrome 97 版的新功能

Pete LePage

以下是一些注意事項：

新年快樂！我是 Pete LePage，讓我們深入瞭解 Chrome 97 為開發人員提供的新功能。

Web Transport

如果您使用 Web Sockets 或 WebRTC Data Channel API 在伺服器和網頁之間傳送訊息，我們有新的做法可供您選擇。WebTransport 是新推出的 API，可提供低延遲、雙向的用戶端-伺服器訊息傳遞服務。

其延遲時間比 WebSocket 更短，且與專為點對點訊息設計的 RTC Data Channel API 不同，Web Transport API 是專為用戶端-伺服器訊息設計。

它支援透過串流 API 傳送可靠的資料，以及透過資料包 API 傳送不可靠的資料。網路 worker 支援此功能。由於此類型公開了符合 Streams 規範的介面，因此可支援針對回壓進行最佳化。

如要使用此功能，您需要使用支援 HTTP/3 的伺服器，這通常比設定及維護 WebRTC 伺服器更容易。開啟新的 WebTransport 例項，等待連線，即可開始傳送資料。

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

如需完整詳細資料，請參閱 web.dev 上的「嘗試使用 WebTransport」一文。

指令碼類型功能偵測

如今，我們可以使用 nomodule 屬性，偵測瀏覽器是否支援 JavaScript 模組。不過，我們也正在開發多項新功能提案，例如匯入地圖、推測規則和套件預先載入。我們需要瞭解瀏覽器支援的功能。

輸入 HTMLScriptElement.supports()。您可以使用這個屬性來判斷可使用的指令碼類型，並傳送最佳選項給瀏覽器。

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

新的陣列原型

我很高興 JavaScript 變得更簡單。Array 和 TypedArray 現在支援 findLast() 和 findLastIndex() 靜態方法。

這些函式與 find() 和 findIndex() 實際上相同，但會從陣列結尾搜尋，而非從開頭搜尋。

舉例來說，如要找出陣列中大於十的最後一個數字，請使用測試函式呼叫 findLast()，檢查值是否大於十，即可開始使用。

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

在使用者代理程式字串中模擬 Chrome 100

在幾個月內，Chrome 就會推出 100 版，也就是三位數版本號碼。請檢查所有檢查版本號碼或剖析使用者代理程式字串的程式碼，確保這些程式碼可處理三位數。

有一個名為 #force-major-version-to-100 的標記，會將目前的版本號碼變更為 100，讓您確保一切運作正常。

Chrome 旗標頁面：強調新的 #force-major-version-to-100 選項

還有更多獎品等著您！

當然，還有許多其他功能。

表單項目中的新行現在會以與 Gecko 和 WebKit 相同的方式標準化，藉此改善瀏覽器之間的互通性。

我們會在用戶端提示名稱前方加上 sec-ch，以便標準化名稱。舉例來說，dpr 會變為 sec-ch-dpr。我們會繼續支援這些提示的現有版本，但您應做好準備，以便因應這些提示最終淘汰及移除的情況。

封閉的 <details> 元素現在可供搜尋，且可連結至其他元素。使用「在頁面中尋找」ScrollToTextFragment 和元素片段導覽功能時，這些隱藏元素會自動展開。

延伸閱讀

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

訂閱

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

我是 Pete LePage，Chrome 98 一推出，我就會在這裡告訴你 Chrome 的新功能！