Czy atrybut/właściwość" async " jest przydatna, jeśli skrypt jest dynamicznie dodawany do DOM?
To pytanie jest jakby styczne do które przeglądarki obsługują ?.
Widziałem ostatnio kilka skryptów, które robią coś takiego:
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://www.example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(s);
Jest to popularny sposób dynamicznego dodawania skryptu do DOM, który, IIRC z książki Steve ' a Soudersa " jeszcze szybsze witryny internetowe", podpowiada wszystkim nowoczesnym przeglądarkom, aby załadowały skrypt asynchronicznie (tzn. nie blokują renderowania stron ani pobierania kolejnych zasobów).
Jeśli mam rację w czy wypowiedź s.async = true ma jakiś sens? Czy nie byłoby to zbędne, nawet dla przeglądarek, które obsługują tę właściwość, ponieważ dynamicznie dołączany skrypt powinien już wyzwalać asynchroniczne pobieranie?
4 answers
Odpowiedź przyjęta w tym piśmie jest nieaktualna. W związku z tym, że element , który nie jest parserem-wstawionym, jest asynchroniczny, właściwośćasync jest nieistotna dla elementów, które nie są parserem-wstawionym script:
Trzeci jest znacznikiem wskazującym, czy element będzie " force-async ". Początkowo elementy {[3] } muszą mieć ustawioną tę flagę. Jest wyłączany przez parser HTML i parser XML na elementach
script, które wstawiają. Dodatkowo, gdy element skryptu, którego znacznik "force-async" jest ustawiony, ma dodany atrybutasynccontent, znacznik "force-async" musi być wyłączony.
Posiadanie atrybutu async content oczywiście oznacza, że skrypt będzie uruchamiany asynchronicznie. Spec language wydaje się pozostawić możliwość wymuszenia synchronicznego wykonania skryptu (poprzez ustawienie atrybutu, a następnie usunięcie go), ale w praktyce nie działa i jest prawdopodobnie tylko trochę niejasności w specyfikacji. Nie-Parser-wstawiane script elementy są asynchroniczne.
To określone zachowanie jest tym, co zawsze robiło IE i Chrome, Firefox robił od lat, a obecna Opera również robi (nie mam pojęcia, kiedy zmieniło się od starego zachowania w odpowiedzi linkowanej powyżej).
Łatwo przetestować:
var script = document.createElement("script");
script.src = "script.js";
console.log("a");
document.body.appendChild(script);
console.log("b");
...with script.js being
console.log("script loaded");
...will log
a b script loaded
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:54:16
Pytanie czy s.async = true ma zastosowanie do dynamicznie wstawianych skryptów, czy też są one ładowane asynchronicznie. Odpowiedź brzmi: nie są ładowane asynchronicznie we wszystkich przeglądarkach, jak wyjaśniono tutaj (dzięki Markusowi Olssonowi za link)
Skrypt-wstawione Skrypty działają asynchronicznie w IE i WebKit, ale synchronicznie w Operze i Firefoksie sprzed 4.0. W Firefoksie 4.0 właściwość async DOM ma wartość true dla skryptów tworzonych przez skrypty, więc domyślne zachowanie pasuje do zachowania IE i WebKit.
W przeglądarkach, które obsługują async, ale nie domyślnie ładują się asynchronicznie (na przykład Firefox 3.6), async = true robi różnicę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-16 02:32:23
Ciekawe - wydaje mi się, że się myliłem w swoich założeniach.
Na podstawie tego wątku na forum programistów jQuery:
Http://forum.jquery.com/topic/jquery-ajax-async-vs-html5-script-async
Wygląda na to, że właściwość async ma wpływ na dynamicznie dołączane Skrypty, przynajmniej w Firefoksie (i potencjalnie w Operze, chociaż nie obsługuje jeszcze tej właściwości).
Wątek na forum również cytuje Google ' a asynchroniczna implementacja kodu śledzącego, która, choć wydaje się, że korzysta z właściwości async w odpowiednim kontekście, w rzeczywistości wydaje się źle interpretować składnię. Google używa:
ga.async = true;
Gdy widocznie to nie działa; właściwą metodą byłoby użycie albo:
ga.async = 'async';
Lub
ga.setAttribute('async', 'async');
W związku z tym, opierając się na moim obecnym zrozumieniu, nie wszystkie przeglądarki będą uruchamiać dynamicznie dołączane Skrypty natychmiast po ich wstawieniu do DOM we wszystkich przypadkach; Firefox (i ostatecznie Opera) będzie potrzebowała właściwości async, aby mieć pewność, że tak się zawsze stanie.
Więcej informacji na temat implementacji Firefoksa async Tutaj:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-08-11 11:02:10
Wierzę, że masz rację.
W własne przykłady Steve nie ustawia atrybutu async przed dołączeniem znacznika script do elementu head.
Moje zrozumienie asynchronicznego atttribute jest takie, że jest to sposób sygnalizowania przeglądarce, że nie zamierzasz manipulować stroną za pomocą dokumentu.napisz, aby mógł kontynuować renderowanie zamiast zatrzymywać Ładowanie skryptu. Zobacz dokumentację dla elementu skryptu w mdc , który zawiera trochę więcej o dokumencie.napisz / asynchroniczne problemy.
Zauważ, że w swojej technice nie powinieneś używać dokumentu.pisz tak czy inaczej, ponieważ nie masz możliwości poznania, gdzie w życiu strony zostanie załadowany Twój skrypt.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-08-05 01:14:55