# browser-specific features

[JS](..) ⟩ [module]() ⟩ [ES module](es) ⟩ 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 %}
