Brak HTML w "Wyświetl źródło strony"

Question

Cześć,

Z chęci rozwoju i ciekawości chciałem zadać Wam dość proste pytanie. Jak to jest robione, że np. na Facebooku, gdy klikniemy "Wyświetl źródło strony" pojawia nam się:

https://zapodaj.net/images/e360294a2f823.jpg

Nie widzę tu jakiejś logicznej struktury html. Pojawia się co prawda body, kilka divów, ale i tak nie wygląda mi to na html, który pozwalałby wyświetlać to co widzimy na ekranie. W jaki sposób to działa i jak generowane są pozostałe "krzaczki" niebędące htmlem na powyższym zrzucie ekranu?

Answer 1

To, co widzisz tutaj to zminifikowana strona html.

"Logiczna struktura" o której wspominasz pozwala na łatwe i proste ogarnięcie kodu strony, ale więcej waży.

Dlatego strony na które wchodzą miliony użytkowników używają modułów jak np. ten:

https://www.npmjs.com/package/html-minifier

lub bardziej skomplikowanych do minifikowania ich stron, by po prostu mniej ważyły i szybciej się wczytywały.

A "krzaczki" niebędące htmlem tutaj to nie załączone w <script src="tutaj link do pliku js"> zewnętrzne pliki javascript, ale w zamian tego wewnątrz tagu <script> podobnie jak zwykły html, poprostu zamieszczone na stronie kody javascript.

Język programowania javascript można powiedzieć, że jest w pewnym sensie wbudowany w html, bo wszystkie współczesne przeglądarki poprawnie obsługują js wewnątrz tagu <script>.

Podobnie można przecież zamieścić wewnątrz tagu <style> swoje style css, zamiast załączać osobny plik.

W ten sposób redukuje się ilość zapytań dla serwera, co także przyśpiesza wczytywanie się strony,

Można tak zamieścić nawet kody obrazków - zamiast załączać plik svg, można wewnątrz tagu <svg> zamieścić kod obrazka.

Dla stron takich jak facebook każdy bajt ma znaczenie, bo przy setkach milionów użytkowników oszczędności można liczyć w olbrzymich kwotach, jeśli chodzi o zużycie serwerów.

Tak też się ma z prędkością działania serwisów, która ma ogromny wpływ na użytkowników, a ich działania są źródłem zysku.

Answer 2

Nie widzę tu jakiejś logicznej struktury html.

A ja widzę. Są divy, spany, widzę tekst, widzę różne guziki. To, że to jest jeden wielki blok tekstu z kilkoma duzymi tagami <script>, nie zmienia faktu, że to wciąż normalny HTML. HTML generowany i wysyłany przez serwer przeglądarce nie musi być łatwo czytelny dla człowieka.

Jak chcesz graficznie zobaczyć strukturę, to może prościej jak otworzysz inspektor w devtoolsach przeglądarki?

Answer 3

To kod mieszany, pewnie html i różne elementy są w zmiennych w php, js itp.