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

Chrome 124 新功能

Pete LePage

以下是 Chrome 124 的亮點：

有兩個新的 API 可讓您透過 JavaScript 使用宣告式 shadow DOM。
您可以使用Web Sockets 中的串流。
View Transitions 稍微改善。
除此之外，還有更多功能。

想瞭解完整內容嗎？請參閱 Chrome 124 版本資訊。

在 JavaScript 中使用宣告式 Shadow DOM

我們提供兩項新 API，允許透過 JavaScript 使用宣告式陰影 DOM。

setHTMLUnsafe() 與 innerHTML 類似，且可讓您將元素的內部 HTML 設為提供的字串。當您有含有宣告式 shadow DOM 的 HTML 時，這項功能就會派上用場，例如以下這段 HTML。

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

如果只使用 innerHTML，瀏覽器便無法正確剖析，且不會產生 Shad DOM。但使用 setHTMLUnsafe() 時，系統會建立 Shadow DOM，並按照預期剖析元素。

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

另一個 API 是 parseHTMLUnsafe()，其運作方式與 DOMParser.parseFromString() 類似。

這兩個 API 都屬於不安全，也就是說，它們不會執行任何輸入清理作業。因此，請務必確保餵食的食物安全無虞。我們預計在即將推出的版本中，提供可對輸入內容進行消毒的版本。

最後，這兩個 API 已在最新版的 Firefox 和 Safari 中支援！

WebSocket 串流 API

WebSockets 是一種絕佳的方式，可在使用者的瀏覽器和伺服器之間來回傳送資料，而無須仰賴輪詢。如果您想在即時通訊應用程式等情況下立即處理資訊，這項功能就非常實用。

但如果資料傳送速度太快，您無法處理該怎麼辦？

這就是所謂的回壓，可能會讓您大傷腦筋。很抱歉，WebSocket API 沒有適當的方式來處理回壓。

WebSocket Stream API 可讓您使用串流和 WebSocket，也就是說，您可以免費套用回壓。

首先建構新的 WebSocketStream，並向其傳送 WebSocket 伺服器的網址。

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

接著，您等待連線開啟，這會產生 ReadableStream 和 WritableStream。呼叫 ReadableStream.getReader() 方法後，您會取得 ReadableStreamDefaultReader，然後可以 read() 資料，直到串流完成為止。

如要寫入資料，請呼叫 WritableStream.getWriter() 方法，這會為您提供 WritableStreamDefaultWriter，您可以將資料 write() 到該方法。

查看轉場效果改善項目

我很期待 View Transitions 功能，Chrome 124 中也有兩項新功能，可讓檢視畫面轉場效果更簡單。

當導覽會將文件替換為新文件時，系統會在文件的視窗物件上觸發 pageswap 事件。

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

以及文件算繪阻斷功能，可在解析重要內容前阻斷文件算繪，確保所有瀏覽器都能一致地進行初始繪製。

還有更多獎品等著您！

當然，還有更多功能。

disallowReturnToOpener 會向瀏覽器提示，在分割畫面視窗中不應顯示可讓使用者返回開啟分頁的按鈕。
鍵盤可聚焦的捲動容器可透過使用序列焦點導覽，讓捲動容器可聚焦，進而提升無障礙性。
通用安裝功能可讓使用者安裝任何網頁，即使該網頁不符合目前的 PWA 標準也沒關係。

延伸閱讀

這份報告僅涵蓋部分重點。如要瞭解 Chrome 124 的其他變更，請參閱以下連結。

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

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