Play with the code|Detailed analysis of the async and defer attributes in the Script tag

Foreword

During the interview, a classic interview question is often encountered:

How do I optimize page load speed?

There is always one of the regular answers:

Put css files at the top of the page and js files at the bottom of the page.

So why put the js file at the very bottom of the page?

Let’s look at this code first:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hi</title>
    <script>
        console.log("Howdy~");
    </script>
    <script src="//i2.wp.com/unpkg.com/[email protected]/dist/vue.global.js"></script>
    <script src="//i2.wp.com/unpkg.com/[email protected]/dist/vue-router.global.js"></script>
  </head>
  <body>
    Hello  ~
  </body>
</html>

His order of execution is:

Print on the console: Howdy ~
Request and execute vue.global.js
Request and execute vue-router.global.js
Display on the page: Hello ~
Trigger the DOMContentLoaded event

The parsing rule of the browser is: if a script tag is encountered, the construction of the DOM will be suspended, and the script tag will be executed instead. If so, then The browser still needs to wait for it to be “downloaded” and “executed” before continuing to parse the subsequent HTML.

If it takes 3 seconds to request and execute “vue.global.js“, and “vue-router.global.js” takes 2 seconds, then the Hello in the page ~, it will take at least 5 seconds to display.

It can be seen that the script tag will block the browser from parsing HTML. If you put script in head, in the case of poor network, the page will be in the White screen status.

A long time ago, these external scripts were usually placed at the end of the body tag, making sure to parse and display the content in body first, and then request execution one by one These outreach scripts.

Is there any other more elegant solution?

The answer is yes, now the script tag adds two new attributes: defer and async, to solve such problems and improve page performance of.