- 有了新的 CSS 型別模型物件，CSS 操控作業就變得更簡單。
- 剪貼簿的存取權現在為非同步。
- 有一個新的轉譯內容可用於畫布元素。
還有更多！
我是 Pete LePage，讓我們一起來看看 Chrome 66 為開發人員推出哪些新功能！
如需完整的變更清單，請查看 Chromium 原始碼存放區變更清單。
CSS 類型化物件模型
如果您曾經透過 JavaScript 更新 CSS 屬性，就表示您已使用 CSS 物件模型。但會以字串形式傳回所有內容。
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
如要為 opacity 屬性製作動畫，我必須將字串轉換為數字，然後遞增值並套用變更。這不是理想的做法。
function step(timestamp) {
const currentOpacity = parseFloat(el.style.opacity);
const newOpacity = currentOpacity + 0.01;
element.style.opacity = newOpacity;
if (newOpacity <= 1) {
window.requestAnimationFrame(step);
}
}
有了新的 CSS 類型物件模型，CSS 值會以已指定類型的 JavaScript 物件公開，因此可減少許多類型操控，並提供更合理的 CSS 作業方式。
您可以透過 .attributeStyleMap 屬性或 .styleMap 存取樣式，而非使用 element.style。這些方法會傳回類似地圖的物件，方便您讀取或更新資料。
el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!
與舊版 CSS 物件模型相比，初步基準測試顯示每秒作業次數提升約 30%，這對 JavaScript 動畫來說特別重要。
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles
這也能避免遺漏將值從字串轉換為數字而導致的錯誤，並自動處理值的捨入和夾持。此外，還有一些相當實用的新方法，可處理單位轉換、算術運算和相等性。
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
Eric 在說明文章中提供了幾個示範和範例。
Async Clipboard API
const successful = document.execCommand('copy');
使用 document.execCommand 進行同步複製和貼上作業，對於小量文字來說還算可行，但對於其他內容，由於同步性質可能會阻斷網頁，因此很可能會導致使用者體驗不佳。而且瀏覽器之間的權限模型不一致。
新的 Async Clipboard API 是替代方案，可非同步運作，並與權限 API 整合，為使用者提供更優質的體驗。
您可以呼叫 writeText() 將文字複製到剪貼簿。
navigator.clipboard.writeText('Copy me!')
.then(() => {
console.log('Text is on the clipboard.');
});
由於這個 API 是非同步的，因此 writeText() 函式會傳回 Promise，而這個 Promise 會根據我們傳遞的文字是否成功複製而解析或遭到拒絕。
同樣地，您也可以呼叫 getText()，然後等待傳回的 Promise 以文字解析，藉此從剪貼簿讀取文字。
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
請參閱 Jason 的文章和說明影片中的示範。他也提供使用 async 函式的範例。
新的畫布內容 BitmapRenderer
canvas 元素可讓您在像素層級操控圖形，您可以繪製圖表、操控相片，甚至進行即時影片處理。不過，除非您是從空白 canvas 開始，否則需要在 canvas 上算繪圖片。
過去，這表示建立 image 標記，然後將其內容算繪至 canvas。不幸的是，這表示瀏覽器需要在記憶體中儲存多個圖片副本。
const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = 'llama.png';
自 Chrome 66 起，我們推出了新的非同步轉譯內容，可簡化 ImageBitmap 物件的顯示方式。這些元素現在可以非同步方式運作，並避免記憶體重複，因此算繪效率更高，且發生的卡頓情形也較少。
使用方式如下：
- 呼叫
createImageBitmap並將圖片資料 Blob 交給它，以便建立圖片。 - 從
canvas取得bitmaprenderer內容。 - 然後將圖片傳送進來。
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
完成，我已算繪圖片！
AudioWorklet
Worklet 現已推出！PaintWorklet 已在 Chrome 65 中推出，現在我們會在 Chrome 66 中預設啟用 AudioWorklet。這類新類型的 Worklet 可用於在專用音訊執行緒中處理音訊，取代在主執行緒上執行的舊版 ScriptProcessorNode。每個 AudioWorklet 都會在自己的全域範圍中執行，藉此減少延遲時間並提高處理量穩定性。
Google Chrome 實驗室提供一些有趣的 AudioWorklet 範例。
還有更多獎品等著您！
當然，這只是 Chrome 66 中針對開發人員的部分變更，還有更多變更。
TextArea和Select現在支援autocomplete屬性。- 在
form元素上設定autocapitalize會套用至任何子表單欄位，進而提升與 Safari 實作autocapitalize的相容性。 trimStart()和trimEnd()現已可用於以標準方式從字串中修剪空白字元。
請務必查看「Chrome 開發人員工具的新功能」，瞭解 Chrome 66 開發人員工具的新功能。如果您對漸進式網頁應用程式有興趣，歡迎觀看全新的 PWA 巡迴宣傳影片系列。接著，請點選我們的 YouTube 頻道上的「訂閱」按鈕，這樣一來，每當我們發布新影片，你就會收到電子郵件通知。
我是 Pete LePage，Chrome 67 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！