Zrobiłem kilka projektów internetowych, ale nie myślę za dużo o sekwencji ładowania i wykonania zwykłej strony internetowej. Ale teraz muszę znać szczegóły. Trudno jest znaleźć odpowiedzi od Google lub SO, więc stworzyłem to pytanie.
Przykładowa strona wygląda następująco:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="abc.js" type="text/javascript">
</script>
<link rel="stylesheets" type="text/css" href="abc.css"></link>
<style>h2{font-wight:bold;}</style>
<script>
$(document).ready(function(){
$("#img").attr("src", "kkk.png");
});
</script>
</head>
<body>
<img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
<script src="kkk.js" type="text/javascript"></script>
</body>
</html>
Oto moje pytania:
- Jak ładuje się ta strona?
- Jaka jest sekwencja ładowania?
- Kiedy wykonywany jest kod JS? (wbudowany i zewnętrzny)
- Kiedy wykonywany jest CSS (stosowany)?
- Kiedy $ (dokument). Już został wykonany?
- Czy abc.jpg zostanie pobrany? A może po prostu pobiera kkk.png?
Mam następujące zrozumienie:
- Przeglądarka najpierw ładuje HTML (DOM).
- Przeglądarka zaczyna ładować zasoby zewnętrzne od góry do dołu, linia po linii.
- Jeśli a
<script>
zostanie spełnione, ładowanie zostanie zablokowane i poczekaj, aż plik JS zostanie załadowany i wykonany, a następnie kontynuuj. - Inne zasoby (CSS / obrazy) są ładowane równolegle i wykonywane w razie potrzeby (np. CSS).
A może tak to wygląda:
Przeglądarka analizuje HTML (DOM) i pobiera zasoby zewnętrzne w formie tablicy lub stosu. Po załadowaniu html przeglądarka zaczyna równolegle ładować zasoby zewnętrzne do struktury i uruchamiać je, dopóki wszystkie zasoby nie zostaną załadowane. Następnie DOM zostanie zmieniony zgodnie z zachowaniami użytkownika w zależności od JS.
Czy ktoś może szczegółowo wyjaśnić, co się stanie, gdy otrzymasz odpowiedź strony HTML? Czy różni się to w różnych przeglądarkach? Wszelkie odniesienia do tego pytania?
Dzięki.
EDYTOWAĆ:
Zrobiłem eksperyment w Firefoksie z Firebug. I pokazuje następujący obraz:
źródło
Odpowiedzi:
Zgodnie z twoją próbką
z grubsza wykonanie przebiega w następujący sposób:
<script src="jquery.js" ...
jquery.js
jest pobierany i analizowany<script src="abc.js" ...
abc.js
jest pobierany, analizowany i uruchamiany<link href="abc.css" ...
abc.css
jest pobierany i analizowany<style>...</style>
<script>...</script>
<img src="abc.jpg" ...
abc.jpg
jest pobierany i wyświetlany<script src="kkk.js" ...
kkk.js
jest pobierany, analizowany i uruchamianyPamiętaj, że pobieranie może być asynchroniczne i nieblokujące ze względu na zachowanie przeglądarki. Na przykład w przeglądarce Firefox jest to ustawienie, które ogranicza liczbę jednoczesnych żądań na domenę.
Zależnie od tego, czy komponent został już buforowany, czy nie, może nie zostać ponownie zażądany w najbliższym żądaniu. Jeśli komponent został buforowany, zostanie on załadowany z pamięci podręcznej zamiast z rzeczywistego adresu URL.
Po zakończeniu analizowania, gdy dokument jest gotowy i załadowany, zdarzenia
onload
są uruchamiane. Tak więc poonload
zwolnieniu$("#img").attr("src","kkk.png");
jest uruchamiany. Więc:$("#img").attr("src", "kkk.png");
kkk.png
jest pobierany i ładowany do#img
$(document).ready()
Wydarzenie jest rzeczywiście wydarzenie zwolniony, gdy wszystkie elementy strony są załadowane i gotowe. Przeczytaj więcej na ten temat: http://docs.jquery.com/Tutorials:Introducing_$ (dokument) .ready ()Edycja - ta część omawia bardziej szczegółowo część równoległą lub nie:
Domyślnie iz mojego obecnego stanu wiedzy przeglądarka zwykle uruchamia każdą stronę na 3 sposoby: parser HTML, Javascript / DOM i CSS.
Analizator składni HTML jest odpowiedzialny za parsowanie i interpretację języka znaczników, a zatem musi mieć możliwość wykonywania połączeń z pozostałymi 2 komponentami.
Na przykład, gdy parser natrafi na tę linię:
Analizator składni wykona 3 połączenia, dwa do Javascript i jedno do CSS. Po pierwsze, analizator składni utworzy ten element i zarejestruje go w przestrzeni nazw DOM wraz ze wszystkimi atrybutami związanymi z tym elementem. Po drugie, analizator składni wywoła zdarzenie onclick z tym konkretnym elementem. Na koniec wykona kolejne wywołanie wątku CSS, aby zastosować styl CSS do tego konkretnego elementu.
Wykonanie jest z góry na dół i jednowątkowe. JavaScript może wyglądać na wiele wątków, ale faktem jest, że JavaScript jest jednowątkowy. Dlatego podczas ładowania zewnętrznego pliku javascript parsowanie głównej strony HTML jest zawieszone.
Pliki CSS można jednak pobierać jednocześnie, ponieważ reguły CSS są zawsze stosowane - co oznacza, że elementy są zawsze odświeżane zgodnie z najświeższymi zdefiniowanymi regułami CSS - w ten sposób odblokowując je.
Element będzie dostępny w modelu DOM dopiero po jego przeanalizowaniu. Dlatego podczas pracy z określonym elementem skrypt jest zawsze umieszczany po zdarzeniu onload okna lub w nim.
Taki skrypt spowoduje błąd (w jQuery):
Ponieważ podczas analizowania skryptu
#mydiv
element nadal nie jest zdefiniowany. Zamiast tego działałoby:LUB
źródło
<script>
zablokuje inne komponenty, prawda? Wszelkie odniesienia do specyfikacji do każdej przeglądarki?1) HTML jest pobierany.
2) HTML jest analizowany stopniowo. Po otrzymaniu żądania zasobu przeglądarka podejmie próbę pobrania zasobu. Domyślną konfiguracją większości serwerów HTTP i większości przeglądarek jest przetwarzanie tylko dwóch żądań równolegle. IE można ponownie skonfigurować tak, aby pobierał nieograniczoną liczbę zasobów równolegle. Steve Souders był w stanie pobrać ponad 100 żądań równolegle na IE. Wyjątkiem jest to, że żądania skryptu blokują równoległe żądania zasobów w IE. Dlatego zaleca się umieszczenie całego JavaScript w zewnętrznych plikach JavaScript i umieszczenie żądania tuż przed tagiem zamykającym ciało w HTML.
3) Po przeanalizowaniu HTML DOM jest renderowany. CSS jest renderowany równolegle z renderowaniem DOM w prawie wszystkich klientach użytkownika. W związku z tym zdecydowanie zaleca się umieszczenie całego kodu CSS w zewnętrznych plikach CSS, które są wymagane jak najwyżej w sekcji <head> </head> dokumentu. W przeciwnym razie strona jest renderowana do wystąpienia pozycji żądania CSS w DOM, a następnie renderowanie rozpoczyna się od góry.
4) Dopiero po całkowitym renderowaniu modelu DOM i rozwiązaniu żądań wszystkich zasobów na stronie lub przekroczeniu limitu czasu JavaScript wykonuje się po zdarzeniu onload. IE7, i nie jestem pewien co do IE8, nie przeterminowuje zasobów szybko, jeśli odpowiedź HTTP nie zostanie odebrana z żądania zasobu. Oznacza to, że zasób żądany przez JavaScript bezpośrednio na stronie, czyli JavaScript zapisany w tagach HTML, który nie jest zawarty w funkcji, może uniemożliwić wykonanie zdarzenia onload przez wiele godzin. Ten problem można uruchomić, jeśli taki wbudowany kod istnieje na stronie i nie zostanie wykonany z powodu kolizji przestrzeni nazw, która powoduje awarię kodu.
Z powyższych kroków najbardziej obciążającym CPU jest parsowanie DOM / CSS. Jeśli chcesz, aby twoja strona była przetwarzana szybciej, napisz efektywny CSS, eliminując zbędne instrukcje i konsolidując instrukcje CSS w jak najmniejszej liczbie odwołań do elementów. Zmniejszenie liczby węzłów w drzewie DOM spowoduje również szybsze renderowanie.
Pamiętaj, że każdy zasób, o który prosisz z kodu HTML, a nawet z zasobów CSS / JavaScript, jest wymagany z osobnym nagłówkiem HTTP. To zużywa przepustowość i wymaga przetwarzania na żądanie. Jeśli chcesz, aby strona ładowała się tak szybko, jak to możliwe, zmniejsz liczbę żądań HTTP i zmniejsz rozmiar HTML. Użytkownikowi nie sprzyja żadna przysługa, uśredniając wagę strony na poziomie 180 tys. Od samego HTML. Wielu programistów zgadza się z pewnym błędem, że użytkownik decyduje o jakości treści na stronie w ciągu 6 nanosekund, a następnie usuwa zapytanie DNS z serwera i spala komputer, jeśli jest niezadowolony, więc zamiast tego zapewniają najpiękniejszą stronę na 250k HTML. Zadbaj o krótki i słodki kod HTML, aby użytkownik mógł szybciej ładować strony.
źródło
Otwórz swoją stronę w przeglądarce Firefox i pobierz dodatek HTTPFox. Powie ci wszystko, czego potrzebujesz.
Znaleziono to na archivist.incuito:
http://archivist.incutio.com/viewlist/css-discuss/76444
źródło
Jeśli pytasz o to, ponieważ chcesz przyspieszyć swoją stronę internetową, sprawdź stronę Yahoo na temat najlepszych praktyk przyśpieszania swojej strony internetowej . Zawiera wiele sprawdzonych metod przyspieszania witryny.
źródło
AFAIK, przeglądarka (przynajmniej Firefox) żąda każdego zasobu, gdy tylko go przeanalizuje. Jeśli napotka tag img, zażąda tego obrazu, jak tylko parsowany zostanie tag img. I to może być nawet zanim otrzyma całość dokumentu HTML ... to znaczy, że nadal może to być pobieranie dokumentu HTML, kiedy to się stanie.
W przypadku przeglądarki Firefox obowiązują kolejki przeglądarki, w zależności od tego, jak są ustawione w about: config. Na przykład nie będzie próbował pobrać więcej niż 8 plików jednocześnie z tego samego serwera ... dodatkowe żądania zostaną umieszczone w kolejce. Sądzę, że istnieją limity na domenę, na proxy i inne rzeczy, które są udokumentowane na stronie Mozilli i można je ustawić w about: config. Czytałem gdzieś, że IE nie ma takich ograniczeń.
Zdarzenie gotowości jQuery jest uruchamiane, gdy tylko główny dokument HTML zostanie pobrany i parsowany DOM. Następnie zdarzenie ładowania jest uruchamiane po pobraniu i przeanalizowaniu wszystkich połączonych zasobów (CSS, obrazy itp.). Jest to wyjaśnione w dokumentacji jQuery.
Jeśli chcesz kontrolować kolejność, w której wszystko jest ładowane, uważam, że najbardziej wiarygodnym sposobem jest JavaScript.
źródło
Dynatrace AJAX Edition pokazuje dokładną sekwencję ładowania, analizowania i wykonywania strony.
źródło
Wygląda na to, że wybrana odpowiedź nie dotyczy nowoczesnych przeglądarek, przynajmniej w przeglądarce Firefox 52. Zauważyłem, że żądania ładowania zasobów takich jak css, javascript są wydawane, zanim parser HTML dotrze do elementu, na przykład
Odkryłem, że czas rozpoczęcia żądań załadowania zasobów css i javascript nie był blokowany. Wygląda na to, że Firefox ma skan HTML i identyfikuje kluczowe zasoby (zasób img nie jest dołączony) przed rozpoczęciem analizowania HTML.
źródło