Elimante 渲染阻塞资源 [英] Elimante render-blocking resources
问题描述
我正在尝试优化 Web 以提高速度，并想询问有关消除阻止渲染的 CSS 和 JS 的问题.
I'm trying to optimalize web for speed and wanna ask about Eliminating render-blocking CSS and JS.
by JS 'm 只使用 async attr.- 可以说，把它扔到 flexslider、lightbox 之类的插件上......但我也应该将它与基本脚本一起使用吗?:
by JS 'm only using async attr. - lets say, throwin' it at plugins like flexslider, lightbox.. but should I also use this with the base scripts like ?:
<script src="https://cdnjs.cloudflare.com/.../4.5.3/js/bootstrap.min.js" async></script>
<script src="js/script.js" async></script>每当我在某个脚本上添加异步并对其进行测试时，该 .js 脚本就不会运行 - 就好像没有链接一样.我究竟做错了什么?这足够了吗……?
Whenever i add async on some script and test it, that .js script won't just operate - as if not linked. What am I doing wrong? And is this enough ... ?
-by CSS - 尝试像这样改进它:
-by CSS - tring to impove it like this :
<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 - 图标不会加载，就好像链接不存在一样......那么，请问这是渲染 CSS 的好方法吗?
This cuts down the time of rendering CSS resources, but again when using it on e.g fontawesome - icons are not loaded as if link was't there...So, is this a good way of rendering CSS please ?
推荐答案
JavaScript
使用 async 时，您必须确保加载 order 不会影响您的实现.
JavaScript
When using async you have to ensure that load order does not affect your implementation.
Async 基本上是说尽可能快地加载所有内容，我不在乎加载顺序".
Async basically says "load everything as quickly as you can, I don't care about load order".
如果您没有考虑到这一点，那么最简单的解决方法是在您的 JavaScript 上使用 defer 而不是 async.这基本上是说在 HTML 加载后加载所有内容，但请保持顺序，因为某些脚本依赖于其他脚本".
If you haven't accounted for this then the easiest fix is to use defer on your JavaScript instead of async. This basically says "load everything after the HTML has loaded but please keep the order as some scripts depend on others".
这总体上会稍微慢一些，但仍然修复了 JavaScript 被渲染阻塞的问题.
This will be slightly slower overall but still fix the JavaScript being render blocking.
您应该推迟所有脚本，除了对折叠操作必不可少的任何脚本(然后您应该将这些脚本内联在
