🔰browser-specific features

JS ⟩ module ⟩ ES module ⟩ browser-specific

⭐️ 重點

• are always deferred❗️( 👉🏻 See: tab 1️⃣ )

• doesn’t block HTML processing, they load in parallel with other resources.

• wait until the HTML document is fully ready, and then run.

• always “see” the fully loaded HTML-page (⭐️ including HTML elements below them❗️)

• relative order of scripts is maintained: scripts that go first in the document, execute first.

When using modules, HTML page shows up as it loads, and modules run after that, so the user may see the page before JS code is ready❗️

1️⃣

<script type="module">
  // ⭐️ modules are deferred, can 'see' elements below.
  console.lot(button);    // HTMLButtonElement 
</script>

<script>
  // ⭐️ regular scripts run immediately, CAN'T 'see' elements below.
  console.log(button);    // ⛔️ ReferenceError: `button` not defined.
</script>

<button id="button">Button</button>

2️⃣

<!-- 
  all dependencies fetched, and the script runs,
  doesn't wait for the document or other <script>.
-->
<script async type="module">
  import {counter} from './analytics.js';
  counter.count();
</script>

📗 參考

• JS.info ⟩ Async works on inline scripts