Процесс загрузки web страницы

  Рет қаралды 40,425

loftblog

loftblog

2 жыл бұрын

Марафоны, скидки, подарки и акции t.me/loftschool_bot
Данный ролик будет определенно полезен всем разработчикам до senior уровня, абсолютно всем менеджерам на технических продуктах или же просто любому человеку, кто хочет погрузиться детальнее в процесс загрузки Web - страницы. Рассмотрим шаги от получения IP адреса сервера до отрисовки конечного сайта, и важно отметить, что погрузимся в тему лишь структурно - для формирования общей картины данной истории. Но если вам будет интересно узнать что - то подробнее, то обязательно пишите в комментарии - как минимум мы сможем порекомендовать крутой материал по теме.

Пікірлер: 57
@user-qe5xe4jt5s
@user-qe5xe4jt5s 2 жыл бұрын
Большая их часть сосредоточена в Южной Америке, особенно в США 😆👍 В целом очень полезное видео, спасибо👌
@alexpro5670
@alexpro5670 2 жыл бұрын
Наверное в Северной :)
@ksai4721
@ksai4721 Жыл бұрын
@@alexpro5670 Наверное :)))
@procrastonationforever5521
@procrastonationforever5521 Жыл бұрын
@@ksai4721 Я тож первым делом это заметил и решил пойти написать коммент, но сначала поискал и таки да - уже кто-то тоже обратил внимание)))
@A_A_A182
@A_A_A182 Жыл бұрын
У меня музыка заиграла в голове из мема с черной рамочкой)
@BearVodkaAndValenki
@BearVodkaAndValenki Жыл бұрын
Одно из немногих видео, где чётко разъясняется как http-хэндшейк использует асимметричное шифрование и что за ним, для дальнейшего обмена данными, следует симметричное. Респект!
@atlantatesla9348
@atlantatesla9348 3 күн бұрын
Отличная подача, спасибо большое!
@user-vj8vc4pp9b
@user-vj8vc4pp9b 2 жыл бұрын
Было интересно! Спасибо ;)
@user-vs2cr2gs2w
@user-vs2cr2gs2w 10 ай бұрын
Ты единственный кто помог ине разобраться в этой теме, спасибо тебе
@user-ff3xu1bn9h
@user-ff3xu1bn9h 5 ай бұрын
Спасибо огромное!!! Вы лучший
@alexonprod_IT
@alexonprod_IT 8 ай бұрын
Божественный видос!!!🤜🤛
@alexpro5670
@alexpro5670 2 жыл бұрын
Спасибо за подробное видео. https, page rendering, interview questions, DNS, http request, page rendering
@user-hq1pq9ql3w
@user-hq1pq9ql3w 2 ай бұрын
Супер, кратко и ясно !!
@user-fg5cd3mv2z
@user-fg5cd3mv2z 8 ай бұрын
Большое спасибо!
@user-gq6tu4um7g
@user-gq6tu4um7g Ай бұрын
- Дорогой кэш, есть ли у тебя информация, где находится адрес сервера? 😁 - Извини, друг, у меня нет ничего.🤥 - Окей🥺
@AlexSht-ot4ls
@AlexSht-ot4ls 8 ай бұрын
4:00 root DNS серверов ровно 13 штук. не больше. связано с максимальной длинной пакета DNS запроса по стадарту, и в это пакет вмещается максимум 13 имен.
@user-ey2wx2fu7h
@user-ey2wx2fu7h 12 күн бұрын
Спасибо, очень полезно!
@user-hg5sc1yi8t
@user-hg5sc1yi8t Жыл бұрын
Огнормное спасибо. Все чётко и понятно
@brainman2125
@brainman2125 2 жыл бұрын
На собеседовании тебя могут спросить что угодно. потому что многие компании не могут определится какой уровень разработчика им нужен
@deniskolesnikov3697
@deniskolesnikov3697 2 жыл бұрын
не только разработчика)
@mrlinclose
@mrlinclose 2 жыл бұрын
Cool vidos, useful and interesting.
@VasiliyKolpaxidis
@VasiliyKolpaxidis Жыл бұрын
Крутое видео. Спасибо
@A_A_A182
@A_A_A182 Жыл бұрын
спасибо за информацию
@fokspoks
@fokspoks 11 ай бұрын
Ну, попробую я законспектировать всё это видео для себя; как я понял информацию из этого видео и как я буду объяснять её понимание на собеседованиях, если, конечно, меня будут спрашивать про это тему. Ок Юзер нажал на кнопку энтер, которая отправляет запрос браузеру на нахождение сайта, к которому хочет получить доступ юзер. Первое, что делает браузер - это нахождение самого сайта. Чтобы найти этот сайт, нужно воспользоваться DNS, который в свою очередь через цепочку некоторых действий должен найти наш сайт, в конечном счёте достав IP адрес сайта. После того, как DNS получил этот адрес, он передаёт его браузеру. То есть, коротко говоря, браузер нашёл связь с сайтом. Далее, браузеру нужно построить этот сайт и передать его юзеру. Первое действие здесь, это получение ресурсов сайта, с помощью которых и будет строиться сайт. Браузер соединяется с бэкендом сайта, и там, чаще всего, берёт index.html. Берёт он этот файл потому что почти всегда оно является корнем всей структуры сайта. К примеру, браузер видит ссылку на js файл в index.html, и запрашивает у сервера запрос на скачивание этого файла. Во время скачивания всех встречных файлов по этой цепочке, браузер также распарсивает их, то есть прочитывает. Отсюда браузер уже начинает строить одно из 3-х деревьев, которые будут помогать строить сайт. Первым деревом является DOM, то есть html всего сайта. Браузер находит html теги, далее нужно застайлить их. Для этого служит css, который в свою очередь будет строить второе дерево - CSSOM. Это почти тот же DOM, за исключением того, что CSSOM занимается только теми компонентами, которые нуждаются в стилистике. Другими словами, CSSOM - это дерево стилей, которые должны быть в сайте. Ок, браузер получил html(и) и css(ы) сайта. Теперь браузер должен начать подготовку к построению сайта. Для этого задействуется render tree. Это дерево, как я понял, которое отбрасывает всё ненужное и незадейственное во фронтенде сайта, и строит только цепочку действий. Действий, которые будут участвовать во фронтенде. Ок, сайт построил план действий по постройке сайта. Теперь осталось их обработать и разместить. Для этого оно использует layout positioning, или как оно там называется, и по пикселям строит план по размещению html компонентов по их задуманным местам. Следующим идёт план стилизаций этих компонентов. И в конечном итоге, всё это совмещается в одно действие, после чего наконец-то начинается стройка сайта. Построив сайт, браузер может отдать его юзеру. Ну, это как я понял. Можете где-то подправить или дополнить.
@toscaantosca4541
@toscaantosca4541 Жыл бұрын
Спасибо за видео! А в каком из этих этапов, к примеру, происходит отрисовка загруженных с сервера изображений? Уже после? И не сказано ничего про JS и его роль в этом процессе.
@user-yu9wg2ed7q
@user-yu9wg2ed7q 2 жыл бұрын
есть ли у вас видео про разницу отображения в разных браузерах? вроде как-то с движеом браузеров связано...?
@huaweihonor7a747
@huaweihonor7a747 6 ай бұрын
Сайт сделан на таблицах, интересно🤓
@user-wk9yd3hj9l
@user-wk9yd3hj9l 5 ай бұрын
Ооочень поверхностно
@protect-display
@protect-display 2 жыл бұрын
Окэй!
@feeler.2k
@feeler.2k 2 жыл бұрын
окай
@gurgen5217
@gurgen5217 7 ай бұрын
Пушка. спасибо. А что происходит если сайт в кэше всё есть?
@rumartru
@rumartru 2 жыл бұрын
Что мешает перехватить сертификат и ключ и использовать их при атаке?
@rumartru
@rumartru 2 жыл бұрын
@@vaxxxa Спасибо, хорошее объяснение.
@user-888azim-97
@user-888azim-97 2 жыл бұрын
сразу видно, комментарии не накручены 😂
@lorddregs4571
@lorddregs4571 2 жыл бұрын
Ребят я начал изучать HTML , как мне ускорить обучение , что конкретно нужно учить, я сейчас на тегах и атрибутах?
@MrMixEdition
@MrMixEdition 2 жыл бұрын
Заканчивать изучать html и css, и уже начать js
@lorddregs4571
@lorddregs4571 2 жыл бұрын
@@MrMixEdition а можно ли выучить html CSS за месяц
@gribas-netheren
@gribas-netheren 2 жыл бұрын
@@lorddregs4571 вполне
@Anri-rd2xk
@Anri-rd2xk 2 жыл бұрын
@@lorddregs4571 я изучал HTML/CSS около 1 - 1,5 месяца, так что вполне возможно). Но без платных курсов - смотрел туториалы на KZbin, статьи на просторах Интернета. Единственная проблема в самообучении - это возможное выгорание и незнание, что делать дальше, но это тоже поправимо)
@lorddregs4571
@lorddregs4571 2 жыл бұрын
@@Anri-rd2xk а можете дать совет какие именно нужно читать статьи?
@andrewkotov3234
@andrewkotov3234 9 ай бұрын
Загуглите есть развернутый ответ на Хабре
@HeyWhoTheFuckAreYou
@HeyWhoTheFuckAreYou 2 жыл бұрын
Если что США это Северная Америка
@danilafetisov356
@danilafetisov356 2 жыл бұрын
Вот это оговорился! Спасибо, что отметили!
@swave2720
@swave2720 11 ай бұрын
@@danilafetisov356 😮😮
@TheLevius
@TheLevius 7 ай бұрын
ничего себе ты вумный!
@user-bj8oe1gt3r
@user-bj8oe1gt3r 3 ай бұрын
Лучше бы написал что то умное по теме ролика
@iGotton
@iGotton 2 жыл бұрын
+
@andrewkotov3234
@andrewkotov3234 9 ай бұрын
Это уже и джунов тестировщиков срашивают
The World's Fastest Cleaners
00:35
MrBeast
Рет қаралды 79 МЛН
Айттыңба - істе ! | Synyptas 3 | 7 серия
21:55
kak budto
Рет қаралды 1,2 МЛН
SSL и TLS - в чем разница?
7:31
Merion Academy
Рет қаралды 94 М.
Жизненный цикл HTTP-запроса [HTTP Basics, 1]
28:26
КАК РАБОТАЕТ БРАУЗЕР?
45:23
Alek OS
Рет қаралды 107 М.