Chrome 124 新功能

Pete LePage

以下是 Chrome 124 的特色：

想要全身挑戰嗎？查看 Chrome 124 版本資訊。

在 JavaScript 中使用宣告式陰影 DOM

有兩個新的 API 可以在 JavaScript 中使用宣告式陰影 DOM。

setHTMLUnsafe() 與 innerHTML 類似，可讓您將元素的內部 HTML 設定為提供的字串。如果您的 HTML 包含宣告式陰影 DOM，這就非常實用。

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

如果只使用 innerHTML，瀏覽器就無法正確剖析，且沒有 shadow DOM。但使用 setHTMLUnsafe() 時，系統會建立陰影 DOM，並按預期剖析元素。

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

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

這兩個 API 都「不安全」，因此不會執行任何輸入清理作業。因此你應該確認所提供的資訊安全無虞。 在即將發布的版本中，我們預期會看到提供輸入清理功能的版本。

最後，最新版本的 Firefox 和 Safari 已支援上述的 API！

WebSocket 串流 API

WebSocket 是在使用者瀏覽器和伺服器之間來回傳送資料的絕佳方法，無需依賴輪詢。這對即時通訊應用程式來說非常實用，例如當您想要在收到資訊時立即處理資訊。

但如果收到資料的速度比您能夠處理的時間還快，該怎麼辦？

這就是所謂的背壓，可能會產生嚴重的頭痛。遺憾的是，WebSocket API 沒有一種處理背壓的好方法。

WebSocket Stream API 提供串流功能和 Web 通訊端，這表示您不必額外付費就能套用背壓。

首先，請建構新的 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 轉場效果，Chrome 124 版還提供兩項新功能，目的是讓畫面轉場變得更容易。

當導覽將文件取代為新文件時，文件的視窗物件會觸發 pageswap 事件。

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

而文件轉譯封鎖功能則可讓您在重要內容剖析完畢前禁止轉譯文件，確保所有瀏覽器上的首次繪製情形一致。

還有更多獎品等著您！

當然還有許多其他東西。

  • disallowReturnToOpener 會提示瀏覽器，其不應在子母畫面視窗中顯示按鈕，讓使用者返回開啟的分頁。

  • 鍵盤可聚焦捲動容器：使用依序聚焦導覽功能，將捲動容器變得可聚焦，改善無障礙功能。

  • 此外，通用安裝功能可讓使用者安裝任何網頁，即使不符合目前 PWA 標準的網頁也沒問題。

其他資訊

以上內容僅涵蓋部分重點功能。如要瞭解 Chrome 124 的其他變更，請點選以下連結。

訂閱

如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

我是 Pete LePage，只要 Chrome 125 推出，我們就會立即 與您分享 Chrome 的新功能！