Chrome 124 新功能

以下是 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);
}

接著,等待連線開啟,結果 在 ReadableStreamWritableStream 中。透過呼叫 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 的新功能!