我正在努力优化web的速度，并想了解如何消除渲染阻塞CSS和JS。
由JS仅使用异步属性。-比方说，在flexrooper、lightbox等插件上使用它。。但我是否也应该将其与以下基本脚本一起使用？：
<script src="https://cdnjs.cloudflare.com/.../4.5.3/js/bootstrap.min.js" async></script>
<script src="js/script.js" async></script>每当我在某个脚本上添加async并对其进行测试时，该.js脚本就不会只是运行——就像没有链接一样。我做错了什么？这够了吗？
-通过CSS-string将其导入如下：
<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资源的时间，但当在例如font真棒上使用它时，图标不会像链接不在那里一样加载。。。那么，这是一种很好的CSS呈现方式吗？
JavaScript
使用async时，必须确保加载顺序不会影响您的实现。
CCD_ 2基本上说"；尽可能快地装载所有东西，我不在乎装载顺序；。
如果您还没有考虑到这一点，那么最简单的解决方案是在JavaScript上使用defer而不是async。这基本上说"；在HTML加载后加载所有内容，但请保持顺序，因为有些脚本依赖于其他脚本"；。
总体来说，这将稍微慢一点，但仍然修复了JavaScript的渲染阻塞问题。
您应该推迟所有脚本，除了对折叠以上操作至关重要的任何脚本(然后您应该将这些脚本内联到<header>中的<script>标记中，显然要将其保持在最低限度(。
CSS
渲染阻塞CSS是位于与内容"相关的外部文件中的任何东西；折叠上方"；。
要完全理解这一点，你需要了解浏览器是如何呈现事物的，但从本质上讲，如果你的CSS在外部文件中，那么任何在没有滚动的情况下可见的东西("折叠上方"内容(都会被延迟，因为它需要这些信息来知道如何呈现和布局事物。
您需要做的是找到应用于折叠上方内容的所有样式，并将它们内联到页面<header>的<style>标记中。然而，这需要保持在最低限度，因此您可能需要自定义上述折叠CSS，而不是使用bootstrap。。。。包括整个bootstrap内联是不好的！
然后所有其他样式都可以放在外部样式表中。
通过这种方式，页面的HTML下载后，它就拥有了布局页面所需的一切，而无需等待任何其他请求。
字体真棒
啊，图标的字体。我不会从可访问性和性能的角度来探讨为什么这是一种糟糕的做法，因为我以前已经讨论过很多次了。
相反，我将简单地说；在褶皱之上"；您应该将图标替换为内联SVG。这与内联CSS的原因相同，内联SVG不需要网络请求来呈现，因此一旦加载HTML，就可以显示页面。
这只是一个建议，没有办法测试atm，而是尝试将"async"放在源属性之前。此外，为了获得更广泛的浏览器支持，请尝试添加一个带有属性defer而不是async的复制行。