异步加载以消除渲染阻塞js和css？

Question

I've just spent a really long time googling... and only find half answers everywhere. I am using the google page speed insights to improve my website and it tells me to asynchronously load my javascript. I found a couple of codes, but they didn't explain how to load MORE than one js file AND how to load the css as well. I also couldn't find anywhere where it tells me in what order to load it. Can anyone help?

NOTE: I DID try to move the js to the footer, but then my mobile menu no longer works (which uses the expand.js file)

The Javascript files I need to asynchronously load are:

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

My CSS:

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

Answer 1

Asynchronous loading of scripts can get pretty complicated. Have you tried using the async attribute? Eg:

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

However, this can cause undesired race conditions . All this means is the rest of your site is not going to wait for these three JavaScript files to load before loading other resources. This may or may not improve the speed of your site depending on what is contained, and can produce some wonky results in terms of dependency management which you'll have to account for in your scripts.

It is usually recommended by the big G to create two small files: a CSS and a JavaScript file to be included in your <head/> which contains all the styles and logic for the above-the-fold content (or better yet: inline them, even though this increases the DOM size). Source .

Answer 2

How To Asynchronously load Javascript File?
Well to load javascript file you just need to include "async" attribute in <script> tag ie

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

Now this script will be downloaded in background while it will not cause JS rendering issue.
Note: If you're using some jquery plugin ie image zoom or any thing else, it will take an extra time to load but after that it will work properly.

Why to use "DEFER" keyword with "ASYNC" ?

You can also use defer attribute along with async attribute. <script> tag with async attribute forces file to be downloaded in background and execute as soon it is downloaded. but async with defer attribute forces <script> tag to execute once entire site is loaded.

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

How To Asynchronously load CSS file? If you want to load your CSS file asynchronously first you have to place provided <script> in your head file and then you can use loadCSS() function to load you CSS file asynchronously.

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

Now you just have to use loadCSS function.

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

---

In this way you can load your CSS and JS file Asynchronously.

---

You can use HTTP/2.0 to overcome speed issue because HTTP/2.0 allows your file to be downloaded parallel but HTTP/1.0 won't allow your file to be download parallel, in other way HTTP/1.0 follows FIFO(First In First Out) rule.