1
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/chessboard-1.0.0.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="module" src="js/gitchess/chess.js"></script>
    <script type="text/javascript" src="js/chessboard-1.0.0.js"></script>
    <script type="module" src="js/frontend.js"></script>
    <title>CHESS</title>
</head>

Since objects inside chess.js aren't accessible unless they are import 'ed, are they loaded into a separate file? For that matter, how are module scripts loaded into DOM as opposed to regular scripts?

brittle_spirit
  • 87
  • 8
  • Not being accessible (in the global scope) doesn't mean that they are not loaded or that the module code would not be executed. It is, just like the other scripts are. – Bergi Oct 01 '22 at 18:17

1 Answers1

-1

If you mean how scripts are loaded behind the scenes there are 3 ways that I put this image which explains ideally based on the different script loadings: https://i.stack.imgur.com/ULvu1.png

As you can see, the script that has 'defer' is parsed simultaneously but will be executed after the HTML is parsed completely. The order in which you write the scripts becomes essential if you need some data to be available sooner.

<script type="module" src="js/gitchess/chess.js" defer></script>

The async attribute, by the way, pauses the HTML parsing process and starts executing the script files. The order is not essential though.

<script type="module" src="js/gitchess/chess.js" async></script>

I hope I have understood your question as it should. By the way, the complete explanation is provided by other developers Script Tag - async & defer and the information given above is just a short and easy one.

Abolfazl Jamshidi
  • 13
  • 4