消除渲染阻塞资源
Elimante render-blocking resources
我正在尝试优化 Web 以提高速度，想询问有关消除渲染阻塞 CSS 和 JS 的问题。
通过 JS 'm only using async attr. - lets say, throwin' 它在 flexslider、lightbox 等插件中使用。但我是否也应该将其与基本脚本一起使用，如 ?:
<script src="https://cdnjs.cloudflare.com/.../4.5.3/js/bootstrap.min.js" async></script>
<script src="js/script.js" async></script>
每当我在某些脚本上添加异步并对其进行测试时，该 .js 脚本将不会运行 - 就好像没有 linked 一样。我究竟做错了什么？这够了吗……？
-by CSS - 尝试像这样改进它：
<link rel="preload" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" media="print" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><noscript><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"></noscript>
这减少了呈现 CSS 资源的时间，但是当在 fontawesome 等上使用它时再次出现 - 图标没有加载，就好像 link 不存在一样......所以，这是一个好的渲染方式 CSS 好吗？
只是一个建议，无法测试 atm 但请尝试将 'async' 放在源属性之前。另外，尝试添加带有属性 defer 而不是 async 的复制行以获得更广泛的浏览器支持。
JavaScript
使用 async 时，您必须确保加载 order 不会影响您的实施。
Async 基本上是说“尽可能快地加载所有内容，我不关心加载顺序”。
如果您没有考虑到这一点，那么最简单的解决方法是在您的 JavaScript 上使用 defer 而不是 async。这基本上是说“在 HTML 加载后加载所有内容，但请保持顺序，因为某些脚本依赖于其他脚本”。
整体速度会稍微慢一些，但仍会修复 JavaScript 渲染阻塞的问题。
您应该推迟 所有 脚本，除了对首屏操作必不可少的任何脚本（然后您应该将这些脚本内嵌在 <script> 标记中<header>，显然将此保持在最低限度）。
CSS
呈现阻止 CSS 是外部文件中与“首屏”内容相关的任何内容。
要完全理解这一点，您需要了解浏览器如何呈现内容，但本质上，如果您的 CSS 在外部文件中，则无需滚动即可看到的任何内容（“首屏”内容）都会延迟它需要这些信息来了解如何呈现和布置事物。
您需要做的是找到适用于首屏内容的所有样式，并将它们内联到页面 <header> 的 <style> 标记中。再一次，这需要保持在最低限度，因此您可能需要将上面的 CSS 自定义而不是使用 bootstrap...包括整个 bootstrap 内联不会乖！
然后所有其他样式都可以放在外部样式表中。
这样，第二次下载页面 HTML 时，它就拥有了布局页面所需的一切，而无需等待任何其他请求。
字体很棒
Ah 图标字体。我不会从可访问性和性能的角度探讨为什么这是一种不好的做法，因为我之前已经多次提到过。
相反，我只想说，对于任何“首屏”图标，您应该将它们换成 内联 SVG。这与内联您的 CSS 的原因相同，内联 SVG 不需要网络请求来呈现，因此第二次加载 HTML 您的页面就可以显示。
我正在尝试优化 Web 以提高速度，想询问有关消除渲染阻塞 CSS 和 JS 的问题。
通过 JS 'm only using async attr. - lets say, throwin' 它在 flexslider、lightbox 等插件中使用。但我是否也应该将其与基本脚本一起使用，如 ?:
<script src="https://cdnjs.cloudflare.com/.../4.5.3/js/bootstrap.min.js" async></script>
<script src="js/script.js" async></script>
每当我在某些脚本上添加异步并对其进行测试时，该 .js 脚本将不会运行 - 就好像没有 linked 一样。我究竟做错了什么？这够了吗……？
-by CSS - 尝试像这样改进它：
<link rel="preload" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" media="print" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><noscript><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"></noscript>
这减少了呈现 CSS 资源的时间，但是当在 fontawesome 等上使用它时再次出现 - 图标没有加载，就好像 link 不存在一样......所以，这是一个好的渲染方式 CSS 好吗？
只是一个建议，无法测试 atm 但请尝试将 'async' 放在源属性之前。另外，尝试添加带有属性 defer 而不是 async 的复制行以获得更广泛的浏览器支持。
JavaScript
使用 async 时，您必须确保加载 order 不会影响您的实施。
Async 基本上是说“尽可能快地加载所有内容，我不关心加载顺序”。
如果您没有考虑到这一点，那么最简单的解决方法是在您的 JavaScript 上使用 defer 而不是 async。这基本上是说“在 HTML 加载后加载所有内容，但请保持顺序，因为某些脚本依赖于其他脚本”。
整体速度会稍微慢一些，但仍会修复 JavaScript 渲染阻塞的问题。
您应该推迟 所有 脚本，除了对首屏操作必不可少的任何脚本（然后您应该将这些脚本内嵌在 <script> 标记中<header>，显然将此保持在最低限度）。
CSS
呈现阻止 CSS 是外部文件中与“首屏”内容相关的任何内容。
要完全理解这一点，您需要了解浏览器如何呈现内容，但本质上，如果您的 CSS 在外部文件中，则无需滚动即可看到的任何内容（“首屏”内容）都会延迟它需要这些信息来了解如何呈现和布置事物。
您需要做的是找到适用于首屏内容的所有样式，并将它们内联到页面 <header> 的 <style> 标记中。再一次，这需要保持在最低限度，因此您可能需要将上面的 CSS 自定义而不是使用 bootstrap...包括整个 bootstrap 内联不会乖！
然后所有其他样式都可以放在外部样式表中。
这样，第二次下载页面 HTML 时，它就拥有了布局页面所需的一切，而无需等待任何其他请求。
字体很棒
Ah 图标字体。我不会从可访问性和性能的角度探讨为什么这是一种不好的做法，因为我之前已经多次提到过。
相反，我只想说，对于任何“首屏”图标，您应该将它们换成 内联 SVG。这与内联您的 CSS 的原因相同，内联 SVG 不需要网络请求来呈现，因此第二次加载 HTML 您的页面就可以显示。