国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

張憲坤 / 3422人閱讀

摘要：在中，針對屬性的一個子集實現了類型對象模型，這些屬于的一部分。返回一個對象，該對象指定每個受限制屬性的值或值范圍。例如，這會在導航請求期間發生。按照規范，已被刪除。

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

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

的 ImageBitmap 渲染上下文

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

這個例子展示了如何使用 ImageBitmapRenderingContext。例子主要演示了關于圖像像素的轉移。這個例子是把像素從 blob 轉移到 ，但像素也可以在 元素之間移動。請注意，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 個新功能。

按照規范，