Chrome 64 版新功能

以及更多更多功能

我是 Pete LePage。讓我們深入探索 Chrome 64 為開發人員推出的新功能!

想要完整的異動清單嗎?請參閱 Chromium 來源存放區變更清單

ResizeObserver

追蹤元素大小變更的時機可能會有些許困難。您很可能會將事件監聽器附加至文件的 resize 事件,然後呼叫 getBoundingClientRectgetComputedStyle。但這兩者都會造成版面配置輾轉現象。

如果瀏覽器視窗並未變更大小,卻在文件中加入了新元素,該怎麼辦?還是您為元素新增 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:就像是元素 document.onresize,瞭解更多詳細資料和實際範例。

我討厭開分頁的而是在網頁開啟彈出式視窗前往某些目的地,「並且」瀏覽網頁。通常是你不需要的廣告或內容

從 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 的新功能!