JavaScript: zdarzenia ładowania DOM, Sekwencja wykonania i $(document).gotowe()

Właśnie zdałem sobie sprawę, że brakuje mi podstawowej wiedzy o tym, co dokładnie dzieje się, gdy strona jest ładowana do przeglądarki.

Załóżmy, że mam taką strukturę: 

<head>

<script src="jquery.js" type="text/javascript"></script>
<script src="first.js" type="text/javascript"></script>
</head>
<body>
...
<script type="text/javascript" id="middle">
    // some more JS here...
</script>
...
<script src="last.js" type="text/javascript"></script>
</body>

Oto pytania, które mam:

  1. W jakiej kolejności rzeczy się dzieją? najpierw DOM, a następnie JS jest wykonywany, czy jest odwrotnie, czy jest jednocześnie (lub jak tylko pliki JS zakończą pobieranie, bez żadnego względu na DOM)? Wiem o tym. skrypty są ładowane w kolejności.

  2. Gdzie $(document).ready() pasuje? w zakładce Firebug ' S Net widzę Zdarzenie DOMContentLoaded oraz Zdarzenie load. Czy $(document).ready() jest wyzwalane po wywołaniu zdarzenia DOMContentLoaded? Nie mogłem znaleźć żadnych konkretnych informacji na ten temat(wszyscy tylko wspominają "kiedy DOM jest załadowany").

  3. Co dokładnie oznacza "gdy DOM jest załadowany"? Że cały HTML/JS został pobrany i przetworzony przez przeglądarkę? Czy tylko HTML?

  4. Jest następujący scenariusz możliwe: istnieje $(document).ready(), który wywołuje kod w last.js, ale działa przed ostatnim.js się załadował? Gdzie to najprawdopodobniej będzie (w first.js lub w bloku kodu inline)? Jak mogę zapobiec temu scenariuszowi?

Chcę pokazać, co się dzieje, kiedy i co zależy od czego (jeśli w ogóle).

Author: montrealist, 2009-08-20
Source

3 answers

Javascript jest wykonywany tak, jak jest widoczny. zazwyczaj przeglądarka przestaje analizować stronę, gdy tylko zobaczy znacznik <script>, pobiera i uruchamia skrypt, a następnie kontynuuje pracę. Dlatego często zaleca się umieszczanie znaczników <script> Na Dole: aby użytkownik nie miał pustej strony, podczas gdy przeglądarka czeka na pobranie skryptów.

Jednak, począwszy od Firefoksa 3.5, skrypty są pobierane w tle, podczas gdy reszta strony jest renderowana. W now-niezwykłe jeśli skrypt użyje document.write lub podobnego, Firefox utworzy kopię zapasową i przerysuje w razie potrzeby. Nie wydaje mi się, aby inne przeglądarki robiły to w tej chwili, ale nie zdziwiłbym się, gdyby to było dostępne, a IE przynajmniej obsługuje atrybut defer w tagu <script>, który odroczy Ładowanie skryptu do czasu załadowania strony.

DOMContentLoaded jest dokładnie taki: odpala się zaraz po załadowaniu DOM. Oznacza to, że gdy tylko przeglądarka przetworzy cały HTML i utworzy jego drzewo wewnętrznie. Informatyka nie czeka na obrazki, CSS itp. załadować. DOM to wszystko, czego zwykle potrzebujesz, aby uruchomić dowolny Javascript, więc dobrze jest nie czekać na inne zasoby. Jednak wierzę, że tylko Firefox obsługuje DOMContentLoaded; w innych przeglądarkach, ready() po prostu dołączy Zdarzenie do zwykłego starego onload.

Javascript jest gwarantowany, aby działać w kolejności, w jakiej pojawia się w HTML, więc upewnij się, że funkcja jest zdefiniowana, zanim spróbujesz dołączyć ją do zdarzenia.

 39
Author: Eevee,
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
2009-08-20 18:26:03
  1. wszystkie skrypty zawierają się w kolejności, w jakiej pojawiają się w html, są ładowane podczas parsowania html.
  2. oznacza to, że wszystkie obiekty dom zostały załadowane, a wszystkie zawierają skrypty i css. (Zdjęcia może jeszcze nie).
  3. patrz 2.
  4. $(Dokument).ready () wywołuje tylko po załadowaniu wszystkich skryptów i obiektów dom, powinno być dobrze.
 7
Author: Zoidberg,
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
2009-08-20 18:18:38

Http://javascript.about.com/od/hintsandtips/a/exeorder.htm powinno pomóc ci odpowiedzieć

Zasadniczo: najpierw załadowane są wszystkie dane (html), następnie js kod w obrębie głowy/ciała, który nie jest w funkcji lub gotowy lub coś w tym stylu, jest wykonywany jako pierwszy. stamtąd chodzi o Skrypty kolejno

Ważne jest, aby pamiętać, że js ma pierwszeństwo przed ie. Ładowanie css - tak więc z perspektywy wydajności powinieneś mieć js na dole strona.

So @ 4 :nie musisz zapobiegać temu scenarionowi, ponieważ najpierw.js jest zawsze czytany / wykonywany przed ostatnim.js

 4
Author: Niko,
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
2009-08-20 18:21:11