Ładowanie i Sekwencja wykonania strony www?

1) HTML jest pobierany.

2) HTML jest przetwarzany stopniowo. Po otrzymaniu żądania o zasób przeglądarka spróbuje pobrać zasób. Domyślną konfiguracją dla 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ć, aby pobrać 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ą zasób równoległy wnioski w IE. Dlatego zaleca się umieszczanie wszystkich JavaScript w zewnętrznych plikach JavaScript i umieszczanie żądania tuż przed zamykającym znacznikiem body w HTML.

3) po przetworzeniu HTML DOM jest renderowany. CSS jest renderowany równolegle do renderowania DOM w prawie wszystkich agentach użytkowników. W rezultacie zdecydowanie zaleca się umieszczanie całego kodu CSS w zewnętrznych plikach CSS, które są wymagane jak najwyżej w sekcji

4) dopiero gdy DOM jest całkowicie renderowany i żądania wszystkich zasobów na stronie są albo rozwiązane, albo time out wykonuje JavaScript ze zdarzenia onload. IE7 i nie jestem pewien co do IE8, nie wyłącza zasobów szybko, jeśli odpowiedź HTTP nie zostanie odebrana z żądania zasobów. Oznacza to zasób żądany przez JavaScript inline do strony, czyli JavaScript zapisany do znaczników HTML, który nie jest zawarty w funkcji, może uniemożliwić wykonanie zdarzenia onload na wiele godzin. Ten problem może zostać wywołany, jeśli taki kod wbudowany 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 skuteczny CSS, eliminując zbędne instrukcje i konsolidując Instrukcje CSS do jak najmniejszej liczby możliwych odniesień do elementów. Zmniejszenie liczby węzłów w drzewie DOM spowoduje również szybsze renderowanie.

Należy pamiętać, że każdy zasób żądany z kodu HTML lub nawet z zasobów CSS/JavaScript jest żądany z osobnym nagłówkiem HTTP. To zużywa przepustowość i wymaga przetwarzania na żądanie. Jeśli chcesz, aby Twoja strona załadowała się tak szybko, jak to możliwe, zmniejsz liczbę żądań HTTP i zmniejsz rozmiar HTML. Jesteś nie robisz żadnych korzyści dla użytkownika, uśredniając wagę strony na 180K z samego HTML. Wielu programistów subskrybuje pewien błąd, że użytkownik decyduje się na jakość treści na stronie w 6 nanosekund, a następnie oczyszcza zapytanie DNS ze swojego serwera i spala komputer, jeśli jest niezadowolony, więc zamiast tego zapewniają najpiękniejszą możliwą stronę w 250K HTML. Zachowaj swój HTML krótki i słodki, aby użytkownik mógł szybciej ładować strony. Nic nie poprawia wrażenia użytkownika jak szybka i responsywna strona internetowa.

Otwórz stronę w Firefoksie i pobierz dodatek HTTPFox. Powie Ci wszystko, czego potrzebujesz.

Znalazłem to na archiwum.incuito:

Http://archivist.incutio.com/viewlist/css-discuss/76444

Kiedy po raz pierwszy poprosisz o stronę, Twój przeglądarka wysyła żądanie GET do serwera, który zwraca HTML do przeglądarka. Przeglądarka następnie uruchamia się parsowanie strony (prawdopodobnie przed wszystkimi z niego został zwrócony).

Gdy znajdzie odniesienie do na zewnętrzny podmiot, taki jak plik CSS, plik graficzny, plik skryptu, Flash plik, lub cokolwiek innego zewnętrznego do strony (albo na tej samej serwera/domeny czy nie), przygotowuje się do złóż kolejną prośbę o to zasoby.

Jednakże standard HTTP określa że przeglądarka nie powinna więcej niż dwa równoczesne wnioski do ta sama domena. Więc stawia każde żądanie do określonej domeny w kolejce, a gdy każdy obiekt jest zwracany, rozpoczyna się na następny w kolejce po to domena.

