Chrome 124 新功能

Pete LePage

以下是 Chrome 124 的重點功能：

想要體驗完整的服務嗎？查看 Chrome 124 版本資訊。

在 JavaScript 中使用宣告式陰影 DOM

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

setHTMLUnsafe() 與 innerHTML 相似，可讓您將 的內部 HTML 新增至所提供字串的元素。這樣當您產生 包括宣告式陰影 DOM 的 HTML。

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

如果您只使用 innerHTML，瀏覽器就不會正確剖析，而且 沒有 shadow DOM。但使用 setHTMLUnsafe() 時，系統會建立 shadow DOM，而 則會按預期方式剖析元素。

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

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

這兩種 API 都不安全，因此不會輸入任何資訊 以及消毒因此，建議你確認動態饋給的內容都是安全的。 在未來版本中，我們會看到提供清理作業的版本 輸入內容

最後，最新版本的 Firefox 和 Safari！

WebSocket 串流 API

WebSockets 是使用者網路通訊端， 而不必依賴輪詢這很適合 讓您即時處理資訊 。

但如果資料送達的速度比您能負荷的速度還快呢？

這稱為背壓壓力，可能會對您造成嚴重頭痛。 可惜的是，WebSocket API 沒有辦法 壓力。

WebSocket Stream API 提供 串流的強大功能和網頁通訊端，也就是說， 您無須額外付費

請先建構新的 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() 資料。

查看轉場效果改善項目

我很期待這次的檢視轉換功能 其中兩項新功能 Chrome 124 的設計，目的是讓您更輕鬆切換畫面。

導覽時，會在文件的視窗物件上觸發 pageswap 事件 會以新文件取代文件。

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

以及禁止轉譯文件 因此關鍵內容尚未剖析完畢，以確保第一幅繪製程序保持一致 。

還有更多獎品等著您！

當然，還有許多其他功能

  • disallowReturnToOpener敬上 向瀏覽器發送提示，該模式不應在子母畫面中顯示按鈕 視窗，可讓使用者返回開啟工具分頁。

  • 鍵盤可聚焦捲動容器 透過依序讓捲動容器成為焦點，提升無障礙體驗 焦點導覽

  • 且通用安裝可讓使用者安裝任何網頁 符合目前 PWA 標準

延伸閱讀

這只涵蓋部分重要亮點。請參閱下列連結： Chrome 124 的其他變更。

訂閱

歡迎訂閱 Chrome Developers YouTube 頻道， 每次推出新影片時，您都會收到電子郵件通知。

我是 Pete LePage，只要 Chrome 125 一推出，我們就很樂意提供協助 告訴你 Chrome 的新功能！