5

我刚刚花了很长时间在谷歌上搜索......到处都只能找到一半的答案。我正在使用谷歌页面速度洞察来改进我的网站，它告诉我异步加载我的 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">
4

2 回答 2

1

脚本的异步加载会变得相当复杂。您是否尝试过使用该async属性？例如：

<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>

但是，这可能会导致不希望的竞争条件。这意味着您网站的其余部分不会在加载其他资源之前等待这三个 JavaScript 文件加载。这可能会或可能不会提高您网站的速度，具体取决于所包含的内容，并且可能会在依赖管理方面产生一些不稳定的结果，您必须在脚本中考虑这些结果。

大 G 通常建议创建两个小文件：一个 CSS 和一个 JavaScript 文件，包含在您的文件中，<head/>其中包含首屏内容的所有样式和逻辑（或者更好的是：内联它们，即使这会增加 DOM 大小）。来源。

于 2015-06-05T19:50:49.267 回答
1

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

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

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

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

您还可以将 defer 属性与 async 属性一起使用。<script>带有 async 属性的标签强制文件在后台下载并在下载后立即执行。但是带有 defer 属性的异步<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（先进先出）规则。

于 2016-10-06T04:54:58.863 回答