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

注意:我DID尝试将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">

===============>>#1 票数: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的大小)。 来源

===============>>#2 票数:0

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

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

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

为什么要在“ASYNC”中使用“DEFER”关键字?

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

  ask by Shtarley translate from so

未解决问题?本站智能推荐: