谷歌瀏覽器將延遲加載視頻和音頻,以加快網頁加載速度。

  • Chrome 148 將在桌面、行動裝置和 WebView 中為影片和音訊元素加入原生懶載入功能。
  • 瀏覽器將使用該屬性延遲螢幕外媒體下載。 加載中="lazy"減少資料和記憶體佔用。
  • 該改進避免了複雜的 JavaScript 解決方案,並且與…協調得更好 預緊, 自動播放 和事件 視窗載入.
  • 由於它是基於 Chromium,因此歐洲的 Edge、Brave、Opera 或 Vivaldi 等瀏覽器也將從中受益。

Google Chrome 影片和音訊的懶加載功能

谷歌正在最終確定一項新的技術特性。 Chrome 148 承諾將改變網頁上影片和音訊的載入方式。瀏覽器會智慧地延遲下載這些多媒體資源,直到真正需要它們時才下載,目的是提高頁面效能並減少資料消耗,尤其是在行動網路連線下。

這個想法並非全新:自 2019 年以來,Chrome 和其他基於 Chromium 的瀏覽器就已經開始實現這項功能。 圖片和iframe的延遲加載現在擺在桌面上的是將同樣的邏輯擴展到各個元素。 y 它們通常更重,對初始裝載速度的影響更大。

什麼是延遲載入?它將如何應用於視訊和音訊?

Chrome 中視訊和音訊延遲載入的工作原理

La 延遲載入 這是一種包括以下技術的技術 延遲下載和初始化某些資源,直到使用者捲動頁面接近它們為止。瀏覽器不會在頁面開啟時一次顯示所有內容,而是先聚焦於可見內容,將螢幕外的內容留到以後再顯示。

實際上,當網站在主螢幕下方很遠的地方包含視訊或音訊時,瀏覽器會利用這項新功能來處理這種情況。 它不會立即開始下載或準備。它會等到使用者與目標資源保持一定距離後才開始載入。這樣可以避免下載可能永遠不會觀看或播放的媒體檔案。

直到現在,許多開發者都依賴 使用 JavaScript 建立的自訂解決方案,結合了 Intersection Observer 等工具和動態屬性載入功能。 SRC雖然這是實現類似效果的有效方法,但它增加了程式碼的複雜性,並且與瀏覽器引擎的內部優化整合得不好。

透過新的實現方式,Chrome 將允許 直接使用該屬性 加載中="lazy" 視訊和音訊標籤就像圖片和其他一些元素一樣。瀏覽器會根據這個線索來決定哪些多媒體資源可以延遲載入以及何時檢索它們。

根據該平台路線圖中收集的信息, Chromium公司年初就開始著手開發這項功能。該功能已經過多個內部實現階段。目標是優化其視覺效果以及與瀏覽器其他載入系統的互動。

Chrome 148 和其他基於 Chromium 核心的瀏覽器有哪些變化?

Chrome 148 版本支援延遲視訊和音訊載入

新功能將以原生方式啟動。 鉻148的這適用於電腦和行動設備,也適用於 WebView(許多應用程式用來顯示網頁內容的容器)。根據谷歌的文檔, 該功能已在 Chrome 147 等開發分支中進行測試。 其穩定版本計劃在接下來的某個版本中發布,並逐步推出,預計將於 4 月中旬左右完成,但具體時間可能會有所變動。

透過直接整合到 Chromium 程式碼中,改進 它不僅限於谷歌瀏覽器。共享相同基礎的瀏覽器,例如 Microsoft Edge、Brave、Opera 或 Vivaldi當他們升級到包含新的媒體延遲載入行為的版本時,他們也將能夠利用這種優化。

需要注意的是 並非所有多媒體內容都會受到相同的影響。長期以來,基於 Chromium 核心的瀏覽器都支援 iframe 的原生懶加載,因此使用 iframe 嵌入的 YouTube 影片通常不會受到太大影響。但對於直接使用標籤的網站來說,影響會更大。 y 適用於內容複製。

谷歌也指出, 視訊和音訊的原生懶載入會考慮其他屬性,例如 自動播放 y 預緊換句話說,瀏覽器會努力在資源節約和開發者預期每個玩家的行為之間取得平衡,從而最大限度地減少使用者體驗中的意外情況。

