javascript i "async" w podpinaniu javascriptu w html

Question

Witam. Uczę się JavaScript i mam pytanie. 

<script src = "script.js"></script>

Powyżej podpięcie JS w dokumencie HTML.

function funkcja()
{
	alert('przykladowy tekst');
}

var element = document.getElementById('przycisk');
element.onclick = funkcja;

A tutaj powyżej kod JS.

A o to poniżej błąd w przeglądarce:

Uncaught TypeError: Cannot set property 'onclick' of null

Grzebiąc w internecie doszedłem do wniosku, że w podpięciu musi być "async" 

<script src = "script.js" async></script>

Z tym działa tak jak działać powinno. A teraz pytanie: Co to jest to "async" i do czego to służy? 

Answer 1

Atrybut [async] przy tagach script mówi przeglądarce, żeby załadowała konkretny skrypt asynchronicznie i nie czekała na niego, tylko renderowała pozostałe elementy dokumentu. Natomiast w twoim przypadku bardziej logicznie zachowa się atrybut [defer], który każe przeglądarce załadować skrypt dopiero po skończeniu parsowania całego dokumentu, ale też przed wywołaniem zdarzenia DOMContentLoaded; powinno się go używać do vendorów, czyli skryptów zewnętrznych.

https://davidwalsh.name/html5-async

Answer 2

Da radę bez async jeśli podepniesz skrypt w prawidłowym miejscu, czyli przed domknięciem znacznika body.

Comments

A no to chyba że tak :D. Dzięki za odpowiedz :)

---

Psst. tutaj masz fajny artykuł dotyczący dodawania eventów.

Psst2. Programiści używają console.log itp.