以下是 Chrome 124 的重點功能:
- 我們提供兩種新 API,允許宣告式陰影 DOM 從 JavaScript 使用而來
- 您可以使用Web Sockets 中的串流。
- 我們來看看檢視轉場效果的效果。
- 除此之外,你還有更多功能。
想要體驗完整的服務嗎?查看 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 124 版本資訊
- Chrome 開發人員工具新功能 (124)
- Chrome 124 適用的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
歡迎訂閱 Chrome Developers YouTube 頻道, 每次推出新影片時,您都會收到電子郵件通知。
我是 Pete LePage,只要 Chrome 125 一推出,我們就很樂意提供協助 告訴你 Chrome 的新功能!