以下是 Chrome 124 的特色:
- 有兩個新的 API 可讓使用者在 JavaScript 中使用宣告式陰影 DOM。
- 您可以使用Web Socket 中的串流。
- 檢視轉場效果會更臻完善。
- 還有更多應用程式。
想要全身挑戰嗎?查看 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 124 版本資訊
- Chrome 開發人員工具新功能 (124)
- 適用於 Chrome 124 的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
如要隨時掌握最新資訊,請訂閱 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
我是 Pete LePage,只要 Chrome 125 推出,我們就會立即 與您分享 Chrome 的新功能!