另一個關鍵點是該系統 將防止阻塞事件 視窗載入 包含位於可見區域之外的多媒體資源對於載入了大量影片片段、嵌入式播放器或音軌的網站來說,這可能會影響頁面載入速度的快慢。

對載入速度、行動數據和記憶體的影響

延遲載入對 Chrome 效能的影響

這項改進的實際效果在以下方面最為顯著: 頁面中包含大量多媒體元素,並穿插在內容中。瀏覽器不會在你進入頁面時立即嘗試下載所有文件,而是會優先處理文字、初始圖像和必要資源,其餘文件留待以後下載。

這意味著 更短的初始載入時間、更低的頻寬消耗和更小的記憶體壓力對於資源有限的手機或每月流量有限的套餐用戶來說,這一點尤其重要。西班牙和歐洲其他地區的許多用戶仍然需要在預算緊張或網路覆蓋不穩定的地區上網,因此,避免不必要的下載總歸是件好事。

就體驗而言,使用者認為 頁面響應速度更快,即使後台加載視頻,瀏覽器也不會卡頓,您可以立即開始閱讀。雖然您可能不會在介面上看到任何明顯的變化,也不會收到有關新功能的通知,但您會注意到某些大型網站的響應速度似乎更快了。

谷歌也指出, 原生實作允許根據網路狀態進行最佳化載入瀏覽器引擎可以根據連線速度(快或慢)或偵測到的正在進行的請求數量來決定不同的閾值。外部腳本很難實現這一點,因為它們無法存取載入過程的內部資訊。

透過減少用戶可能永遠不會看到的項目的下載量,可以獲得額外的好處。 更有效地利用快取和渲染管線從長遠來看,這些細節有助於帶來更流暢的導航體驗,即使頁面之間的改進並不明顯。

這對 Web 開發人員和 Chium 生態系統意味著什麼?

從網站建立者的角度來看,這項新功能的到來意味著… 大幅簡化多媒體資源的管理方式此前,想要詳細控制視訊或音訊載入時間的人幾乎只能依靠 JavaScript,並添加額外的邏輯來檢測螢幕上的位置。

借助新的API, 只需添加該屬性即可。 加載中="lazy" 在標籤中 y 就像處理圖片一樣。瀏覽器會自動處理其餘部分,運用自身的啟發式演算法決定何時開始下載,而不會影響使用者體驗。

這樣做有幾個優點:它可以減少自訂程式碼的數量, 載入邏輯中可能出現的錯誤被降至最低 這樣就避免了對僅用於管理播放器行為的外部函式庫的依賴。此外,瀏覽器也能更好地協調系統負載。 預緊 以及在頁面渲染之前執行的資源掃描器。

將原生延遲加載功能整合到視訊和音訊系統中的提議是由…推動的。 Chromium 計畫的積極貢獻者他們已經從事這類效能優化工作一段時間了。該規範正在常規工作小組內部不斷完善,雖然仍有改進空間,但谷歌已經將其作為正式規範發布。 這是開發者多年來熟知的懶加載 API 的邏輯擴充。.

與 Chromium 引擎中整合的幾乎所有內容一樣,這種變化 最終將惠及多種瀏覽器而且不只是Chrome瀏覽器。在歐洲,越來越多的用戶在Edge、Brave、Opera或Vivaldi等瀏覽器之間切換,這類共同的改進強化了這樣一種感覺:互聯網的大部分都在以相同的技術速度發展。

最終,一切都是為了 這是那種不會改變瀏覽器外觀的靜默更新之一。但這些改進可以節省您日常操作幾秒鐘的時間(或至少減少摩擦),尤其是在多媒體內容繁多的網站上。在眾多頁面爭奪使用者註意力的環境下,任何能夠提升使用者體驗、簡化操作的進步都彌足珍貴。

隨著 Chrome 148 版本引入視訊和音訊的原生懶加載功能,該瀏覽器鞏固了其在網路生態系統中作為效能標竿的地位:頁面開啟速度得到提升,資料和記憶體使用量減少,開發人員的工作也得到簡化。同時,西班牙和歐洲其他基於 Chromium 核心的瀏覽器也將迎來這項優化,雖然它可能不會引起太多關注,但卻能讓日常瀏覽體驗更加舒適。


在 Google 新聞上關注我們