CSS Typed Object Model, Async Clipb

除非額外註明，以下描述的更新皆適用於 Android, Chrome OS，Linux，macOS 和 Windows 平臺 Chrome Beta 渠道的最新發布。Chrome 66 的全部功能列表在 上可以檢視到。

ImageBitMap Rendering Context

以前把一張圖片渲染到 canvas 上要包含兩個部分，首先建立一個 標籤，然後把其內容渲染到 canvas 上。這就導致記憶體中存在圖片的多份複製。 透過避免記憶體複製簡化了 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 將會延遲解碼，這將導致卡頓。另一方面，createImageBitmap()  是非同步的，使用之前已經完全解碼了，避免了卡頓。例如一個 WebGL 遊戲可以使用這個功能在遊戲進行中一邊在後臺載入新的貼圖。

CSS Typed Object Model

以前開發者想要操作 CSS 屬性不得不操作瀏覽器返回的字串，然後瀏覽器再把字串轉化回型別化表示。讓事情更糟的是，當開發者嘗試用 JavaScript 讀取 CSS 屬性值時，這個型別化的值被轉成了一個字串。在 66 版中， 了 ， 的一部分，。Typed OM 透過把 CSS 值暴露為型別化 JavaScript 物件而非字串，減少了開發者和瀏覽器的負擔。Typed OM 在允許高效能操作 CSS 屬性值的同時，也使得開發者能寫出維護性更高的更易於理解的程式碼。這個簡短的例子闡釋了這一點。之前如果我想設定一個元素的不透明度我會這樣做：

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, 它比字串更容易操作。

Asynchronous Clipboard API

新的 提供了一種基於 promise 的方式來讀寫剪貼簿。它比 更加容易，同時還整合了 。在未來的 Chrome 釋出中，富型別資料，包括圖片，也將得到支援。讓我們做一些簡單的文字讀寫操作來品一品這個 API。

try { 
    await navigator.clipboard.writeText("Hello, clipboard.");
} catch { 
    console.error("Unable to write to clipboard.");
}

相似地，讀取文字:

const data = await navigator.clipboard.readText();console.log("From the clipboard:", data);

要獲取更多資訊，包括如何使用 API 的安全性和授權，閱讀 ，檢視我們的.

AudioWorklet

老的 ScriptProcessorNode  是非同步的，並且需要執行緒切換，這會導致音訊輸出不穩定。AudioWorklet 物件提供了一種新的同步 Javascript 執行上下文，允許開發者以程式設計方式無延遲地控制音訊，使音訊輸出有更高的穩定性。在 你可以看到程式碼示例。除 AudioWorklet 之外，還提供了其他的 worklet API。 Chrome 65/Opera 52 釋出了 PaintWorklet，AnimationWorklet 也在計劃中。在 AudioWorklet 釋出後的某個時候，ScriptProcessorNode 將被廢除。

Other Features in this Release

Blink > Animation

add 和 accumulate 組合操作旨在構建模組化動畫。add 和 accumulate 關鍵字即將在 Chrome 中得到支援。那時它們不再會丟擲錯誤。這是為了與 Firefox 和其他實現保持相容性。

Blink > CSS

CSS 有兩個新特性。

• 根據 標準，數學表示式 calc(), min(), 和 max() 現在在媒體查詢中得到了支援。這個更新使函式表示式與其他型別的規則一致，在允許數字的地方，也允許使用這些函式。

• rgb() 和 rgba() 函式現在支援浮點數值。

Blink > Feature Policy

預設地，deviceorientation, deviceorientationabsolute, 和 devicemotion 事件現在限制在頂級文件或者同源的子 frame 中觸發，效果和在 中把這些特性設定為 'self' 一樣。要修改這個行為表現，需要顯式地。

Blink > File API

如果嘗試從無效的或者不存在的 blob URL 讀取內容， 現在會得到網路錯誤而非404 錯誤。

Blink > Forms

HTML forms 有兩個特性。

• 根據規範要求 元素和 元素現在支援 autocomplete 屬性。

• ), 可更改的 checkbox 現在會觸發3次事件，一次 click 事件, 接著一次 input 事件，然後觸發一次  change 事件。之前只會觸發 click 和 change 事件。

