[譯] Chrome 66 Beta：CSS 型別物件模型，非同步剪貼簿 API，AudioWorklet，等

justjavac發表於2018-03-28
ChromeCSS型別物件模型非同步API

原文連結：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()。

相關文章