每周平台新聞：佈局變化，停滯的高峰視頻，Firefox中的屏幕截圖

本週的Web平台新聞涵蓋了佈局偏移調試，高峰視頻問題以及新的Firefox屏幕截圖功能。讓我們潛入！

使用WebPagetest診斷佈局變化

WebPageTest現在有助於確定頁面加載期間的佈局變化。以下是：

步驟1：添加自定義指標

在WebPageTest的“高級設置”（自定義選項卡）中，將此代碼粘貼到“自定義指標”字段中。確保選擇Chrome作為瀏覽器。

 <code>[LayoutShifts] return new Promise(resolve => { new PerformanceObserver(list => { resolve(JSON.stringify(list.getEntries().filter(entry => !entry.hadRecentInput))); }).observe({type: "layout-shift", buffered: true}); });</code>

步驟2：檢查結果

測試後，請檢查“自定義指標”頁面上的“佈局縮放”條目（從“詳細信息”部分鏈接）。

步驟3：膠卷分析

使用“啟動時間”和“值”數據來定位WebPagetest膠卷中的變化並確定其原因。

（通過Rick Viscomi）

高比特率視頻和3G播放

比特率超過1.5 Mbps的自託管視頻可能會導致3G網絡上的播放攤位。諸如FFMPEG和StreamClarity.com之類的工具可以幫助監視比特率。一項研究表明，超過一半的視頻的比特率超過3G下載速度，從而導致播放延遲和攤位。

（通過道格·西拉爾斯）

Firefox的增強屏幕快照命令

Firefox DevTools現在提供了功能強大的:screenshot命令。它反映了Chrome的功能（元素，視口，全頁屏幕截圖），但添加了設備像素比和延遲選項。

 <code>// Full-page screenshot at 2x DPR :screenshot --fullpage --dpr 2 // Viewport screenshot with 5-second delay :screenshot --delay 5</code>

（通過reddit）

有關更多Web平台新聞，請訂閱每個星期一早上發送的每週週日電子郵件通訊。

網絡平台新聞：週日問題→

以上是每周平台新聞：佈局變化，停滯的高峰視頻，Firefox中的屏幕截圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！