> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/module/browser.md).

# browser-specific features

[JS](/web/js.md) ⟩ [module](/web/js/module.md) ⟩ [ES module](/web/js/module/es.md) ⟩ browser-specific

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}

* 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.
  {% endhint %}

{% hint style="warning" %}
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❗️
{% endhint %}
{% endtab %}

{% tab title="1️⃣" %}

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

{% endtab %}

{% tab title="2️⃣" %}

```markup
<!-- 
  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>
```

{% endtab %}

{% tab title="📗 參考" %}

* JS.info ⟩ [Async works on inline scripts](https://javascript.info/modules-intro#async-works-on-inline-scripts)
  {% endtab %}
  {% endtabs %}