成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

張憲坤 / 3451人閱讀

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

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

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

的 ImageBitmap 渲染上下文

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

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

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 屬性的開發(fā)人員必須只能操縱字符串，然后再將其轉(zhuǎn)換為類型化表示。更糟的是，當開發(fā)人員試圖讀取 Javascrip 中 CSS 屬性的值時，這種類型的值被轉(zhuǎn)換為字符串。

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

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

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 開發(fā)者中心有一篇文章介紹異步剪貼板 API Unblocking Clipboard Access，我也已經(jīng)翻譯了中文版 Async Clipboard API：異步剪貼板 API）

AudioWorklet

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

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

除了 AudioWorklet 之外，其他 worklet API 正在構(gòu)建中。PaintWorklet 在 Chrome 65 / Opera 52 中已經(jīng)發(fā)布。AnimationWorklet 計劃中。ScriptProcessorNode 會在 AudioWorklet 發(fā)布一段時間后會被棄用。

本發(fā)行版中的其他功能 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 支持了數(shù)學表達式 calc(), min()，max()。

rgb() 和 rgba() 函數(shù)中現(xiàn)在允許浮點值。

Blink > Feature Policy

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

Blink > File API

嘗試從無效或不存在的 BLOB URL 讀取時 ，F(xiàn)ile API 會導致網(wǎng)絡(luò)錯誤，而不是 404。

Blink > Forms

HTML 表單有 2 個新功能。

按照規(guī)范，