Jakie zasoby zewnętrzne są ładowane po wywołaniu zdarzenia window.onload i jaka jest kolejność ładowania zasobów?

Ponieważ pojedyncza strona internetowa może zawierać wiele zewnętrznych zasobów: zewnętrzny javascript, zewnętrzny css, obrazy, aplety, flash itd., Zazwyczaj moja konwencjonalna mądrość mówi mi, że zdarzenie window.onload jest uruchamiane, gdy wszystkie połączone zasoby są zakończone pobieranie (chociaż zasoby zewnętrzne są zwykle pobierane w wielu wątkach lub procesach przez implementację przeglądarki). Zwykły przypadek może działać przez większość czasu. Ale ... co jeśli kolejność ładowania nie jest tym, co uważam za pewnik, jakiś błąd javascript może gdzieś i gdzieś się wkradnąć.Jakie zasoby zewnętrzne są ładowane po wywołaniu zdarzenia window.onload i jaka jest kolejność ładowania zasobów?

Po przeprowadzeniu wyszukiwania okazało się, że nie jest tak, jak zwykle myślę. Z tej strony: https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html, wygląda na to, że obrazy nie są ładowane po uruchomieniu zdarzenia onload. Ale stąd window.onload vs <body onload=""/>, wydaje mi się, że obrazy są ładowane po uruchomieniu ładowania. Jest więcej nieporozumień dla mnie z tego linku http://forums.mozillazine.org/viewtopic.php?f=25&t=413504&start=0&st=0&sk=t&sd=a.

Moja pierwsza część pytania brzmi: Czy wszystkie zasoby NAPRAWDĘ są ładowane po uruchomieniu window.onload?

Kolejna ściśle związana część pytania: Co to jest ładowanie zasobów przed uruchomieniem window.onload? Wiem, że dla zasobów wewnętrznych, takich jak wewnętrzny javascript lub css, kolejność ładowania jest od początku strony do dołu (chyba że w IE, użyj odroczonego skryptu, jak tutaj mówi Getting notified when the page DOM has loaded (but before window.onload)). Ale co z zewnętrznymi javascript i zasobami css? Na przykład, jeśli piszę moją stronę tak:

<external stylesheet...> 
<external javascript #1...> 
<external javascript #2...> 
<script> 
    ..... 
    window.onload=.... 
    </script>

Następnie zakładając funkcję w „zewnętrzne javascript # 2” wywołuje funkcję w „zewnętrzne javascript # 1”, mogę być pewien, że zawsze działa? Również jeśli window.onload wywołuje funkcję w "zewnętrznym javascript # 1" działa również zgodnie z oczekiwaniami?

Można powiedzieć, że sekwencja ładowania zasobów i kiedy należy uruchomić zdarzenie window.onload jest zależne od implementacji przeglądarki, jak podano tutaj What is the event precedence in JavaScript?. Ale nadal zastanawiam się, czy istnieje publiczna specyfikacja lub konwencja. Czy mógłbyś skierować mnie do zasobu lub powiedzieć mi fakty, by oczyścić moje zamieszanie?

Źródło

2009-01-23 jscoot

Zasoby skryptów są ładowane przed uruchomieniem przeładowania. Jednak ładuje się je w leniwym asynchronicznym trybie, niekoniecznie w kolejności, w jakiej są wymienione w dokumencie.

Odkryłem również co najmniej w IE, że nie wszystkie właściwości elementu DOM są poprawnie obliczane przy obciążeniu (np. Rozmiary klienta i przesunięcia mogą nadal wynosić 0, gdy powinny mieć wartość).

Źródło

2009-01-23 17:06:35 AnthonyWJones

Podany link SO jest nieco błędny; Przeładowanie ciała i przeładowanie okna wywołują te same ZDARZENIA, ale zdarzenia nie wystrzeliwują w tym samym czasie. Window.onload zostanie uruchomiony przed obciążeniem ciała w sposób opisany przez pierwszy zasób.

Ze względów interpretacyjnych przeglądarki żądają zasobów javascript w trybie szeregowym, ponieważ mogą zażądać wszystkich pozostałych elementów równolegle. Dlatego czasami ładujesz stronę, a obrazy ładują się nie w porządku, a javascript, z pominięciem okoliczności, o których wspomniałeś, ładuje w kolejności. Więc tak, zasoby zostaną załadowane.

Dodatkowo przeglądarki najpierw analizują funkcje js, więc nie powinieneś mieć problemów z wywołaniem funkcji zanim zostanie ona zdefiniowana jawnie. Jednak nie będzie to działać ze zmiennymi.

Ostatnia rzecz, CSS jest interpretowany z góry do dołu; niezależnie od tego, w jaki sposób są ładowane, przeglądarka interpretuje reguły zaczynające się od góry i kończące.

Źródło

2009-01-23 17:20:31 jacobangel

Sprawdź Cuzillion. Został napisany przez Steve'a Soudersa z zespołu wykonawczego Yahoo, aby dokładnie ocenić te rzeczy.

To, co sprowadza się do tego: Przeglądarki ładują skrypty w kolejności, w jakiej występują w dokumencie, a wszystkie inne ładowanie jest zatrzymywane podczas pobierania każdego skryptu. Inne zasoby (css/images) są ładowane asynchronicznie i nie można mieć pewności, kiedy zostaną ukończone.

Zdarzenie onload jest wywoływane, gdy dokument i jego zasoby skryptu/stylu/obrazu są załadowane, ale prawdopodobnie nie chcesz czekać na obrazy, jeśli robisz dowolny javascript podczas ładowania strony. Zamiast tego użyj czegoś takiego jak "gotowe" wydarzenie jQuery lub zwolnij własne zdarzenie "DOMReady", umieszczając znacznik skryptu na końcu ciała:

<body> 
    <!-- your page contents here --> 
    <script type="text/javascript"> 
     // DOM is ready, do scripty stuff now 
     DOMReady(); 
    </script> 
</body>

Źródło

2009-01-23 19:17:59 Prestaul

Jakie zasoby zewnętrzne są ładowane po wywołaniu zdarzenia window.onload i jaka jest kolejność ładowania zasobów?

Odpowiedz

Powiązane problemy