當前位置：
首頁 > 最新 > Chrome 66 新特性：CSS 類型對象模型，非同步剪貼板 API，AudioWorklet，等

Chrome 66 新特性：CSS 類型對象模型，非同步剪貼板 API，AudioWorklet，等

最新 04-01

除非另有說明，否則下文所述的更改適用於 Android，Chrome OS，Linux，macOS 和 Windows 的最新 Chrome Beta 版本。在 ChromeStatus 上查看 Chrome 66 中完整的特性列表。


的 渲染上下文

從歷史上看，將圖像渲染到畫布上首先要創建一個 標籤，然後將其內容呈現到畫布上。這會導致圖像的多個副本存儲在內存中。新的渲染上下文可以流線化 對象的顯示，因而可以避免內存重複，並且更高效。

這個例子展示了如何使用 。例子主要演示了關於圖像像素的轉移。這個例子是把像素從 blob 轉移到 ，但像素也可以在 元素之間移動。請注意，blob 是壓縮的，因此它不是內存中的完整副本。

如果不使用 ，那麼 的解碼會被延後(lazily decoded)，這會導致問題。另一方面， 是非同步的，它可以讓你在使用之前對它進行完整解碼。例如，在 WebGL 遊戲運行過程種，可以使用它來隨時載入新的紋理。

從歷史上看，想要操縱 CSS 屬性的開發人員必須只能操縱字元串，然後再將其轉換為類型化表示。更糟的是，當開發人員試圖讀取 Javascrip 中 CSS 屬性的值時，這種類型的值被轉換為字元串。

在 Chrome 66 中，針對 CSS 屬性的一個子集實現了 CSS 類型對象模型（OM）Level 1，這些屬於 Houdini 的一部分。Type OM 通過將 CSS 值暴露為類型化的 JavaScript 對象而不是字元串來減輕開發人員和瀏覽器的負擔。除了允許對賦值給 CSS 屬性的值進行高效處理外，Typed OM 還允許開發人員編寫更易於維護且易於理解的代碼。

一個簡單的例子說明了這一點。以前，如果我想設置元素的不透明度，我可以這樣做：

使用 CSSOM：

上面返回值的類型是 ，比字元串更容易操作。


（譯者(justjavac)註：Google 開發者中心有一篇文章介紹非同步剪貼板 API Unblocking Clipboard Access，我也已經翻譯了中文版Async Clipboard API：非同步剪貼板 API）


傳統 是非同步的，而且需要線程跳躍(譯者註：會在 UI 線程和用戶線程之間跳躍)，這可能會產生不穩定的音頻輸出。 對象提供了一個新的同步 JavaScript 執行上下文，它允許開發人員以編程方式控制音頻，而不會在輸出音頻中產生額外延遲，更加穩定高效。

您可以在 Google Chrome Labs 查看示例代碼以及其他示例代碼。

除了 之外，其他 worklet API 正在構建中。 在 Chrome 65 / Opera 52 中已經發布。 計劃中。 會在 發布一段時間後會被棄用。


The add and accumulate compositing operations are intended for building modularized animations. The add and accumulate keywords will be supported in Chrome soon. Until then, they will no longer throw errors. This is to maintain compatibility with Firefox and other implementations.


CSS 有 2 個新功能。

CSS Values and Units Module Level 4 支持了數學表達式 , ， 。

和 函數中現在允許浮點值。


默認情況下， ， ，和 事件僅限於頂級文檔和相同來源的子框架，就如同 feature policy 對這些特性設置為 一樣。要修改此行為，請明確 enable or disable the specific feature。


嘗試從無效或不存在的 BLOB URL 讀取時 ，File API 會導致網路錯誤，而不是 404。


HTML 表單有 2 個新功能。

按照規範， 和 支持 屬性。

按照 HTML 規範的要求，一個可變的複選框現在觸發 3 個事件： 事件，然後是 事件，然後是 事件。以前只有 和 事件被觸發。

如果全屏模式下的頁面打開彈出窗口並調用 , 該頁面會退出全屏。如果彈出窗口以其他方式接收焦點，則不會發生這種情況。


介面有一個新方法 。

返回一個 對象，該對象指定每個受限制屬性的值或值範圍。該功能因設備而異。


幾個 JavaScript 更改。


布局有 2 個新功能。

grid 前綴：

變

變

變

所有三者的默認值是 ，前綴屬性是新名稱的別名。請注意， 屬性已經存在並被 使用。

當元素的 display 屬性是 ， ， ， ， ， ，並具有 transform 屬性時，此元素可以作為 fixed-position 元素的包含塊。Blink 目前不能把 ， ， ， 作為 fixed-position 元素的包含塊。


媒體有 2 個新功能。

正如之前博客所介紹的那樣，autoplay 只有當媒體不會播放聲音時，用戶主動點擊後，或者（桌面版）如果用戶以前在該網站上表現出對媒體的興趣時才允許播放。這樣做會在第一次打開網頁時減少意外的視頻播放和聲音。（譯者(justjavac)註：目前運行被自動播放的內容包括：內容被靜音、內容只包含視頻（無音頻）、用戶在瀏覽會話期間點擊網站上的某個地方、在移動設備上如果該網站已被用戶添加到主屏幕、如果用戶在桌面版瀏覽器上頻繁播放該媒體）

Media Capabilities, Decoding Info API 允許網站獲取有關客戶端的解碼能力的更多信息。這為用戶提供了更多關於媒體流的選擇權，可以使客戶端更加平滑高效地解碼，而非僅僅基於可用帶寬和屏幕大小解析度進行解碼。


Fetch API 有 2 個新功能。

對象現在支持 keepalive 屬性，該屬性允許在關閉標籤後繼續 fetch。通過在構造函數的初始化對象中傳遞布爾值來調用此功能。它的值可以從對象本身讀回。該屬性也可以和 一起使用。

新的 AbortSignal 和 AbortController 介面允許取消 fetch 操作。創建一個 對象並將其 signal 屬性作為 option 傳遞給 。調用 取消 fetch。 我們之前撰寫的 abortable fetch article 中有更多信息，下面是一個代碼示例。

（題外話：cancelable-promises 提案在進入 stage 1 的時候被取消掉了）


ServiceWorker 有兩個變化。

如果 request 的模式是 ，而 response 的模式是 ，ServiceWorker 不能再響應。這是最近添加到 Fetch 規範的安全措施。

現在返回一個空字元串，而不是 。例如，這會在導航請求期間發生。


Chrome 現在支持 RTCRtpSender.dtmf 屬性。這取代了 尚未棄用的功能。


和 屬性不再接受 3 個部分組成的值，例如 。此更改也適用於基本形狀和漸變。有效位置值必須始終有 1, 2 或 4 個部分。


按照規範， 已被刪除。


按照規範， 和 已被刪除。


在規範更改之後， 的自動解壓縮功能從 Chrome 中移除。如果您需要平滑處理 的更改，請使用 。


喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！


請您繼續閱讀更多來自 justjavac 的精彩文章:

TAG:justjavac |