每周平台新闻：布局变化，停滞的高峰视频，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中文网其他相关文章！