Chrome 64 版新功能

Pete LePage

還有更多！

我是 Pete LePage，讓我們深入瞭解 Chrome 64 版為開發人員提供的新功能！

如需完整的變更清單，請查看 Chromium 原始碼存放區變更清單。

ResizeObserver

追蹤元素大小變更的時間可能會有些麻煩。您很可能會將事件監聽器附加至文件的 resize 事件，然後呼叫 getBoundingClientRect 或 getComputedStyle。但這兩種情況都可能導致版面配置衝突。

如果瀏覽器視窗大小沒有變更，但文件中新增了元素，該怎麼辦？或者您在元素中新增了 display: none？這兩種元素都能變更頁面中其他元素的大小。

ResizeObserver 會在元素大小變更時通知您，並提供元素的新高度和寬度，降低版面配置耗損的風險。

如同其他觀察器，使用方式相當簡單，只要建立 ResizeObserver 物件，並將回呼傳遞至建構函式即可。回呼會收到 ResizeOberverEntries 陣列，每個觀察到的元素都有一個項目，其中包含元素的新維度。

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

詳情請參閱 ResizeObserver：類似於 Elements 的 document.onresize，瞭解更多資訊和實際範例。

我討厭 tab-unders。您知道這類彈出式視窗嗎？這類視窗會在網頁開啟某個目的地彈出式視窗，並導覽至該網頁。其中一個通常是廣告或您不想看到的內容。

自 Chrome 64 起，這類導覽將遭到封鎖，Chrome 會向使用者顯示一些原生 UI，讓他們可以自行選擇要不要重新導向。

import.meta

撰寫 JavaScript 模組時，您通常會想存取目前模組的特定主機中繼資料。Chrome 64 現已支援模組中的 import.meta 屬性，並將模組的網址公開為 import.meta.url。

如果您想針對模組檔案 (而非目前的 HTML 文件) 解析資源，這項功能就非常實用。

還有更多獎品等著您！

這些只是 Chrome 64 針對開發人員所做的部分異動，當然還有更多變更。

  • Chrome 現在支援規則運算式中的命名擷取和 Unicode 屬性轉義。
  • <audio> 和 <video> 元素的預設 preload 值現在為 metadata。這可讓 Chrome 與其他瀏覽器保持一致，並且只載入中繼資料 (而非媒體本身)，有助於減少頻寬和資源使用量。
  • 您現在可以使用 Request.prototype.cache 查看 Request 的快取模式，並判斷要求是否為重新載入要求。
  • 使用 Focus Management API 後，您現在可以使用 preventScroll 屬性，在焦點移至元素前，先將焦點放在元素上。

window.alert()

還有一件事！雖然這並非真正的「開發人員功能」，但我很高興看到這項功能。window.alert() 不再將背景分頁移至前景！而是在使用者切換回該分頁時顯示快訊。

不再隨機切換分頁，因為某些東西會向我發送 window.alert。我正在查看你的舊版 Google 日曆。

請務必訂閱我們的 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Pete LePage，Chrome 65 一推出，我就會馬上在這裡告訴你 Chrome 的新功能！