Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

Hi, I’m the watermelon guy. Today we are going to look at three ways that script scripts can be loaded.

The default load

The general script is:

<script src="app.js"></script>
Copy the code

There is a problem with this approach: it blocks THE DOM construction of HTML.

If we use script in the head element, it will prevent subsequent elements from rendering, including the body element, and document.querySeletor(‘body’) returns null.

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    / / get a null
   console.log(document.querySeletor('body'));
  </script>
</head>
<body></body>
</html>
Copy the code

In addition, when the script is large enough to load and execute for long enough, the page will not render the full page for a long time.

This is why we put the business code script at the bottom of the body to ensure that the script can access a complete DOM tree and not prevent the page from rendering.

The downside is that HTML is very long, and it takes a while to parse to the script before the corresponding script resource is requested.

But in general, HTML content is pretty simple, and you won’t notice much difference unless you’re stuck on the Internet.

Defer loading

<script defer src="app.js"></script>
Copy the code

Please defer. By delay, WE mean that the script is delayed so that the download is not blocked.

Note that the defer attribute is not valid for embedded scripts. After all, the script content is in THE HTML, so you don’t need to request the resource at all.

After adding the defer attribute to the Script tag, the script does not block the build of the DOM tree, downloads the resource first, and then waits until it executes before the DOMContentLoaded event.

The DOMContentLoaded event is triggered when the initial HTML is built. At this time, CSS, images and other resources do not need to be loaded, but our script needs to be executed.

If multiple scripts have the defer attribute set, they will be executed in the same order as they were declared, meaning that the first script will be executed first. It’s not about who downloads first who executes first.

In actual development, we could put the business code script under the head tag with the defer attribute.

This is how packaging scripts are introduced by default in the latest version of the HtmlWebpackPlugin.

Async loading

<script async src="app.js"></script>
Copy the code

Async = async The same is not true for embedded scripts.

When async is set, scripts are executed as soon as they are downloaded, no matter when.

Suitable for scripts independent of the order of execution, such as advertising, website traffic analysis scripts.

For example, insert a Google analytics script:

<script async src="//www.google-analytics.com/analytics.js"></script>
Copy the code

Dynamic loading

There is also a special case of loading scripts from scripts, which is covered here.

<script>
  const script = document.createElement('script');
  script.src = 'app-a.js';
  document.body.appendChild(script);
</script>
Copy the code

Create a script element in the script, set SRC, load it into the DOM tree, and the script will be downloaded and executed.

Script elements created by default are set to true for async to be executed as soon as it is downloaded.

If you want to load multiple scripts with dependencies, set Async to false.

<script>
  const script = document.createElement('script');
  // Cancel async loading
  script.async = false;
  script.src = 'app-a.js';
  document.body.appendChild(script);

  const script2 = document.createElement('script');
  script2.async = false;
  script2.src = 'app-b.js';
  document.body.appendChild(script2);
</script>
<script>console.log('I'm still the first script to execute.')</script>
Copy the code

This ensures that app-a.js is executed before app-b.js

It is important to note that it does not execute earlier than other non-dynamically loaded scripts in HTML.

At the end

Script has three common loading modes:

  • Default loading: blocks THE DOM build
  • Defer load: The download remains the same, but execution is delayed
  • Async: Executes immediately after downloading, suitable for scripts without dependencies

There is also the case for dynamically loaded scripts, which default to async loading and can be removed by setting async property to false to allow the scripts to be executed sequentially.

I am front-end watermelon brother, welcome to pay attention to me.

The article was first published on my public account: front-end watermelon brother