本頁面由 Cloud Translation API 翻譯而成。

Chrome 107 新功能

Adriana Jara

以下是一些注意事項：

Screen Capture API 中的新屬性可改善螢幕分享體驗。
您現在可以準確判斷網頁上的資源是否造成顯示阻斷。
在原始試驗中，您可以使用宣告式 PendingBeacon API，以全新方式將資料傳送至後端伺服器。還有許多其他功能
還有許多其他功能。

我是 Adriana Jara，讓我們深入瞭解 Chrome 107 為開發人員帶來哪些新功能。

Screen Capture API 的新屬性

在這個版本中，Screen Capture API 新增了新的屬性，可改善螢幕分享體驗。

DisplayMediaStreamOptions 已加入 selfBrowserSurface 屬性。有了這個提示，應用程式就能在呼叫 getDisplayMedia() 時告訴瀏覽器，應排除目前的分頁。

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

這有助於避免意外拍到自己，並避免出現我們在視訊會議中看到的「鏡廳」效果。

DisplayMediaStreamOptions 現在也具有 surfaceSwitching 屬性。這個屬性會新增一個選項，可透過程式輔助方式控制 Chrome 在分享螢幕畫面時，是否要顯示切換分頁的按鈕。這些選項會傳遞至 getDisplayMedia()。Share this tab instead 按鈕可讓使用者切換至新分頁，而無須返回視訊會議分頁或從長長的分頁清單中選取，但如果網路應用程式未處理這項行為，則會以條件式方式顯示。

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

此外，MediaTrackConstraintSet 也會加入 displaySurface 屬性。如果呼叫 getDisplayMedia() 瀏覽器，使用者就能選擇顯示途徑，例如分頁、視窗或螢幕。如果使用 displaySurface 限制，網頁應用程式現在可能會建議瀏覽器，選擇以更醒目的方式提供其中一種介面類型。

舉例來說，這項功能可能會預設共用單一分頁，因此有助於避免不小心共用過多資料。舊版和新版媒體挑選器提示的螢幕截圖。

找出會妨礙顯示的資源

對開發人員而言，網頁效能的可靠深入分析是打造快速使用者體驗的關鍵，目前到目前為止，開發人員必須仰賴複雜的經驗法則，判斷資源是否阻礙了轉譯。

現在，Performance API 包含 renderBlockingStatus 屬性，可提供瀏覽器的直接信號，用於識別會阻止網頁顯示的資源，直到這些資源下載完成為止。

以下程式碼片段說明如何取得所有資源的清單，並使用新的 renderBlockingStatus 屬性，列出所有會造成轉譯阻斷的資源。

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

最佳化資源載入方式有助於改善網站體驗核心指標，並提供更優質的使用者體驗。歡迎參閱 MDN 說明文件，進一步瞭解 Performance API，找出這些會妨礙顯示的資源並最佳化。

待處理的 Beacon API 來源試用

宣告式 PendingBeacon API 可讓瀏覽器控制發送信標的時機。

信標是傳送至後端伺服器的資料組合，並不會出現特定回應。

應用程式通常會在使用者造訪結束時傳送這些信標，但並沒有適合發出「send」呼叫的時機。這個 API 會將傳送作業委派給瀏覽器本身，因此可支援 page unload 或 page hide 上的信標，開發人員不必在正確的時間實作傳送呼叫。

申請來源試用，試用 API，然後提供意見回饋，協助我們提升用途。

還有更多獎品等著您！

當然，還有許多其他功能。

expect-ct http 標頭已淘汰。
<form> 元素現已支援 rel 屬性。
我上次提到grid-template內插類型，這次應該納入。

延伸閱讀

這只涵蓋部分重要亮點。請參閱下列連結，瞭解 Chrome 107 的其他異動。

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Adriana Jara，Chrome 108 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！