有一种完全无法比拟的技术，可让您控制Web项目的性能。它包括在开发过程中引入机制，其结果清晰可见。这些机制旨在始终提醒程序员性能的重要性。在这种情况下，我真的很喜欢。这是Feature-Policy HTTP标头。
该标题是一个相对较新的功能，它使开发人员可以在浏览其网站时打开和关闭某些浏览器功能。
例如，通过向其传递以下标头，可以告诉浏览器不允许使用Geolocation API：
Feature-Policy: geolocation 'none'
Feature-Policy就安全性和性能而言，
使用标头有许多优点。但是，我现在特别喜欢如何Feature-Policy使用它来使通常易于忽略的网站性能问题更加明显。可以将其与“性能下降”相提并论。特别是，我们正在谈论确定Web项目中使用的图像存在的问题。图片尺寸过大政策
如果图像以其支持的格式传输到浏览器，则将显示该图像。这是标准的浏览器行为。浏览器试图帮助正在查看页面的人员，也会自动缩放此类图像。因此，即使它们由巨大的图形文件表示，它们也看起来不错。因此，如果使用的图像大于页面所需的大小，则乍一看这是不可见的。政策（指令）oversized-images告诉浏览器它不应允许使用尺寸超过其容器大小指定次数的图像。根据标准限制，图像不能超过容器的2倍。但是，如有必要，可以重新定义该值。因此，如果浏览器接收到下一个标头，则将不允许您显示从任何来源获取的图像（已设置感谢none），该图像的尺寸大于其容器大小（宽度或高度）的2倍。Feature-Policy: oversized-images 'none';
如果需要更大的灵活性，可以告诉浏览器不要显示比容器大3倍的图像：Feature-Policy: oversized-images *(3) 'none';
无论如何，如果图像不符合指定的边界，则会显示存根而不是图像，并且错误消息将发送到控制台。如果站点使用“过大的图像”策略，则将上传大图像，但将显示存根，并且控制台中将显示错误消息。未优化的图像
图形的另一个常见问题是使用非优化图像。通常，您会遇到未充分压缩的图像。但是，可以正确选择它们的大小。因此，对于带有照片的文件，在拍摄和创建它们时，可以添加许多不必要的元数据，这些元数据通常保留在文件中以及在浏览器中使用时。一个特别令人讨厌的例子是图像，其元数据包含其自己的缩略图以供预览。很多次，我看到嵌入在图像中的缩略图（设计师和开发人员甚至不知道存在的缩略图）如何比图像本身更“重”！除其他事项外，您还可以在这里回忆起由多种格式支持的通常的图像压缩，它使您可以在图像质量和文件大小之间达到完美的平衡。未优化的有损图像和未优化的无损图像策略使浏览器知道它与文件大小和以像素为单位的图像大小匹配。Feature-Policy: unoptimized-lossy-images 'none';
Feature-Policy: unoptimized-lossless-images 'none';
如果每个像素的字节数（每像素字节，BPP）太高，则浏览器将显示存根而不是图像，并在控制台中显示错误消息。应用未优化的*策略将导致显示存根而不显示不合适的图像-就像使用过大图像策略一样，对于有损压缩图像，建议的BPP级别为0.5，对于无损压缩图像，建议的BPP级别为1。另外，在分析图像时，允许它们的总大小与这些级别略有偏差。现在，有损压缩的图像的偏差为1 Kb，无损压缩的图像的偏差为10 Kb。例如，假设我们有一个200x200像素的JPEG图像。 JPEG是一种有损图像压缩格式，建议的BPP级别为0.5。同时，总图像大小可能仅比建议大小超出1 Kb。要找出相似图像适合浏览器的大小，您需要将图像两边的尺寸彼此相乘并乘以BPP，然后将允许的偏差添加到发生的事情上。(200 x 200 x .5) + 1024 = 21,024字节或20.5Kb如果对图像进行了无损压缩，则允许偏离“理想”大小10 Kb，而此类图像的BPP为1。否则，计算结果完全相同：(200 x 200 x 1) + 10,240 = 50,240字节或49.1Kb允许偏差的大小将来可能会更改。实际上，尽管默认情况下Blink使用此指标来压缩无损压缩的图像（等于10 Kb），但已经在通过unoptimized-lossless-images-strict更改此指标以将其降低到1 Kb 的策略进行实验。未指定媒体
新的是被遗忘的旧的。长期以来，使用图像属性height，width或多或少地很普遍。没有这些属性，浏览器直到加载图像时才知道图像应占用多少空间。这导致页面布局发生变化。显示该页面，然后在图像到达后，其内容移动。浏览器再次不得不重新计算布局，以便为图像分配空间。当需要使用CSS灵活调整图像大小的布局的时机到来时，这些属性的存在与否不再扮演特殊的角色。结果，许多人只是停止使用这些属性。但是感谢最近的工作由詹·西蒙斯（Jen Simmons）发起的Firefox和Chrome可以根据图片的属性height和来计算图片的长宽比width。当这种方法与应用于图像的样式结合使用时，事实证明浏览器可以在布局的初始通过期间为图像保留空间。未调整大小的媒体策略告诉浏览器，所有媒体元素都必须具有指定这些元素的大小的属性。如果没有此类属性，则浏览器应使用默认值。实际上，所有内容都稍微复杂一点，但最重要的是，如果图像没有适当的属性，则浏览器将使用标准像素值。300x150Feature-Policy: unsized-media 'none';
应用此策略时，将显示图像，但是如果未在HTML中指定图像的大小，则开发人员将迅速注意到图像以默认大小显示。并且，像往常一样，错误消息将发送到控制台。未尺寸媒体政策的应用导致以下事实：显示了没有高度和宽度属性的图像和视频，但浏览器将它们的尺寸设置为300x150像素。可能值得一提的是，一开始我觉得不寻常的功能。她在分享政策unsized-media和行为时表现自己oversized-images。在这种情况下，对于出现过大图像的消息数量比以前更多的情况不应该感到惊讶。事实是，由于该策略的应用，unsized-media浏览器会调整不具有属性height且width最大300x150像素的图像的大小。之后，浏览器将使用此大小作为参考点来确定图像是否与其容器匹配。吸引人们关注不太明显的问题
在与图像相关的策略中，我喜欢这样一个事实，即它们在开发项目的过程中可以使通常隐藏的内容可见。结果，开发人员得知他没有优化图像，或者忘记了设置图像的属性height和width。所有这些错误都会立即反映在页面的外观中。实际上，使用上述策略的主要优点是它们使开发人员可以快速发现图像问题。虽然政治unsized-media可以减少发生页面布局“移位”的情况；使用其他策略并不能防止加载不合适的图像。因此，应用这些策略的唯一优点是可以吸引开发人员注意问题。在分析页面对某些内容对其性能的影响方面，还有其他一些策略可能会有用。在这里可以想到诸如sync-script之类的策略（此策略阻止同步脚本的执行），sync-xhr（阻止同步AJAX请求）和document-write（阻止调用document.write）。这些策略是控制页面性能某些方面的出色工具，但它们本身并未为开发人员提供与上述许多策略以缺少图像的形式提供的同样明显的反馈。当然，如果页面具有同步脚本，没有同步脚本，则不会显示该脚本，因此不容易遗漏（并且很难找到此类页面）。但是这些策略通常以控制台上显示的消息形式指示错误。坦白地说，我怀疑大多数开发人员对控制台的关注度都不高（我认为我们都应该对控制台更加小心）。但是，尽管如此，我们仍可以使用API使“不可见”策略检测到的错误更加明显ReportingObserver，用于监视违规并在页面上显示相关通知。这样的通知可以变得非常明显。let reportingAlerts = document.createElement('ul');
reportingAlerts.setAttribute('id','reportingAlerts');
document.body.appendChild(reportingAlerts);
const alertBox = document.getElementById('reportingAlerts');
new ReportingObserver((reports, observer) => {
let fragment = document.createDocumentFragment();
Object.keys(reports).forEach(function(item) {
let li = document.createElement('li');
li.textContent = reports[item].body.message + ': ' + reports[item].body.featureId;
fragment.appendChild(li);
});
alertBox.appendChild(fragment)
}, {types: ['feature-policy-violation'], buffered: true}).observe();
我在CodePen 中草绘了一个示例，说明了它的外观。如何显示由Feature-Policy标头指定的策略违规通知的示例。此类通知是专为在开发环境中或项目准备将其输出到生产环境中的输出而设计的。减少使用Feature-Policy标头
使用标头的最大缺点Feature-Policy是浏览器对标头的支持。显然，现在只有基于Blink的浏览器（Opera，Edge，Chrome，Samsung）支持它。Firefox和Safari浏览器支持allowitems 属性iframe。但是即使Feature-Policy支持它，也要确保许多策略的正常运行，您还需要启用该标志Experimental Web Platform features（可以在address处找到它about:flags）。我如何使用功能策略标题
Feature-Policy就我个人而言，上面提到
的标题的负号并不是一个特别的问题。我更喜欢将此标头定义的策略用作基于浏览器的页面检查器。因此，我不需要努力将其应用Feature-Policy到生产中，也不必确保策略适用于所有用户。只有我以及正在开发该网站的人员才需要它们。无论如何，我都会在开发过程中使用Chrome作为主要浏览器。因此，确保Feature-Police在我的工作环境中的表现是启用适当的标志。此后，政客们无需我进行任何额外干预即可工作。我发现使用标头的最简单方法是使用Feature-Policy浏览器扩展ModHeader。此扩展名允许您设置自己的标题，这些标题在查看页面时传递给页面。ModHeader扩展允许您配置Feature-Policy标头选项。如果需要，可以打开和关闭它们，我定期使用三组标头值Feature-Policy：oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';script-sync 'none'; unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';
我经常将第一个打开。浏览适用于其中的政策的网页非常令人兴奋。看一些图像有多大令人恐惧。现代网络上有许多可以改进的地方。因此，政治常常是在页面上触发的unsized-media（我也为此感到犯了罪），因此在Internet的正常工作中使用政治是很不方便的。这就是为什么我在单独的策略中将其突出显示的原因，我可以打开和关闭它。这同样适用于策略sync-scripts，该策略的应用“破坏”许多站点。与我合作的一些团队开始使用在开发过程中描述的策略。这使他们能够迅速注意以前看不见的问题。当然，我建议Feature-Policy在开发环境中包括所有策略，这使您可以快速识别和更正错误。摘要
我希望这种支持Feature-Policy将不仅在Chrome中出现。尽管这是我的主要浏览器，但我也必须使用其他浏览器。如果他们支持的话会很有帮助Feature-Policy。但是在这里，我们看到了一种罕见的情况，即使对某个机会的实验性支持也足以使其真正受益。细微的性能问题也是问题。使此类问题更明显的能力是开发人员可以用来识别和修复它们的最佳方法之一。亲爱的读者们！您是否打算使用功能策略标题来识别Web项目中不明显的问题？