JavaScript.pl

Strona zawiera kursy, porady i wiele ciekawostek dotyczących programowania w JavaScript, jak i linki do ważnych stron, konferencji i profili opiniotwórczych osób z polskiego community. Projekt jest hostowany na GitHubie - każdy może pomóc w jego tworzeniu. Jego inicjatorem jest Damian Wielgosik (@varjs).

Skrypty w <head> lub w <body> - różnice

varjs #12

Załóżmy, że dołączasz skrypty JavaScript w tradycyjny sposób, poprzez umieszczenie elementu <script> w <head>:

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

Ta metoda ma jednak wady - opóźnia ona ładowanie stron w starszych przeglądarkach - browser czeka, dopóki załaduje się plik JavaScript, dopiero potem zaczyna renderować wszystko, co występuje po tagu <script>.

Jakie są alternatywy? Można użyć parametru async z HTML5, który pominie kolejność ładowania skryptów i załaduje je asynchronicznie:

<head>
    <script src="main.js" async="true"></script>

Warto też wiedzieć, że aby uniknąć oczekiwania i nie polegać na parametrze async, można również dołączyć swoje skrypty dopiero w <body> na samym końcu dokumentu HTML. Mamy wtedy pewność, że DOM jest załadowany i gotowy do użycia (a więc zapomnieć można o zdarzeniu DOMContentLoaded).

Więcej w temacie na MDN.