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');

最佳化資源載入方式有助於改善 Core Web Vitals，並提供更優質的使用者體驗。請參閱 MDN 說明文件，進一步瞭解 Performance API，找出會阻礙轉譯的資源並加以最佳化。

PendingBeacon API 來源試用

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

信標是一組傳送至後端伺服器的資料，不預期會收到特定回應。

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

註冊來源試用，試用 API 並提供意見回饋，協助我們改善用途。

還有其他眾多資源！

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

• expect-ct HTTP 標頭已淘汰。
• <form> 元素現在支援 rel 屬性。
• 上次我提到 grid-template 插補，這次應該要加入。

延伸閱讀

這份清單僅列出部分重點。請點選下方連結，查看 Chrome 107 的其他異動。

• Chrome 開發人員工具新功能 (107)
• Chrome 107 淘汰和移除項目
• Chrome 107 的 ChromeStatus.com 更新
• Chromium 原始碼存放區變更清單
• Chrome 發布時間表

訂閱

如要掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，我們推出新影片時，您就會收到電子郵件通知。

我是 Adriana Jara，Chrome 108 發布後，我會在這裡介紹 Chrome 的新功能！