使用功能策略进行浏览器内性能代码检查

Avatar of Robin Rendle
Robin Rendle 于

DigitalOcean 为您的旅程的每个阶段提供云产品。从 免费赠送 200 美元信用额度！ 开始！

这是一个来自 Tim Kadlec 的好主意。他使用 Modheader 扩展程序来切换浏览器中的自定义标头。它还允许他查看图像是否过大，需要以某种方式进行优化。这是一种在本地环境中捕获此类问题的好方法，因为浏览器会抛出错误并且根本不会显示它们！

正如 Tim 提到的，诀窍在于使用带有 oversized-images 策略的 Feature Policy 标头，他通过以下方式切换它

Feature-Policy: oversized-images ‘none’;

Tim 写道

默认情况下，如果您向浏览器提供它支持的格式的图像，它将显示该图像。它甚至会帮助缩放这些图像，使它们看起来很棒，即使您提供了一个巨大的文件。因此，您提供的图像是否大于网站所需的图像并不立即显而易见。

oversized-images 策略 告诉浏览器不允许任何图像超过其容器大小的某个预定义倍数。建议的默认阈值为 2 倍，但如果您愿意，您可以覆盖它。

我喜欢这个使用浏览器为我们进行代码检查的想法！我想知道我们还能使用浏览器以哪些其他方式为我们的工作设置护栏，以防止将来出现错误……

直接链接 →

嘘！ 创建一个 DigitalOcean 帐户，并获得 200 美元免费信用额度 用于基于云的托管和服务。

评论

  1. Mark Root-Wiley
    评论的永久链接#

    非常聪明。这不太一样，但我已经习惯于通过突出显示所有没有 alt 文本的图像来提醒我的 WordPress 编辑 alt 文本的重要性。

    所需的选取器会因情况而异，但以下是我在一个实际项目中使用的选取器

    .logged-in .page-content img[alt=""]:not([aria-hidden="true"]) {
    outline: 5px dotted tomato;
    outline-offset: 5px;
}
此评论线程已关闭。如果您有重要信息要分享，请 联系我们。

© 2024 . All rights reserved.