Chrome 66 Beta：CSS 類型對象模型，異步剪貼板 API，AudioWorklet，等

原文連接： Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet

---

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

<canvas> 的 ImageBitmap 渲染上下文

從歷史上看，將圖像渲染到畫布上首先要建立一個 <img> 標籤，而後將其內容呈現到畫布上。這會致使圖像的多個副本存儲在內存中。新的渲染上下文能夠流線化 ImageBitmap 對象的顯示，於是能夠避免內存重複，而且更高效。

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

const image = await createImageBitmap(imageBlob);
const canvas = document.createElement('canvas');
const context = canvas.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

canvas.toBlob((outputJPEGBlob) => {
  // Do something with outputJPEGBlob.
}, 'image/jpeg');

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

CSS 類型對象模型

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

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

一個簡單的例子說明了這一點。之前，若是我想設置元素的不透明度，我能夠這樣作：

el.style.opacity = 0.3;
el.style.opacity === "0.3"

使用 CSSOM：

el.attributeStyleMap.set("opacity", CSS.number("0.3"));
el.attributeStyleMap.get("opacity").value === 0.3

上面返回值的類型是 CSSUnitValue，比字符串更容易操做。

異步剪貼板 API

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

AudioWorklet

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

您能夠在 Google Chrome Labs 查看示例代碼以及其餘示例代碼。

除了 AudioWorklet 以外，其餘 worklet API 正在構建中。PaintWorklet 在 Chrome 65 / Opera 52 中已經發布。AnimationWorklet 計劃中。ScriptProcessorNode 會在 AudioWorklet 發佈一段時間後會被棄用。

本發行版中的其餘功能

Blink > Animation

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.

Blink > CSS

CSS 有 2 個新功能。

• CSS Values and Units Module Level 4 支持了數學表達式 calc(), min()，max()。
• rgb() 和 rgba() 函數中如今容許浮點值。

Blink > Feature Policy

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

Blink > File API

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

Blink > Forms

HTML 表單有 2 個新功能。

• 按照規範，<textarea> 和 <select> 支持 autocomplete 屬性。
• 按照 HTML 規範的要求)，一個可變的複選框如今觸發 3 個事件：click 事件，而後是 input 事件，而後是 change 事件。之前只有 click 和 change 事件被觸發。

Blink > Fullscreen

若是全屏模式下的頁面打開彈出窗口並調用 window.focus(), 該頁面會退出全屏。若是彈出窗口以其餘方式接收焦點，則不會發生這種狀況。

Blink > GetUserMedia

MediaStreamTrack 接口有一個新方法 getCapabilities()。

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

Blink > JavaScript

幾個 JavaScript 更改。

• Function.prototype.toString() 函數如今返回源代碼中寫入的內容。這包括可能已經使用的空白和其餘文本。例如，若是函數關鍵字和函數名稱之間存在註釋，則除了關鍵字和名稱以外，如今還返回註釋。
• JSON 如今是 ECMAScript 的一個語法子集，它容許字符串文本中的行分隔符(U+2028)和段落分隔符(U+2029)符號。
• try 語句的 catch 子句如今能夠在沒有參數的狀況下使用。
• 除了以前早已實現的 String.prototype.trim() 外，Chrome 66 實現了 String.prototype.trimStart() 和 String.prototype.trimLeft() 用來將字符串兩側的空白去除。而 trimLeft() 和 trimRight() 是爲了保持爲向後兼容性而提供的非標準的方法別名。
• Array.prototype.values() 方法返回一個新的數組迭代器對象，該對象包含數組中每一個索引的值。

Blink > Layout

佈局有 2 個新功能。

• grid 前綴：

  • grid-gap 變 gap
  • grid-row-gap 變 row-gap
  • grid-column-gap 變 column-gap
• 全部三者的默認值是 normal，前綴屬性是新名稱的別名。請注意，column-gap 屬性已經存在並被 css-multicol 使用。
• 當元素的 display 屬性是 table-row，table-row-group， table-header-group，table-footer-group，table-cell，table-caption，並具備 transform 屬性時，此元素能夠做爲 fixed-position 元素的包含塊。Blink 目前不能把 <tr>，<tbody>，<tfoot>，<thead> 做爲 fixed-position 元素的包含塊。

Blink > Media

媒體有 2 個新功能。

• 正如以前博客所介紹的那樣，autoplay 只有當媒體不會播放聲音時，用戶主動點擊後，或者（桌面版）若是用戶之前在該網站上表現出對媒體的興趣時才容許播放。這樣作會在第一次打開網頁時減小意外的視頻播放和聲音。

（譯者(justjavac)注：目前運行被自動播放的內容包括：內容被靜音、內容只包含視頻（無音頻）、用戶在瀏覽會話期間點擊網站上的某個地方、在移動設備上若是該網站已被用戶添加到主屏幕、若是用戶在桌面版瀏覽器上頻繁播放該媒體）

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

Blink > Network

Fetch API 有 2 個新功能。

• Request 對象如今支持 keepalive 屬性，該屬性容許在關閉標籤後繼續 fetch。經過在構造函數的初始化對象中傳遞布爾值來調用此功能。它的值能夠從對象自己讀回。該屬性也能夠和 sendBeacon() 一塊兒使用。
• 新的 AbortSignal 和 AbortController 接口容許取消 fetch 操做。建立一個 AbortController 對象並將其 signal 屬性做爲 option 傳遞給 fetch。調用 abortController.abort() 取消 fetch。 咱們以前撰寫的 abortable fetch article 中有更多信息，下面是一個代碼示例。

const controller = new AbortController();
const signal = controller.signal;
const requestPromise = fetch(url, { signal });

// Abort the fetch:
controller.abort();

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

Blink > ServiceWorker

ServiceWorker 有兩個變化。

• 若是 request 的模式是 same-origin，而 response 的模式是 CORS，ServiceWorker 不能再響應。這是最近添加到 Fetch 規範的安全措施。
• FetchEvent.clientId 如今返回一個空字符串，而不是 null。例如，這會在導航請求期間發生。

Blink > WebRTC

Chrome 如今支持 RTCRtpSender.dtmf 屬性。這取代了 CreateDTMFSender() 還沒有棄用的功能。

棄用和互操做性改進

Blink > CSS

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

Blink > HTML

按照規範，ImageCapture.prototype.setOptions() 已被刪除。

Blink > Input

按照規範，document.createTouch() 和 document.createTouchList() 已被刪除。

Blink > Web Audio

在規範更改以後，AudioParam.prototype.value 的自動解壓縮功能從 Chrome 中移除。若是您須要平滑處理 AudioParam 的更改，請使用 AudioParam.prorotype.setTargetAtTime()。