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

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

Комментарии • 64

  • @user-qe5xe4jt5s
    @user-qe5xe4jt5s 2 года назад +65

    Большая их часть сосредоточена в Южной Америке, особенно в США 😆👍
    В целом очень полезное видео, спасибо👌

    • @alexpro5670
      @alexpro5670 2 года назад +3

      Наверное в Северной :)

    • @ksai4721
      @ksai4721 2 года назад +2

      @@alexpro5670 Наверное :)))

    • @procrastonationforever5521
      @procrastonationforever5521 2 года назад +1

      @@ksai4721 Я тож первым делом это заметил и решил пойти написать коммент, но сначала поискал и таки да - уже кто-то тоже обратил внимание)))

    • @A_A_A182
      @A_A_A182 Год назад

      У меня музыка заиграла в голове из мема с черной рамочкой)

  • @BearVodkaAndValenki
    @BearVodkaAndValenki Год назад +18

    Одно из немногих видео, где чётко разъясняется как http-хэндшейк использует асимметричное шифрование и что за ним, для дальнейшего обмена данными, следует симметричное. Респект!

  • @user-vs2cr2gs2w
    @user-vs2cr2gs2w Год назад +5

    Ты единственный кто помог ине разобраться в этой теме, спасибо тебе

  • @brainman2125
    @brainman2125 3 года назад +33

    На собеседовании тебя могут спросить что угодно. потому что многие компании не могут определится какой уровень разработчика им нужен

    • @dennykolesnikov
      @dennykolesnikov 2 года назад +1

      не только разработчика)

  • @AlexSht-ot4ls
    @AlexSht-ot4ls Год назад +8

    4:00 root DNS серверов ровно 13 штук. не больше. связано с максимальной длинной пакета DNS запроса по стадарту, и в это пакет вмещается максимум 13 имен.

  • @fokspoks
    @fokspoks Год назад +6

    Ну, попробую я законспектировать всё это видео для себя; как я понял информацию из этого видео и как я буду объяснять её понимание на собеседованиях, если, конечно, меня будут спрашивать про это тему. Ок
    Юзер нажал на кнопку энтер, которая отправляет запрос браузеру на нахождение сайта, к которому хочет получить доступ юзер.
    Первое, что делает браузер - это нахождение самого сайта. Чтобы найти этот сайт, нужно воспользоваться DNS, который в свою очередь через цепочку некоторых действий должен найти наш сайт, в конечном счёте достав IP адрес сайта. После того, как DNS получил этот адрес, он передаёт его браузеру.
    То есть, коротко говоря, браузер нашёл связь с сайтом.
    Далее, браузеру нужно построить этот сайт и передать его юзеру. Первое действие здесь, это получение ресурсов сайта, с помощью которых и будет строиться сайт. Браузер соединяется с бэкендом сайта, и там, чаще всего, берёт index.html. Берёт он этот файл потому что почти всегда оно является корнем всей структуры сайта. К примеру, браузер видит ссылку на js файл в index.html, и запрашивает у сервера запрос на скачивание этого файла. Во время скачивания всех встречных файлов по этой цепочке, браузер также распарсивает их, то есть прочитывает. Отсюда браузер уже начинает строить одно из 3-х деревьев, которые будут помогать строить сайт. Первым деревом является DOM, то есть html всего сайта. Браузер находит html теги, далее нужно застайлить их. Для этого служит css, который в свою очередь будет строить второе дерево - CSSOM. Это почти тот же DOM, за исключением того, что CSSOM занимается только теми компонентами, которые нуждаются в стилистике. Другими словами, CSSOM - это дерево стилей, которые должны быть в сайте.
    Ок, браузер получил html(и) и css(ы) сайта. Теперь браузер должен начать подготовку к построению сайта. Для этого задействуется render tree. Это дерево, как я понял, которое отбрасывает всё ненужное и незадейственное во фронтенде сайта, и строит только цепочку действий. Действий, которые будут участвовать во фронтенде.
    Ок, сайт построил план действий по постройке сайта. Теперь осталось их обработать и разместить. Для этого оно использует layout positioning, или как оно там называется, и по пикселям строит план по размещению html компонентов по их задуманным местам. Следующим идёт план стилизаций этих компонентов. И в конечном итоге, всё это совмещается в одно действие, после чего наконец-то начинается стройка сайта. Построив сайт, браузер может отдать его юзеру.
    Ну, это как я понял. Можете где-то подправить или дополнить.

  • @МарияЛебедева-ю7э
    @МарияЛебедева-ю7э 10 месяцев назад +2

    Спасибо огромное!!! Вы лучший

  • @user-hq1pq9ql3w
    @user-hq1pq9ql3w 7 месяцев назад +1

    Супер, кратко и ясно !!

  • @Дмитрий_Секрет
    @Дмитрий_Секрет 3 года назад +4

    Было интересно! Спасибо ;)

  • @atlantatesla9348
    @atlantatesla9348 4 месяца назад

    Отличная подача, спасибо большое!

  • @alexonprod_IT
    @alexonprod_IT Год назад +1

    Божественный видос!!!🤜🤛

  • @alexpro5670
    @alexpro5670 2 года назад

    Спасибо за подробное видео. https, page rendering, interview questions, DNS, http request, page rendering

  • @toscaantosca4541
    @toscaantosca4541 2 года назад +2

    Спасибо за видео!
    А в каком из этих этапов, к примеру, происходит отрисовка загруженных с сервера изображений? Уже после? И не сказано ничего про JS и его роль в этом процессе.

  • @Danze_lite
    @Danze_lite 4 месяца назад

    Спасибо, очень полезно!

  • @protect-display
    @protect-display 3 года назад +8

    Окэй!

  • @user-ni9wj8tr2v
    @user-ni9wj8tr2v 4 месяца назад

    Огромное спасибо!

  • @user-hg5sc1yi8t
    @user-hg5sc1yi8t Год назад +1

    Огнормное спасибо. Все чётко и понятно

  • @huaweihonor7a747
    @huaweihonor7a747 10 месяцев назад +1

    Сайт сделан на таблицах, интересно🤓

  • @sanbuz
    @sanbuz Месяц назад

    Спасибо

  • @mrlinclose
    @mrlinclose 3 года назад +1

    Cool vidos, useful and interesting.

  • @HeyWhoTheFuckAreYou
    @HeyWhoTheFuckAreYou 3 года назад +36

    Если что США это Северная Америка

    • @danilafetisov356
      @danilafetisov356 3 года назад +4

      Вот это оговорился! Спасибо, что отметили!

    • @swave2720
      @swave2720 Год назад

      @@danilafetisov356 😮😮

    • @TheLevius
      @TheLevius 11 месяцев назад +1

      ничего себе ты вумный!

    • @ВладЛитвин-с6д
      @ВладЛитвин-с6д 7 месяцев назад

      Лучше бы написал что то умное по теме ролика

  • @Todortodorov62
    @Todortodorov62 Месяц назад

    nice!

  • @АртурКравченко-х2б
    @АртурКравченко-х2б 6 месяцев назад +1

    - Дорогой кэш, есть ли у тебя информация, где находится адрес сервера? 😁
    - Извини, друг, у меня нет ничего.🤥
    - Окей🥺

  • @VasiliyKolpaxidis
    @VasiliyKolpaxidis Год назад

    Крутое видео. Спасибо

  • @rumartru
    @rumartru 3 года назад +4

    Что мешает перехватить сертификат и ключ и использовать их при атаке?

    • @rumartru
      @rumartru 3 года назад +2

      @@vaxxxa Спасибо, хорошее объяснение.

  • @user-yu9wg2ed7q
    @user-yu9wg2ed7q 2 года назад +1

    есть ли у вас видео про разницу отображения в разных браузерах? вроде как-то с движеом браузеров связано...?

  • @user-wk9yd3hj9l
    @user-wk9yd3hj9l 10 месяцев назад +1

    Ооочень поверхностно

  • @A_A_A182
    @A_A_A182 Год назад

    спасибо за информацию

  • @sergeantskeleton7392
    @sergeantskeleton7392 Месяц назад

    И на собеседовании такие: "Так, у нас мало времени, давайте перейдём к следующему вопросу. Как работает Garbage Collector?"

  • @user-in4sj3ri8j
    @user-in4sj3ri8j 2 месяца назад

    А как же поиск ip адреса в кеше самой ОС?

  • @user-888azim-97
    @user-888azim-97 2 года назад +2

    сразу видно, комментарии не накручены 😂

  • @gurgen5217
    @gurgen5217 11 месяцев назад

    Пушка. спасибо. А что происходит если сайт в кэше всё есть?

  • @lorddregs4571
    @lorddregs4571 3 года назад +2

    Ребят я начал изучать HTML , как мне ускорить обучение , что конкретно нужно учить, я сейчас на тегах и атрибутах?

    • @MrMixEdition
      @MrMixEdition 3 года назад +6

      Заканчивать изучать html и css, и уже начать js

    • @lorddregs4571
      @lorddregs4571 3 года назад

      @@MrMixEdition а можно ли выучить html CSS за месяц

    • @gribas-netheren
      @gribas-netheren 3 года назад +1

      @@lorddregs4571 вполне

    • @Anri-rd2xk
      @Anri-rd2xk 3 года назад +2

      @@lorddregs4571 я изучал HTML/CSS около 1 - 1,5 месяца, так что вполне возможно). Но без платных курсов - смотрел туториалы на RUclips, статьи на просторах Интернета. Единственная проблема в самообучении - это возможное выгорание и незнание, что делать дальше, но это тоже поправимо)

    • @lorddregs4571
      @lorddregs4571 3 года назад +1

      @@Anri-rd2xk а можете дать совет какие именно нужно читать статьи?

  • @user-in4sj3ri8j
    @user-in4sj3ri8j 2 месяца назад

    "... в Южной Америке, особенно в США )))"

  • @andrewkotov3234
    @andrewkotov3234 Год назад

    Загуглите есть развернутый ответ на Хабре

  • @andrewkotov3234
    @andrewkotov3234 Год назад

    Это уже и джунов тестировщиков срашивают

  • @nikivanov6900
    @nikivanov6900 11 дней назад

    Зае... ли такие объяснения на пальцах. Бестолковые. Потому как работа сервисов ОС не раскрыта.

  • @iGotton
    @iGotton 3 года назад

    +

  • @user-fg5cd3mv2z
    @user-fg5cd3mv2z Год назад

    Большое спасибо!