Chrome 66 版新功能

以及更多更多功能

我是 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 提供更簡便的方式使用 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 函式的範例。

新增 Canvas 結構定義 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 物件的顯示作業。現在這些程式庫能以非同步方式運作並避免記憶體重複,提高算繪效率,減少資源浪費。

使用方法:

  1. 呼叫 createImageBitmap 並交給該圖片 blob 來建立圖片。
  2. canvas 取得 bitmaprenderer 結構定義。
  3. 然後將圖片轉入。
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

完成,我顯示圖片了!

AudioWorklet

運動小工具上架了!在 Chrome 65 版中推出 PaintWorklet,現在我們會在 Chrome 66 中預設啟用 AudioWorklet。這個新型 Worklet 可用於處理專屬音訊執行緒中的音訊,取代在主執行緒上執行的舊版 ScriptProcessorNode。每個 AudioWorklet 都會在自己的全域範圍內執行,藉此縮短延遲時間並提高處理量的穩定性。

Google Chrome 研究室提供了有趣的 AudioWorklet 範例。

還有更多獎品等著您!

以上只是 Chrome 66 中開發人員的幾項變更,當然還有許多變更。

  • TextAreaSelect 現在支援 autocomplete 屬性。
  • form 元素上設定 autocapitalize 會套用至任何子項表單欄位,改善與 Safari 實作 autocapitalize 的相容性。
  • trimStart()trimEnd() 現在是以標準為基礎的方法移除字串中的空白字元。

請務必查看 Chrome 開發人員工具新功能,瞭解 Chrome 66 開發人員工具的新功能。如果您對漸進式網頁應用程式有興趣,請查看新的 PWA 說明系列影片。接著,按一下我們的 YouTube 頻道上的「訂閱」按鈕,每當推出新影片時,您都會收到電子郵件通知。

我是 Pete LePage,Chrome 67 推出後,我很樂意告訴大家:Chrome 的新功能!