renderBlockingStatus

对页面性能的可靠洞察对于我们构建好的用户体验是至关重要的，在以前，我们通常会依靠一些复杂的启发式方法来确定资源是否阻塞页面的渲染。
在 Chrome 107 ，Performance API 新增了一个 renderBlockingStatus 属性，这个属性会提供来自浏览器的直接信号，用于识别阻塞页面渲染的资源，直到它们被下载下来。
下面的代码片段显示了如何获取所有资源的列表并使用新的 renderBlockingStatus 属性列出所有阻塞页面渲染的资源。

  1. // 获取所有资源
  2. const res = window.performance.getEntriesByType('resource');
  4. // 过滤出阻塞渲染的资源
  5. const blocking =   res.filter(({renderBlockingStatus}) =>
  6.       renderBlockingStatus === 'blocking');

优化这些阻塞资源的加载方式（改为异步加载或增加一些预渲染优化）对于我们网站的 Core Web Vitals 是非常有帮助的