資訊專欄INFORMATION COLUMN
摘要：在中，針對(duì)屬性的一個(gè)子集實(shí)現(xiàn)了類型對(duì)象模型，這些屬于的一部分。返回一個(gè)對(duì)象，該對(duì)象指定每個(gè)受限制屬性的值或值范圍。例如，這會(huì)在導(dǎo)航請(qǐng)求期間發(fā)生。按照規(guī)范，已被刪除。
原文鏈接：Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet
除非另有說(shuō)明，否則下文所述的更改適用于 Android，Chrome OS，Linux，macOS 和 Windows 的最新 Chrome Beta 版本。在 ChromeStatus 上查看 Chrome 66 中完整的特性列表。
的 ImageBitmap 渲染上下文從歷史上看，將圖像渲染到畫布上首先要?jiǎng)?chuàng)建一個(gè) 標(biāo)簽，然后將其內(nèi)容呈現(xiàn)到畫布上。這會(huì)導(dǎo)致圖像的多個(gè)副本存儲(chǔ)在內(nèi)存中。新的渲染上下文可以流線化 ImageBitmap 對(duì)象的顯示，因而可以避免內(nèi)存重復(fù)，并且更高效。
這個(gè)例子展示了如何使用 ImageBitmapRenderingContext。例子主要演示了關(guān)于圖像像素的轉(zhuǎn)移。這個(gè)例子是把像素從 blob 轉(zhuǎn)移到 ，但像素也可以在 元素之間移動(dòng)。請(qǐng)注意，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 的解碼會(huì)被延后(lazily decoded)，這會(huì)導(dǎo)致問(wèn)題。另一方面，createImageBitmap() 是異步的，它可以讓你在使用之前對(duì)它進(jìn)行完整解碼。例如，在 WebGL 游戲運(yùn)行過(guò)程種，可以使用它來(lái)隨時(shí)加載新的紋理。
CSS 類型對(duì)象模型從歷史上看，想要操縱 CSS 屬性的開發(fā)人員必須只能操縱字符串，然后再將其轉(zhuǎn)換為類型化表示。更糟的是，當(dāng)開發(fā)人員試圖讀取 Javascrip 中 CSS 屬性的值時(shí)，這種類型的值被轉(zhuǎn)換為字符串。
在 Chrome 66 中，針對(duì) CSS 屬性的一個(gè)子集實(shí)現(xiàn)了 CSS 類型對(duì)象模型（OM）Level 1，這些屬于 Houdini 的一部分。Type OM 通過(guò)將 CSS 值暴露為類型化的 JavaScript 對(duì)象而不是字符串來(lái)減輕開發(fā)人員和瀏覽器的負(fù)擔(dān)。除了允許對(duì)賦值給 CSS 屬性的值進(jìn)行高效處理外，Typed OM 還允許開發(fā)人員編寫更易于維護(hù)且易于理解的代碼。
一個(gè)簡(jiǎn)單的例子說(shuō)明了這一點(diǎn)。以前，如果我想設(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 是異步的，而且需要線程跳躍(譯者注：會(huì)在 UI 線程和用戶線程之間跳躍)，這可能會(huì)產(chǎn)生不穩(wěn)定的音頻輸出。AudioWorklet 對(duì)象提供了一個(gè)新的同步 JavaScript 執(zhí)行上下文，它允許開發(fā)人員以編程方式控制音頻，而不會(huì)在輸出音頻中產(chǎn)生額外延遲，更加穩(wěn)定高效。
您可以在 Google Chrome Labs 查看示例代碼以及其他示例代碼。
除了 AudioWorklet 之外，其他 worklet API 正在構(gòu)建中。PaintWorklet 在 Chrome 65 / Opera 52 中已經(jīng)發(fā)布。AnimationWorklet 計(jì)劃中。ScriptProcessorNode 會(huì)在 AudioWorklet 發(fā)布一段時(shí)間后會(huì)被棄用。
本發(fā)行版中的其他功能 Blink > AnimationThe 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 > CSSCSS 有 2 個(gè)新功能。
CSS Values and Units Module Level 4 支持了數(shù)學(xué)表達(dá)式 calc(), min()，max()。
rgb() 和 rgba() 函數(shù)中現(xiàn)在允許浮點(diǎn)值。
Blink > Feature Policy默認(rèn)情況下，deviceorientation，deviceorientationabsolute，和 devicemotion 事件僅限于頂級(jí)文檔和相同來(lái)源的子框架，就如同 feature policy 對(duì)這些特性設(shè)置為 "self" 一樣。要修改此行為，請(qǐng)明確 enable or disable the specific feature。
Blink > File API嘗試從無(wú)效或不存在的 BLOB URL 讀取時(shí) ，F(xiàn)ile API 會(huì)導(dǎo)致網(wǎng)絡(luò)錯(cuò)誤，而不是 404。
Blink > FormsHTML 表單有 2 個(gè)新功能。
按照規(guī)范，