Question

我只是花了很长时间用谷歌搜索...到处找到半个答案。我正在使用谷歌页面速度见解来改进我的网站，它告诉我异步加载我的JavaScript。我找到了几个代码，但是他们没有解释如何加载多个js文件以及如何加载css。我也无法找到它以何种顺序加载它的任何地方。有人可以帮忙吗？

注意：我尝试将js移动到页脚，但我的移动菜单不再有效（使用expand.js文件）

我需要异步加载的Javascript文件是：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/h5.js"></script>
    <script language="javascript" type="text/javascript" src="js/expand.js"></script>

我的CSS：

    <link rel="stylesheet" type="text/css" href="style.css">

Answer 1

脚本的异步加载会变得非常复杂。您是否尝试过使用async属性？ E.g：

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script async language="javascript" type="text/javascript" src="js/h5.js"></script>
<script async language="javascript" type="text/javascript" src="js/expand.js"></script>

然而，这可能导致不受欢迎的race conditions。所有这些意味着您的网站的其余部分不将在加载其他资源之前等待加载这三个JavaScript文件。这可能会也可能不会提高您网站的速度，具体取决于所包含的内容，并且可能会在依赖关系管理方面产生一些不可思议的结果，您必须在脚本中考虑这些结果。

大G通常建议创建两个小文件：CSS和要包含在<head/>中的JavaScript文件，其中包含上述内容的所有样式和逻辑（或更好的是：内联它们，即使这增加了DOM的大小）。 Source

Answer 2

如何异步加载Javascript文件？
好吧加载javascript文件你只需要在<script>标签中包含“async”属性，即

<script src="your path" async></script>

现在这个脚本将在后台下载，但不会导致JS渲染问题。
注意：如果您正在使用某些jquery插件，即图片缩放或其他任何内容，则需要额外的时间来加载，但之后它将正常工作。

为什么要将“DEFER”关键字与“ASYNC”一起使用？

您还可以使用defer属性和async属性。带有异步属性的<script>标记强制文件在后台下载，并在下载后立即执行。但是，在加载整个网站后，异步使用延迟属性强制<script>标记执行。

<script src="" async defer></script>

如何异步加载CSS文件？ 如果要首先异步加载CSS文件，则必须在头文件中放置提供的<script>，然后可以使用loadCSS（）函数异步加载CSS文件。

<script>
// https://github.com/filamentgroup/loadCSS
!function(e){"use strict"
var n=function(n,t,o){function i(e){return f.body?e():void setTimeout(function(){i(e)})}var d,r,a,l,f=e.document,s=f.createElement("link"),u=o||"all"
return t?d=t:(r=(f.body||f.getElementsByTagName("head")[0]).childNodes,d=r[r.length-1]),a=f.styleSheets,s.rel="stylesheet",s.href=n,s.media="only x",i(function(){d.parentNode.insertBefore(s,t?d:d.nextSibling)}),l=function(e){for(var n=s.href,t=a.length;t--;)if(a[t].href===n)return e()
setTimeout(function(){l(e)})},s.addEventListener&&s.addEventListener("load",function(){this.media=u}),s.onloadcssdefined=l,l(function(){s.media!==u&&(s.media=u)}),s}
"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this)
</script>

现在你只需要使用loadCSS功能。

<script>
 loadCSS("https://www.yourCSSLinkHere.com");
</script>

通过这种方式，您可以异步加载CSS和JS文件。

您可以使用HTTP / 2.0来克服速度问题，因为HTTP / 2.0允许您的文件并行下载，但HTTP / 1.0不允许您的文件并行下载，否则HTTP / 1.0跟随FIFO（First In First Out）规则。

异步加载以消除渲染阻塞js＆amp; CSS？

2 个答案: