Mam pewne zamieszanie wokół nowego atrybutu asynchronicznego dla elementu script w HTML5, który mam nadzieję, że ktoś może dać jasną odpowiedź.

Przeglądarki są zdolne do połączeń równoległych, dlatego obrazy będą pobierane równolegle. Jednak żaden zewnętrzny JavaScript nie jest pobierany równolegle z innymi zewnętrznymi JavaScript i obrazami. Skrypty blokują ładowanie stron, dopóki nie zostaną pobrane i wykonane.

Aby pobrać skrypt bez blokowania pozostałej części ładowania strony, najczęstszą techniką jest utworzenie elementu skryptu, takiego jak fragment Google Analytics:

var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.src = '...ga.js';
ga.async = true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);

Nie wiem dokładnie, jak to działa - albo

przeglądarka analizuje i renderuje stronę, a po jej zakończeniu zauważa, że ​​DOM się zmienił, co powoduje pobranie i wykonanie skryptu ga.js

lub

przeglądarka rozpoczyna pobieranie javascript równolegle z innymi zasobami.

Myślę, że to ten drugi.

Nowy asynchroniczny fragment kodu Google Analytics zawiera atrybut asynchroniczny HTML5 w tworzonym elemencie skryptu. To nie pomoże w problemie z blokowaniem stron - rozwiązano to już za pomocą techniki „Element skryptu DOM”. Co więc dodaje asynchroniczny obraz? Według w3schools: „jeśli asynchroniczny jest obecny, skrypt jest wykonywany asynchronicznie z resztą strony (skrypt zostanie wykonany, gdy strona będzie kontynuowała parsowanie)”.

Według strony Steve'a Soudersa, „główną zaletą tego [atrybutu asynchronicznego] jest to, że informuje on przeglądarkę, że kolejne skrypty mogą być wykonywane natychmiast - nie muszą czekać na ga.js”.

Czy zarówno async, jak i technika elementu Script DOM rozwiązują ten sam problem?