如何删除渲染阻塞样式错误（灯塔插件）答案

【问题标题】：how to remove render blocking style error (lighthouse plugin )如何删除渲染阻塞样式错误（灯塔插件）
【发布时间】：2021-04-16 00:19:16
【问题描述】：

我在我的应用程序中使用external stylesheet。当我检查我的应用程序性能时，它会显示remove render blocking style link。所以我使用了这样的链接标签：

<link href="https://www.*****.com/asset/web/css/base.css" key="" rel="stylesheet" />
<link href="https://www.****.com/asset/web/css/styles.css" key="" rel="stylesheet" />

所以为了消除这个错误remove render blocking style link，我尝试preload我的链接是这样的：

<link href="https://www.*****.com/asset/web/css/base.css"
  key=""
  as="style"
  onLoad="this.rel = 'stylesheet'"
  rel="preload"
/>
<link href="https://www.*****.com/asset/web/css/styles.css"
  key=""
  as="style"
  onLoad="this.rel = 'stylesheet'"
  rel="preload"
/>

现在，当我运行我的应用程序时，我的页面变为空白。当我打开检查元素而不做任何事情时，它显示所有与 css 应用竞争。我做错了什么？为什么会显示空白页？

【问题讨论】：

内容为空白或没有应用样式？如果它是空白的，这很可能是你有一个“加载屏幕”/微调器，删除的 JS 由于某种原因没有被触发。我猜你没有控制台错误？此外，并不是说它应该有所作为，但它应该是onload 不是onLoad，总是小写，无论如何它应该可以工作。如果您想共享 URL 或创建一个复制问题的小提琴，我们可以进一步提供帮助，但您的 HTML 看起来不错。只是为了检查你是否知道如果你这样做以避免布局变化等，你需要内联关键样式？

标签： javascript html css reactjs lighthouse

【解决方案1】：

使用这个


      <link href="https://www.*****.com/asset/web/css/base.css" 
              key=""
              as="style"
              rel="preload"
        />
        <link href="https://www.*****.com/asset/web/css/styles.css"
              key=""
              as="style"
              rel="preload"
        />
        <link href="https://www.*****.com/asset/web/css/base.css"
              key=""
              rel="stylesheet"
        />
        <link href="https://www.*****.com/asset/web/css/styles.css"
              key=""
              rel="stylesheet"
        />

【讨论】：