Blink > Fullscreen

如果全屏模式下的頁面開啟了一個彈窗並呼叫 window.focus() 獲得焦點，。如果彈窗透過其他方式獲得焦點則頁面不會退出全屏。

Blink > GetUserMedia

MediaStreamTrack 介面上新增了名為 getCapabilities() 的方法，它會返回 MediaTrackCapabilities 物件，指明瞭每個可約束屬性的值或者值的範圍。結果因裝置而異。

Blink > JavaScript

Javascript 有數個改變。

• Function.prototype.toString() 函式現在能精確地返回原始碼中的內容。它包含空格和其他可能未被使用的文字。例如，如果 function 關鍵字和函式名字之間有註釋，註釋同時也會被返回。

• ，字串中允許出現行分隔符 (U+2028)和段落分隔符 (U+2029)。

• try 語句的 catch 從句現在支援了。

• 除已經實現的 String.prototype.trim() 外，現在 String.prototype.trimStart() and String.prototype.trimLeft() 可以使用了，是修剪字串前後空白的標準方法。為保持後向相容，非標準的 trimLeft() 和 trimRight() 作為別名保留了下來。

• Array.prototype.values() 返回一個新的包含陣列中的索引值的迭代物件。

Blink > Layout

Layout 有兩個新特性。

• CSS gutter 屬性移除了 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 屬性的元素現在是固定定位元素的包含塊了。Blink 目前還沒有使, , , and 成為固定定位元素的包含塊。

  Blink > Media

  Media 有兩個新特性。

  • 正如的，autoplay 影片不會播放聲音，在使用者點選或者觸控之後，或者（對於桌面系統）當使用者之前在此站點表露了播放媒體的興趣的情況下有效。這將減少首次開啟一個網頁時意料之外地播放帶聲音的影片的情況。

  • 允許網站獲取更多的關於客戶端解碼能力的資訊。這使得網站可以給使用者提供更有資訊感知能力的媒體流，避免一些糟糕場景的發生，例如網站只根據頻寬和螢幕尺寸而錯誤地選擇了客戶端無法流暢地高效能解碼的解析度。

  Blink > Network

  Fetch API 有兩個新特性。

  • Request 物件目前支援 keepalive 屬性，允許在 tab 關閉後繼續 fetch 請求。透過傳遞布林值給構造器初始化物件，可以啟用這個特性。其值可以透過 request 物件本身讀取。該屬性還可以和sendBeacon() 一起使用。

  • 新的 AbortSignal 和 AbortController 介面允許取消 fetch 請求。要實現這個功能，你需要建立一個 AbortController 物件，把它的 signal 屬性以 option 形式傳遞給 fetch ，透過呼叫 abortController.abort() 即可取消 fetch。在我們的這篇文章可以得到更多的資訊。下方是一個小程式碼示例：

  const controller = new AbortController();const signal = controller.signal;const requestPromise = fetch(url, { signal });// Abort the fetch: controller.abort();

  Blink > ServiceWorker

  Service workers 有兩個變化.

  • 如果 request 是 same-origin 模式，response 是 CORS 型別，Service worker 不再允許對這種請求進行響應。這是最近 Fetch 規範新增的安全措施。

  • 當 FetchEvent.clientId 未設值，現在將返回空字串而非 null. 例如瀏覽器導航請求，就會發生這種情況。

  Blink > WebRTC

  依照規範，Chrome 現在支援 RTCRtpSender.dtmf 屬性，用來替代 還未廢除的 CreateDTMFSender()。

  廢棄和互用性提升

  Blink > CSS

  object-position 和 perspective-origin 屬性不再接受類似 top right 20% 的這種三引數值。這種改變同樣適用於基礎形狀和漸變。有效的位置值必須是1個、2個或者4個引數的值。

  Blink > HTML

  應規範改變，ImageCapture 被移除。

  Blink > Input

  應規範改變，document.createTouch() 和 document.createTouchList() 被移除。

  Blink > Web Audio

  應規範改變，AudioParam.prototype.value 更改的自動解壓縮從 Chrome 中被移除。如果你想對 AudioParam 的更改平滑處理，使用 AudioParam.prorotype.setTargetAtTime()。