Czas potrzebny byt był zwracany zależy od jego wielkości, załaduj serwer jest aktualnie doświadczanie, a działalność każda maszyna pomiędzy maszyna uruchamiająca przeglądarkę i serwer. Lista tych maszyn mogą w zasadzie być różne dla każda prośba, o ile jedna obraz może podróżować z USA do mnie w Wielkiej Brytanii nad Atlantykiem, podczas gdy inny z tego samego serwera wychodzi przez Pacyfik, Azję i Europę, co trwa dłużej. Więc możesz dostać Sekwencja jak poniżej, gdzie a strona ma (w tej kolejności) odnośniki do trzech plików skryptów i pięciu obrazów pliki, Wszystkie o różnej wielkości:

1. GET script1 and script2; queue request for script3 and images1-5.
2. pojawia się script2( jest mniejszy niż script1): GET script3, queue images1-5.
3. pojawia się script1; GET image1, queue images2-5.
4. image1 przybywa, GET image2, queue images3-5.
5. script3 nie dociera z powodu problemu z siecią-Pobierz script3 ponownie (automatyczna ponowna próba).
6. image2 przybywa, script3 nadal nie ma; Pobierz image3, kolejkuj images4-5.
7. pojawia się obraz 3; GET image4, queue image5, script3 nadal w drodze.
8. image4 przybywa, GET image5;
9. image5 przybywa.
10. script3 przybywa.

W skrócie: każdy stary porządek, w zależności od co do ... serwer robi, co reszta Internetu robi, a czy coś ma błędy i trzeba je ponownie ściągnąć. To może / align = "left" / rzeczy, ale to dosłownie być niemożliwe dla Internetu (nie tylko WWW) do pracy z dowolnym stopniem niezawodności, gdyby nie to sposób.

Również wewnętrzna Kolejka przeglądarki może nie pobierać encji w kolejności pojawiają się na stronie - nie jest to wymagane przez jakiekolwiek standard.

(Oh, I nie zapomnij buforowania, zarówno w przeglądarka i w buforowaniu proxy używane przez ISP, aby zmniejszyć obciążenie na sieć.)

Jeśli pytasz o to, ponieważ chcesz przyspieszyć swoją stronę internetową, sprawdź stronę Yahoo na Najlepsze praktyki dla przyspieszenia witryny internetowej . Ma wiele najlepszych praktyk, aby przyspieszyć swoją witrynę internetową.

Dynatrace AJAX Edition pokazuje dokładną sekwencję ładowania, parsowania i wykonywania strony.

AFAIK, przeglądarka (przynajmniej Firefox) żąda każdego Zasobu, gdy tylko go przetworzy. Jeśli napotka znacznik img, zażąda tego obrazu natychmiast po przetworzeniu znacznika img. I to może być nawet zanim otrzyma całość dokumentu HTML... oznacza to, że nadal może pobierać dokument HTML, gdy tak się stanie.

Dla Firefoksa obowiązują kolejki przeglądarek, 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 na raz z tego samego serwera... dodatkowe żądania zostaną ustawione w kolejce. Myślę, że istnieją limity na domenę, limity na proxy i inne rzeczy, które są udokumentowane na stronie Mozilli i mogą być ustawione w about: config. Czytałem gdzieś, że IE nie ma takich ograniczeń.

Zdarzenie jQuery ready jest wywoływane jak tylko główny dokument HTML został pobrany i jest przetwarzany DOM. Następnie zdarzenie load jest wywołane po uruchomieniu wszystkich powiązanych zasobów (CSS, obrazów, itp.) zostały pobrano i przeanalizowano. Jest to jasne w dokumentacji jQuery.

Jeśli chcesz kontrolować kolejność, w jakiej wszystko jest ładowane, uważam, że najbardziej niezawodnym sposobem na to jest JavaScript.

Wybrana odpowiedź wygląda na to, że nie dotyczy nowoczesnych przeglądarek, przynajmniej na Firefoksie 52. Zauważyłem, że żądania ładowania zasobów takich jak css, javascript są wydawane zanim parser HTML dotrze do elementu, na przykład

<html>
  <head>
    <!-- prints the date before parsing and blocks HTMP parsering -->
    <script>
      console.log("start: " + (new Date()).toISOString());
      for(var i=0; i<1000000000; i++) {};
    </script>

    <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>

Co odkryłem, że czas rozpoczęcia żądań ładowania zasobów css i javascript nie był blokowany. Wygląda na to, że Firefox ma skanowanie HTML i identyfikuje kluczowe zasoby (zasób img nie jest dołączony) przed rozpoczęciem analizy HTML.