«Вопрос для интервью» Введите URL-адрес, чтобы отобразить исчерпывающую сводку

Знать

Эта статья — вопрос для интервью, а не просто вопрос для интервью.

Поскольку он достаточно классический, я написал три поста подряд, каждый из десятков тысяч слов, но я все еще чувствую, что он недостаточно подробен. многогранный тест.Если вы позволите мне прийти на собеседование, я думаю, что через этот вопрос можно откопать базовый запас знаний интервьюируемого, а пластичность супер сильная

Таким образом, правильный ответ может произвести впечатление на интервьюера и сделать вас уникальным.

Данная статья носит краткий характер.Для тех,кто не читал первых двух статей,рекомендуется сначала прочитать ее,потом обобщить и обобщить самостоятельно,а потом прочитать эту статью,потому что первые две статьи были написаны для того,чтобы понять эта статья.

«Вопрос для интервью» Ввод URL-адреса для комплексного рендеринга — сетевое общение

«Вопрос для интервью» Ввод URL-адреса в комплексный обзор рендеринга — рендеринг страницы

Если вы все это прочитали, то давайте подытожим. Прежде всего, пожалуйста, поставьте лайк моему сумасшедшему коду перед просмотром. Скорость набора текста в последнее время была намного выше 😄

рассмотрение?

Первоначально в этом разделе будет краткий обзор знаний первых двух статей, а затем обобщение.Есть также карта разума, которая была написана почти, около 10 000 слов, а затем я удалил большую часть написанного и переписал ее. , написал

Из-за прихоти однажды я хочу превратить всю статью в пост вопросов и ответов для интервью.Я предпочитаю писать пост.认真且随心所欲, я удалил его и начал заново, так что эта статья будет медленнее

Далее будут описаны эти вопросы с процессом вопросов и ответов между интервьюером и интервьюируемым.После ответа на основной вопрос будут еще несколько общих основных расходящихся вопросов.Я недавно смотрел сериал вовремя.鬓边不是海棠红, Я был немного сбит с толку, когда увидел слова.老北京腔Другими словами得，您瞧好吧！😄, ладно, поддразнивания закончились, пора становиться серьезными, сухой 4D текст здесь, готовьтесь

Прежде всего, пожалуйста, приведите себя, вы же интервьюер, внимательно посмотрите на каждый вопрос, немного подумайте, затем ответьте в уме и, наконец, посмотрите на итоговый ответ (Этот ответ не обязательно правильный, личное мнение, только для справки, и я надеюсь, что вы можете дать дополнения или исправления. )

Вопрос (основная часть): Что произошло от ввода URL до рендеринга страницы?

个人觉得, не торопитесь с ответом, сначала подумайте секунд 30, сформируйте в уме общую схему шагов, сначала подведите итоги, а потом говорите медленно, обратите внимание на ритм, также можно сделать короткую паузу в середине , интервьюер какое-то время не будет думать из-за вас СразуpassВас кинут, наоборот, вы ляпнете кучу контента напрямую, что заставит интервьюера подумать, что вы декламируете текст.

На основной вопрос я написал два вида ответов, и я чувствую, что мне нужно обратить внимание на два момента, чтобы ответить выборочно, по крайней мере, я так думаю

статус интервьюера

Очень важно примерно судить о том, что за человек интервьюер.Обратите внимание на статус интервьюера.Это очень важно.Судя по текущему статусу интервьюера,вы можете решить упростить ответ или бомбить ответ. Бомбардировочный ответ здесь не в том, чтобы сказать больше. Чем лучше, это означает, что когда мы отвечаем, мы выявляем некоторые точки знаний, чтобы доказать наши знания, но независимо от того, какой ответ, мы должны ответить по существу. Не думайте, что чем больше ответов, тем лучше. , это наверное вопрос наблюдательности.

ваш статус

Ваше состояние будет легче понять.Если вы ненадежно владеете какими-то точками знаний или немного нервничаете, не сдавайтесь и постарайтесь ответить на все (перед интервьюером вы не умеете притворяться, что знать все, что легко вызвать Небольшое отвращение), постарайтесь максимально упростить, а также чуть больше рассказать о знакомых вам местах, чтобы можно было подсказать и направить интервьюера, а потом ждать чтобы интервьюер расходился и спрашивал вас.Обычно там, где вы много говорите, интервьюер будет расходиться в какую сторону. как не крути бесполезно👌, большинству интервьюеров такая ситуация должна нравиться

Серьезный бомбовый ответ

Ed Hello Интервьюер, этот вопрос является классическим вопросом. В свободное время я тщательно прочитал некоторые связанные книги и сделали некоторые резюме. Поскольку есть множество пунктов знаний, это может занять некоторое время. Если у вас есть какие-либо вопросы или мой ответ Неправильно, пожалуйста, перебивайте меня в любое время, чтобы указать на ошибку для меня, спасибо

Я думаю, что от ввода URL до рендеринга страницы можно примерно разделить на网络通信а также页面渲染два этапа

Первый — это этап сетевого взаимодействия, на котором взаимодействие между сетевыми устройствами в Интернете будет следовать заTCP/IP四层协议,пройти черезTCP/IPСвязь с другой стороной осуществляется в сетевом многоуровневом порядке. Уровни идут от высокого к низкому: прикладной уровень, транспортный уровень, сетевой уровень и канальный уровень. Когда наш браузер вводит URL-адрес, то есть отправитель начинает с应用层Спускаясь вниз, принимающая сторона, то есть сервер,数据链路层Поднимаясь вверх, мы обычно используем пятиуровневый протокол для объяснения.Уровень канала передачи данных будет разделен на два уровня: физический уровень и уровень канала передачи данных.

URL типа браузера

После ввода URL-адреса и нажатия клавиши ввода вы войдете应用层Начните опускаться, браузер откроет поток для обработки, сначала проанализирует URL-адрес, как правило, включая (заголовок протокола, имя хост-домена или IP-адрес, номер порта, путь запроса, параметры запроса, хэш и т. д.), а затем откроет сетевой поток сделать полный запрос

Имя домена разрешения DNS прикладного уровня

Среди них разрешение DNS, то есть域名或IP解析Это связано с тем, что URL-адрес, который мы вводим, обычно является доменным именем, а компьютер не знает доменного имени, а только IP-адрес, поэтому для получения соответствующего IP-адреса через запрос доменного имени требуется разрешение DNS.

Сначала посмотрите на кеш DNS браузера
Если нет, запросите локальный кеш DNS компьютера.
Спросите рекурсивный DNS-сервер (то есть сетевой провайдер, как правило, этот сервер будет иметь свой собственный кеш, поэтому большинство IP-запросов выполняется здесь)
Если кеша по-прежнему нет, то вам нужно пройти через корневой сервер доменных имен и сервер доменных имен TLD на соответствующий полномочный DNS-сервер, чтобы найти запись, и кэшировать ее на рекурсивный сервер, а затем рекурсивный сервер вернуть запись к местному

Клиент прикладного уровня отправляет HTTP-запрос

С IP-адресом клиент на прикладном уровне отправитHTTPпросить,HTTPзапросы делятся на请求报头а также请求主体,тело запроса это то что клиент хочет отправить на сервер или сервер возвращает клиенту.Более важен заголовок запроса,включая способ связи,то есть способ запроса(POST/GET/INPUT/DELETE и т.д. .), URI, номер версии протокола и методы заголовка запроса (Accept, Cache-Control...)

Транспортное сообщение TCP транспортного уровня

应用层После отправки запроса, для удобства передачи, в传输层возьмет из应用层Полученные данные (то есть сообщение HTTP-запроса) разделяются, и каждое сообщение нумеруется, а затем пересылается网络层, число для того, чтобы облегчить серверу точное восстановление информации о сообщении при получении, здесь мы используем то, что мы часто говоримTCP协议

TCP协议пройдешь三次握手Для обеспечения безопасности и надежности передачи также можно сказать, что клиент находится в传输层старт и проход сервера三次握手УчреждатьTCP/IPсоединять

Так называемый三次握手, то есть отправитель сначала отправляетSYNПометка пакета данных (синхронизация) принимающая сторона, принимающая сторона ожидает ответа в течение определенного времени задержки, принимающий терминал получает пакет данных, возвращается сSYN / ACKПомеченный пакет данных используется для передачи подтверждающей информации, а получатель отправляет пакет данных сACKПомеченный пакет данных отправляется получателю, чтобы указать, что рукопожатие прошло успешно.В этом процессе, если отправитель не получает ответ в течение указанного времени задержки, получатель по умолчанию не получает запрос и отправляет его снова, пока не будет получен ответ получен.

Так было в предыдущей статье

Сяо Ли (клиент): Здравствуйте, вы интервьюер xx?
Интервьюер (сервер): Хм, да, это вы, Сяо Ли, отправили вчера свое резюме?
Сяо Ли (клиент): Хм, да, я

MAC-адрес запроса IP-протокола сетевого уровня

После установления соединения网络层IP-протокол будет запрашиватьMAC地址передавать пакеты данных

С точки зрения непрофессионала,IP协议Отвечает за передачу различных пакетов данных приемнику, поскольку для того, чтобы убедиться, что они действительно могут быть переданы другой стороне, необходимо определитьMAC地址Это то, что мы называем физическим адресом,IP地址может иMAC地址Путем сопряжения таблиц сопоставления один за другим можно изменить IP-адрес сетевого устройства, но MAC-адрес, как правило, является фиксированным, иIPприбытьMACПроцесс разбора зависит отARP协议, это может быть основано наIP地址найти соответствующийMAC地址

Поскольку обычные участники связи не могут общаться напрямую (если только они не находятся в одной и той же локальной сети), они будут ретранслироваться через несколько компьютеров или маршрутизаторов, поэтому необходимоARPНа всем пути, чтобы определить следующую транзитную станцию, чтобы помочь транспортным пакетам

данные поступают на канальный уровень

найти друг другаMAC地址, данные будут отправлены на数据链路层Передача, когда клиент отправляет запрос, этап завершен

сервер получает данные

Затем сервер на принимающей стороне数据链路层После получения пакета данных данные восстанавливаются послойно в обратном порядке.应用层, который включает преобразование сегментированных пакетов данных в исходное сообщение HTTP-запроса через протокол TCP на транспортном уровне.

Когда запрос поступает на внутренний сервер, как правило, выполняется унифицированная проверка, например проверка безопасности, междоменная проверка и т. д. Если проверка не пройдена, соответствующее HTTP-сообщение будет возвращено напрямую. будет введен код, и программа получит запрос, после чего выполнит соответствующую операцию

Если браузер посетил и в кеше есть соответствующий ресурс, он сравнит его со временем последней модификации сервера, и если он непротиворечив, вернет 304, сообщая браузеру, что локальный кеш можно использовать.

Сервер отвечает на запрос

После того, как сервер получает HTTP-запрос, отправленный клиентом, он ищет ресурс, запрошенный клиентом, и возвращает ответное сообщение.

Кроме того, многие веб-сайты будут иметь функции перенаправления, такие как запрос доменных имен.www., он перенаправит вас на добавление, что означает первый запросHTMLВ процессе нам нужно инициировать два запроса

Причина этого в том, что поисковые системы будут думать, чтоwww.xxx.comа такжеxxx.comэто два веб-сайта, из-за чего веб-сайт падает в рейтинге, и если оба адреса открыты, это приведет к избыточному (двойному) кэшированию браузера.

Сервер возвращает соответствующий файл

После успешного запроса сервер вернет соответствующую веб-страницу, а браузер начнет загрузку веб-страницы после получения успешного ответа. На данный момент сетевая связь заканчивается.

Строительство разборки HTML DOM дерево

После получения веб-страницы, возвращенной сервером, сначала выполните соответствующий метод синтаксического анализа в соответствии с типом DTD, определенным вверху, и синтаксический анализ веб-страницы будет передан внутреннему потоку рендеринга графического интерфейса для обработки.

Интерпретатор HTML в потоке рендеринга интерпретирует HTML-страницы и ресурсы из потоков байтов в потоки символов, затем интерпретирует потоки символов в слова через лексический анализатор, а затем создает узлы на основе слов через лексический анализатор и, наконец, проходит через эти узлы. , Построить DOM-дерево

Во время этого процесса, если обнаруженный узел представляет собой код JS, он будет вызыватьсяJS引擎Интерпретируйте и выполняйте код JS, в настоящее время из-заJS引擎а такжеGUI渲染线程взаимное исключение,GUI渲染线程Он будет приостановлен, и процесс рендеринга остановится.Если дерево DOM будет изменено во время выполнения кода JS, построение DOM необходимо начать заново.

Если узел должен зависеть от других ресурсов, изображений/CSS и т. д., для их загрузки будет вызван загрузчик ресурсов сетевого модуля, они асинхронны и не будут блокировать построение текущего дерева DOM.

Если вы столкнулись с URL-адресом ресурса JS (не помеченным как асинхронный), вам необходимо остановить текущее построение DOM до тех пор, пока ресурс JS не будет загружен иJS引擎Продолжить создание DOM после выполнения

Разобрать CSS для построения дерева CSSOM

Интерпретатор CSS интерпретирует файл CSS во внутреннюю структуру представления и генерирует дерево правил CSS.Этот процесс аналогичен разбору DOM.CSSБайты преобразуются в символы с последующим лексическим анализом и разбором, и, наконец, составляютсяCSS对象模型(CSSOM)древовидная структура

Браузер должен выполнять рекурсию во время процесса сборкиDOMдерево, чтобы точно определить, как выглядит элемент, чтобыCSSOMЦелостность проекта может быть введена в следующую стадию только после завершения строительства, поэтому даже еслиDOMОн уже построен, надо подождатьCSSOM, а затем перейти к следующему этапу

Построить дерево рендеринга

тогдаCSSOM 树а такжеDOM 树Объединены в дерево рендеринга, также называемое деревом рендеринга,渲染树Содержит только узлы, необходимые для рендеринга веб-страницы, затем используются для расчета макета каждого видимого элемента и вывода в процесс рисования для рендеринга пикселей на экране.

Макет

渲染树В то же время он содержит весь видимый контент на экране и информацию о его стилях.С деревом рендеринга он войдет в стадию макета.Пока что браузер вычислил, какие узлы должны быть видны и их рассчитанные стили., но не рассчитали их точное положение и размер в окне просмотра устройства, что布局( Макет ) этап, также известный как自动重排или回流 ( Reflow )

Этот этап обычно означает, что содержимое, структура, положение или размер элемента изменились, что требует пересчета стилей и деревьев рендеринга.

Картина

После первых нескольких шагов мы знаем, какие узлы видимы, их стили расчета и геометрическую информацию, и преобразуем эту информацию и каждый узел в дереве рендеринга в фактические пиксели на экране, обычно называемые绘制или栅格化сцена

Композитный

Последний шаг синтеза (composite), на этом шаге браузер отправит информацию о каждом слое на графический процессор, а графический процессор синтезирует каждый слой и отобразит его на экране.

Пока вышеприведенный контент представляет собой жизненный цикл URL-адреса от синтаксического анализа до рендеринга, как я его понимаю.

Чистый и краткий общий ответ

PS: Я думаю, что я все еще должен ответить на общие моменты здесь.Вы можете расширить некоторые аспекты в соответствии с вашим собственным пониманием.По крайней мере, я думаю, что это так, и это также личное понимание.Добро пожаловать к обсуждению

Здравствуйте, интервью, ввод URL-адреса для рендеринга страницы, это классическая тема, которая требует много знаний, я дам вам краткое изложение в соответствии с моим личным пониманием, пожалуйста, укажите неправильное место

Сначала клиентский браузер вводит URL-адрес. Поскольку это доменное имя, DNS прикладного уровня начинает разрешать доменное имя.

Далее, клиент Application Layer отправляет HTTP-запрос, а полученные данные пакета Pastet Pastet Pastet запросов приложений разделены на цифры. Чтобы облегчить и безопасную передачу, транспортный слой установит ссылку TCP / IP через трехходовой рукопожатие TCP Отказ

После установления соединения网络层IP-протокол будет запрашивать серверMAC地址То есть физический адрес для передачи пакета данных

найти друг другаMAC地址После этого отправьте данные на数据链路层Передача, до конца клиента, отправляющего фазу запроса

Сервер на принимающей стороне数据链路层После получения пакета данных данные восстанавливаются послойно в обратном порядке.应用层

После успешного выполнения запроса сервер вернет соответствующую веб-страницу, а браузер начнет загрузку веб-страницы после получения сообщения об успешном ответе.На этом сетевое взаимодействие заканчивается.

После того, как браузер получит файл веб-страницы, он сначала выполняет соответствующий метод синтаксического анализа в соответствии с типом DTD, определенным вверху, и синтаксический анализ веб-страницы будет передан внутреннему потоку рендеринга графического интерфейса для обработки.

Затем постройте дерево DOM и дерево CSSOM.В процессе, если узел JS, он вызоветJS引擎Интерпретируйте и выполняйте код JS, в настоящее время из-заJS引擎а такжеGUI渲染线程взаимоисключающий,GUI渲染线程Он будет приостановлен, а процесс рендеринга остановится.Если DOM-дерево будет изменено во время выполнения JS-кода, построение DOM начнется с нового, а затем DOM-дерево и дерево CSSOM будут построены как дерево рендеринга. .

Затем перейдите к этапу компоновки, рассчитайте точное положение и размер узла дерева рендеринга в окне просмотра устройства.

Затем каждый узел в дереве рендеринга преобразуется в реальные пиксели на экране, то есть фаза рисования

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

В: В чем разница между четырьмя и пятью уровнями TCP/IP и семиуровневой моделью OSI?

Сетевой уровень можно разделить на四层因特网协议栈а также七层因特网协议栈, сначала сетевой уровень представляет собой стандартные семь уровней, которые мы называемOSI 七层模型, эталонная модель - Международная организация по стандартизацииISOСтандартная система, разработанная для взаимодействия между компьютерами или системами связи, обычно называемаяOSI参考模型или七层模型

Так называемыйTCP/IP 四层模型а такжеTCP/IP 五层模型даOSI 七层Оптимизировано, некоторые слои объединены, а суть осталась та же,OSI七层模型Он слишком детализирован и имеет определенное эталонное значение, но более сложен в реализации.TCP/IP模型Он относительно прост и имеет большое практическое значение.

TCP/IPКомпьютерная сеть разделена на четыре уровня, которые объединены в общие материалы или учебные пособия.OSI7层模型а такжеTCP/IP4层模型, в соответствии с 5-уровневой моделью компьютерной сети, 5-уровневая модель предназначена только для облегчения внедрения принципов компьютерной сети, но в практических приложениях она по-прежнемуTCP/IP四层模型

Соответствующие отношения каждого слоя следующие

В: Можно ли оптимизировать разрешение DNS, почему и как?

будь то

можно оптимизировать

Зачем

Разрешение DNS — это первая ссылка во всем процессе открытия веб-сайта пользователем.Когда пользователь вводит доменное имя и нажимает Enter, система вызываетDNS客户端, найдите настроенный пользователем или автоматически назначенныйDNS IP, а затем начинается весь процесс разбора,DNS服务器Полное разрешение для этого доменного имени数字IP服务器, как правило, возврат IP-адреса, соответствующего данному доменному имени, будет стоить20~120毫秒время, и во время этого процесса браузер ничего не будет делать, пока поиск DNS не будет завершен

После завершения парсинга соединение устанавливается и поддерживается, то есть после плавного доступа скорость загрузки веб-страницы в дальнейшем не имеет ничего общего с DNS, до следующей повторной парсинга и запроса на доступ

Много небольших веб-сайтов, время разрешения DNS близко0.5s, некоторые даже требуют1sРезультат может быть проанализирован только примерно8sоткажется от посещений, а для сайтов электронной коммерции,4sЭто предел допуска пользователя. Как правило, для небольших веб-сайтов, которые были оптимизированы, время разрешения DNS можно контролировать в пределах200msвокруг, в то время как пропускная способность100MЧто касается веб-сайтов, после оптимизации время разрешения DNS можно контролировать в течение50~100ms, так что оптимизация DNS все же необходима

как

Оптимизация разрешения DNS — эффективно используйте TTL кеша

В DNS есть многоуровневые кеши, каждый раз требуется время, чтобы найти такое количество уровней, нужно, чтобы пользователи получали как можно больше записей разрешения напрямую из кеша DNS оператора, чтобы им не нужно было переходить на корневой сервер доменных имен, который, естественно, экономит время

При покупке доменного имени для разрешения доменного имени существуетTTLЗначение, которое относится к жизненному циклу разрешения доменного имени (в секундах), проще говоря, представляет собой время кэширования, записанное на DNS-сервере, когда DNS-сервер разрешает доменное имя.Настройка размера этого значения также очень информативна. В случае максимально быстрой работы необходимо обеспечить возможность переключения сервера как можно быстрее при возникновении проблемы с сервером.

Мы должны знать, есть ли у нас несколько серверов или резервных копий.Если резервных копий нет, мы можем реагировать только тогда, когда сервер не работает.Поэтому,TTLЧем дольше, тем лучше для вас, потому чтоTTLКороткая цель - вовремя переключиться, когда есть проблема с сервером.Это в принципе неприменимо для сайтов без резервных копий, поэтому в это время вашTTLЧем длиннее настройка, тем лучше.Конечно, она не должна быть слишком длинной.Общая настройкаTTL 3600Только что
Если есть резервные копии или несколько серверов, бывает так, что сервер нужно вовремя переключать из-за простоя сервера.TTLЧем короче время, тем более своевременна передача, ноTTLЧем короче время, это значит, что DNS оператора часто не может кэшироваться, для обычных пользователей установите его вTTL 600То есть, если вам нужно вовремя переключаться и требуются особо требовательные сайты, установитеTTL 120просто хорошо

Оптимизация разрешения DNS — балансировка нагрузки

Когда вы настраиваете несколько IP-адресов для одного и того же имени хоста, ответ на запрос DNS, сервер DNS, чтобы вернуть разные результаты анализа для каждого IP-адреса запроса, файл DNS будет содержать запись на сервере DNS, руководство по доступу клиента к другому компьютеру , так что разные клиенты получают доступ к разным серверам для достижения целей балансировки нагрузки, пользователь может начать местоположение в зависимости от расстояния от загрузки каждой машины или машины

Точно так же, как мы используем поставщиков CDN для разрешения доменных имен, он также использует технологию перенаправления DNS.DNS-сервер будет возвращать пользователю IP-адрес, ближайший к пользователю.Сервер узла CDN отвечает за ответ на запрос пользователя и предоставление требуемый контент, DNS-сервер производителя CDN имеет больше пользователей и к нему обращаются чаще.Запись A DNS-сервера в основном кэшируется DNS-операторами в разных местах, поэтому эффект обслуживания также является лучшим.

Q: Преимущества, недостатки и различия между протоколом TCP/IP и протоколом UDP?

Прежде всего, обратите внимание, что эта тема сама по себе является ямой

TCP/IP协议это набор протоколов, который включает в себя множество протоколов,UDP协议только один из них, так названныйTCP/IP协议, потому что протоколы TCP и IP - это два очень важных протокола, они названы в их честь, вот и все, ТАК, эта тема некорректна, правильный вопрос должен быть о преимуществах и недостатках и различиях между протоколом TCP и протоколом UDP.

Вы могли бы сказать, что интервьюер может спросить вас? Не говори ни слова тянуть эту проблему, потому что действительно запущенный этот пункт устроен над 😄

Вопрос: Преимущества, недостатки и различия между протоколом TCP и протоколом UDP?

Преимущества и недостатки

TCPПреимущества: Стабильность и надежность, это отражено в трехэтапном рукопожатии для установления соединения до того, как TCP передает данные, а во время передачи данных есть механизмы подтверждения, окна, повторной передачи и управления перегрузкой, а после передачи данных будут отключены.Соединения используются для экономии некоторых системных ресурсов

TCPНедостатки: Занимает много системных ресурсов, работает медленно и неэффективно. Перед передачей данных протокол TCP должен сначала установить соединение, что требует времени. Во время передачи данных механизм подтверждения, механизм повторной передачи, механизм управления перегрузкой и т. д. много времени.Более того, все соединения передачи должны поддерживаться на каждом устройстве, и каждое соединение будет занимать центральный процессор, память и другие аппаратные ресурсы системы.

UDPПреимущества: Быстрый, UDP — это транспортный протокол без сохранения состояния, поэтому он очень быстро передает данные.

UDPНедостатки: Ненадежный и нестабильный, так как UDP не имеет надежных механизмов TCP.Во время передачи данных, если качество сети не очень хорошее, будет легко потерять пакеты

Как правило, когда у нас есть требования к качеству сетевой связи, мы должны использовать TCP для точной передачи всех данных другой стороне, таких как протоколы HTTP, HTTPS, FTP и др. Когда качество сетевой связи не высокое, требуется, чтобы в сети скорость связи была максимально быстрой, тогда можно использовать UDP, например голос, видео и т. д.

разница

Соединение по протоколу TCP на основе протокола UDP без установления соединения
Протокол TCP ориентирован на потоки байтов.Проще говоря, TCP рассматривает данные как серию неструктурированных потоков байтов, тогда как протокол UDP ориентирован на пакеты.
Протокол TCP передает данные без ошибок, без потерь, без повторений и поступает последовательно, UDP не гарантирует надежную доставку и последовательность и может терять пакеты
Заголовок TCP составляет 20 байт, а заголовок UDP меньше, всего 8 байт.
Соединение по протоколу TCP может быть только двухточечным, UDP поддерживает интерактивную связь «один к одному», «один ко многим», «многие к одному» и «многие ко многим».

В: Кратко представим трехстороннее рукопожатие TCP и четыре волны?

Трехстороннее рукопожатие (вторжение и удаление сетевого изображения)

PS:Пожалуйста, внимательно прочитайте изображение и сотрудничайте с текстом ниже, чтобы понять

Первоначально оба конца находятся вCLOSE (关闭状态), сервер для предоставления услуг, будет активно контролировать порт, введитеLISTEN (监听状态)

Клиент активно отправляет подключенный SYN-пакет, а затем входитSYN-SENT (同步已发送状态)

После получения SYN-пакета, отправленного клиентом, сервер отвечает на SYN/ACK-пакет, а затем входит вSYN-RCVD (同步收到状态)

После того, как клиент получает пакет SYN/ACK, отправленный сервером, он подтверждает другую сторону и отвечает пакетом ACK и входит вESTABLISHED (已建立连接状态)

Когда сервер получает подтверждение от клиента, он также вводитESTABLISHED (已建立连接状态), то обе стороны могут начать общение

Четыре раза помахать (вторжение и удаление сетевого изображения)

PS:Пожалуйста, внимательно прочитайте изображение и сотрудничайте с текстом ниже, чтобы понять

В начале оба конца все ещеESTABLISHED (已建立连接状态)И передачи данных, один конец может активно инициировать пакет FIN для подготовки к отключению.На рисунке выше показано, что клиент инициирует запрос FIN.После выдачи FIN, клиент входит вFIN-WAIT-1 (终止等待状态1)

После того, как сервер получает сообщение FIN, он отвечает ACK, чтобы указать, что он знает, и отправляет сообщение изESTABLISHED (已建立连接状态)ВойтиCLOSED-WAIT (关闭等待状态), начните выполнять некоторые подготовительные работы перед отключением

После того, как клиент получает ответное сообщение ACK от предыдущего FIN, он входит вFIN-WAIT-2 (终止等待状态2), когда сервер подготовится к отключению, он также отправит клиенту сообщение FIN/ACK, указывающее, что я в порядке, запрос на отключение, и после отправки сообщения сервер входитLAST-ACK (最后确认状态)

После того, как клиент получит сообщение FIN/ACK, он немедленно ответит ACK, показывая, что он знает, и введетTIME_WAIT ( 时间等待状态), из соображений стабильности и безопасности клиент будетTIME-WAIT ( 时间等待状态)Подождите 2MSL (максимальный срок службы сегмента) и, наконец, введитеCLOSED ( 关闭状态 )

После того, как сервер получает сообщение ACK, на которое отвечает клиент, он напрямую отправляетLAST-ACK (最后确认状态)государственная записьCLOSED ( 关闭状态 )

После четырех волн оба конца входятCLOSED ( 关闭状态 ), после чего дуплекс официально отключается

PS:MSL (максимальное время жизни сегмента)最长报文段寿命, который относится к максимальному времени существования любого сообщения в сети, по истечении которого сообщение будет отброшено.TCP позволяет различным реализациям устанавливать разные значения MSL.

В: Почему для установления соединения требуется трехстороннее рукопожатие, а для закрытия соединения — четырехстороннее рукопожатие?

При установке соединения серверLISTEN (监听状态), после получения сообщения SYN запроса на установление соединения поместите ACK и SYN в одно сообщение и отправьте его клиенту

Когда соединение закрыто, когда сервер получает сообщение FIN от другой стороны, это означает только то, что другая сторона больше не отправляет данные, но все еще может получать данные, и она может не отправлять все данные другой стороне, поэтому может закрыть его немедленно или отправить некоторые После того, как данные отправлены другой стороне, сообщение FIN отправляется другой стороне, чтобы выразить согласие закрыть соединение сейчас.Поэтому собственные ACK и FIN обычно отправляются отдельно, в результате чего еще раз.

Q: Зачем нужно трехстороннее рукопожатие для создания ссылки, и нужно ли последнее подтверждение?

Предотвратить повторную отправку сообщения с запросом на подключение, срок действия которого истек, на сервер, что приведет к ошибке

Если соединение устанавливается с помощью двух рукопожатий, если клиент отправляет первый запрос на соединение и потерь нет, то это просто потому, что время нахождения в сетевом узле слишком велико, потому что TCP-клиент не получил подтверждающее сообщение для Думая, что сервер его не получил, он повторно отправляет сообщение на сервер в это время, после чего клиент и сервер завершают соединение после двух рукопожатий, и закрывают соединение после передачи данных. сервер, это сообщение должно быть недействительным, но механизм двустороннего рукопожатия позволит клиенту и серверу снова установить соединение, что приведет к ненужным ошибкам и трате ресурсов

Принято трехстороннее рукопожатие, даже если отправлено недопустимое сообщение, сервер получает недопустимое сообщение и отвечает сообщением с подтверждением, но клиент не будет отправлять подтверждение снова, потому что сервер не может получить подтверждение, он будет Зная что клиент не запрашивал соединение

Почему проще не использовать четыре рукопожатия, ведь можно создать безопасное и безошибочное соединение три раза, зачем использовать четыре раза, разве это не пустая трата ресурсов?

В: Могут ли данные передаваться во время трехэтапного рукопожатия?

Первое и второе рукопожатия не могут нести данные, так как во время первого и второго рукопожатия не было установлено соединение, что сделает сервер уязвимым для атак

При третьем рукопожатии клиент уже находится вESTABLISHED (已建立连接状态), для клиента соединение установлено, и возможности сервера по приему и отправке известны как нормальные, так что проблем с переносом данных нет

В: Почему клиент в конечном итоге ждет 2MSL после четырехкратной волны?

Во-первых, убедитесь, что последнее сообщение ACK, отправленное клиентом, может быть достигнуто сервером, потому что это сообщение ACK может быть потеряно.FIN+ACKЗапрос на сообщение отключен, а клиент мне не ответил, должно быть так, что отправленное мной сообщение об отключении запроса не было получено, поэтому сервер повторно отправит его, и клиент может получить его в течение этого периода времени 2MSL. на это повторно переданное сообщение, затем дать ответное сообщение и перезапустить таймер 2MSL

Во-вторых, как было сказано выше已经失效的连接请求报文段Эта ситуация возникает в соединении.После того, как клиент отправит последнее подтверждающее сообщение, в течение этого времени 2MSL, все сегменты сообщения, сгенерированные во время соединения, могут исчезнуть из сети, так что новое соединение Сообщение запроса для старого соединения не появится в

Q: Что делать, если соединение уже установлено, но клиент вдруг дает сбой?

TCP также имеет таймер поддержания активности. Если клиент выходит из строя, сервер не может ждать вечно. Это пустая трата ресурсов. Сервер сбрасывает таймер каждый раз, когда получает запрос от клиента. Время обычно устанавливается на 2 часа

Если он не получил никаких данных от клиента в течение двух часов, сервер отправит тестовый сегмент, а затем отправит его снова каждые 75 секунд.Если после 10 запросов все еще нет ответа, сервер считает, что у клиента произошел сбой, затем закройте соединение

В: Каков метод запроса HTTP?

HTTP1.0 определяет три метода запроса: методы GET, POST и HEAD.

HTTP1.1 добавляет шесть новых методов запроса: методы OPTIONS, PUT, PATCH, DELETE, TRACE и CONNECT.

серийный номер	метод	описывать
1	GET	Запросите указанную информацию о странице и верните тело объекта
2	HEAD	Аналогичен запросу GET, за исключением того, что в возвращаемом ответе нет определенного содержимого, которое используется для получения заголовка.
3	POST	Отправлять данные на указанный ресурс для обработки запросов (например, отправки формы или загрузки файла), данные включаются в тело запроса, а запрос POST может привести к созданию новых ресурсов и/или изменению существующих ресурсов.
4	PUT	Данные, передаваемые от клиента на сервер, заменяют содержимое указанного документа
5	DELETE	Запросить сервер удалить указанную страницу
6	CONNECT	Протокол HTTP/1.1 зарезервирован для прокси-серверов, которые могут переводить соединение в режим канала.
7	OPTIONS	Позволяет клиентам просматривать производительность сервера
8	TRACE	Повторить запрос, полученный сервером, в основном для тестирования или диагностики.
9	PATCH	является дополнением к методу PUT для локальных обновлений известных ресурсов.

Вопрос. Что представляют собой коды состояния HTTP?

Существует пять типов кодов состояния

1xx: Состояние протокола обрабатывается, требуются дальнейшие операции
2xx: Статус успеха
3xx: Статус перенаправления, местоположение ресурса изменилось и требует повторного запроса
4xx: сообщение запроса неверно
5xx: ошибка на стороне сервера

Подробный код состояния не многословен, просто скопируйте копию учебника для новичков, посмотрите и оставьте впечатление в моем сердце.

код состояния	английское имя	описывать
100	Continue	Продолжать. Клиент должен продолжить свой запрос
101	Switching Protocols	Переключение протоколов. Сервер переключает протоколы по запросу клиента. Переключитесь только на протокол более высокого уровня, например, на более новую версию HTTP.

200	OK	Запрос выполнен успешно. Обычно используется для запросов GET и POST.
201	Created	созданный. Успешно запрошен и создан новый ресурс
202	Accepted	принятый. Заявка принята, но не выполнена
203	Non-Authoritative Information	Несанкционированная информация. Запрос выполнен успешно. Но возвращенная метаинформация находится не на исходном сервере, а на копии
204	No Content	Без содержания. Сервер успешно обработал, но не вернул содержимого. Гарантирует, что браузер продолжает отображать текущий документ без обновления веб-страницы.
205	Reset Content	Сброс содержимого. Серверный процесс выполнен успешно, и пользовательский терминал (например, браузер) должен сбросить представление документа. Поля формы браузера можно очистить с помощью этого кода возврата.
206	Partial Content	Часть. Сервер успешно обработал часть запроса GET

300	Multiple Choices	множественный выбор. Запрошенный ресурс может включать несколько местоположений, и, соответственно, список характеристик и адресов ресурса может быть возвращен для выбора пользовательского терминала (например, браузера).
301	Moved Permanently	Переехать навсегда. Запрошенный ресурс был окончательно перемещен на новый URI, возвращаемая информация будет включать новый URI, и браузер будет автоматически перенаправлен на новый URI. Любые новые запросы в будущем должны использовать вместо этого новый URI.
302	Found	Временный переезд. Похоже на 301. Но ресурс перемещается только временно. Клиенты должны продолжать использовать исходный URI.
303	See Other	Посмотрите другие адреса. Похоже на 301. Просмотр с использованием запросов GET и POST
304	Not Modified	Немодифицированный. Запрашиваемый ресурс не был изменен, и ресурс не будет возвращен, когда сервер возвращает этот код состояния. Клиенты обычно кешируют посещаемые ресурсы, предоставляя заголовок, указывающую, что клиент желает возвращать только ресурсы, измененные после указанной даты
305	Use Proxy	使用代理。 Запрошенный ресурс должен быть доступен через прокси
306	Unused	Устаревшие коды состояния HTTP
307	Temporary Redirect	Временная переадресация. Похоже на 302. Перенаправление с помощью GET-запроса

400	Bad Request	В клиентском запросе есть синтаксическая ошибка, которую сервер не может понять.
401	Unauthorized	Запрос требует аутентификации пользователя
402	Payment Required	зарезервировано для использования в будущем
403	Forbidden	Сервер понимает запрос запрашивающего клиента, но отказывается выполнять запрос
404	Not Found	Сервер не смог найти ресурс (веб-страницу) по запросу клиента. С помощью этого кода веб-дизайнеры могут настроить персонализированную страницу с надписью «запрошенный вами ресурс не найден».
405	Method Not Allowed	метод в клиентском запросе запрещен
406	Not Acceptable	Сервер не может выполнить запрос на основе характеристик содержимого запроса клиента.
407	Proxy Authentication Required	Запрос требует проверки подлинности прокси-сервера, аналогичной 401, но запрашивающая сторона должна использовать прокси-сервер для авторизации.
408	Request Time-out	Сервер слишком долго ждет запроса, отправленного клиентом, и истекает время ожидания.
409	Conflict	Сервер может вернуть этот код, когда он завершает запрос клиента PUT, и у сервера возникает конфликт при обработке запроса.
410	Gone	Ресурс, запрошенный клиентом, больше не существует. 410 отличается от 404. Если ресурс ранее был удален безвозвратно, можно использовать код 410, а дизайнер сайта может указать новое местоположение ресурса через код 301.
411	Length Required	Сервер не может обработать информацию запроса, отправленную клиентом без Content-Length
412	Precondition Failed	Информация о запросе клиента с неправильными предварительными условиями
413	Request Entity Too Large	Запрос был отклонен, так как запрошенный объект был слишком большим для обработки сервером. Чтобы предотвратить непрерывные запросы от клиентов, сервер может закрыть соединение. Если сервер не может временно его обработать, он будет содержать ответное сообщение Retry-After.
414	Request-URI Too Large	Запрошенный URI (обычно URL) слишком длинный для обработки сервером.
415	Unsupported Media Type	Сервер не может обработать формат мультимедиа, прикрепленный к запросу.
416	Requested range not satisfiable	Недопустимая область действия, запрошенная клиентом
417	Expectation Failed	Сервер не может удовлетворить информацию заголовка запроса Expect

500	Internal Server Error	Внутренняя ошибка сервера, невозможно выполнить запрос
501	Not Implemented	Сервер не поддерживает запрошенную функцию и не может выполнить запрос
502	Bad Gateway	Сервер, работающий в качестве шлюза или прокси, получил неверный ответ от удаленного сервера при попытке выполнить запрос
503	Service Unavailable	Из-за перегрузки или обслуживания системы сервер временно не может обработать запрос клиента. Продолжительность задержки может быть включена в заголовок сервера Retry-After.
504	Gateway Time-out	Сервер, выступающий в роли шлюза или прокси, не получил вовремя запрос от удаленного сервера.
505	HTTP Version not supported	Сервер не поддерживает запрошенную версию протокола HTTP и не может завершить обработку

В: В чем разница между HTTP и HTTPS?

Данные, передаваемые по протоколу HTTP, не зашифрованы, т. е. представляют собой обычный текст, поэтому использование протокола HTTP для передачи частной информации очень небезопасно.Чтобы обеспечить возможность шифрования и передачи этих личных данных, Netscape разработалаSSL（Secure Sockets Layer）Протокол используется для шифрования данных, передаваемых по протоколу HTTP, что привело к возникновению HTTPS.

Проще говоря, протокол HTTPSSSL+HTTPСетевой протокол, созданный протоколом для зашифрованной передачи и аутентификации личности, более безопасен, чем протокол HTTP.Чтобы получить больше контента HTTP и HTTPS, обратитесь к Baidu самостоятельно.

Так что просто суммируйте разницу

Протокол HTTPS требует сертификата от ЦС. Как правило, бесплатных сертификатов немного, поэтому требуется определенная плата.
HTTP — это протокол передачи гипертекста, информация передается в виде открытого текста, а HTTPS — безопасный протокол передачи с шифрованием SSL.
Использование подключения HTTP и HTTPS совершенно другое, с портом не одинаковы, первый 80, что 443
Соединение HTTP очень простое и не имеет состояния.Протокол HTTPS — это сетевой протокол, созданный на основе протокола SSL+HTTP, который может выполнять зашифрованную передачу и аутентификацию, что является более безопасным, чем протокол HTTP.

В: Что такое простые и непростые запросы?

CORS (обмен ресурсами между источниками), обмен ресурсами между источниками, это то, что большинство студентов, изучающих интерфейс, называют кросс-доменными. Я думаю, что все это знают. Если вы этого не понимаете, я не буду вводить это.Контроль доступа HTTP (CORS) — портал MDN😄

CORS разделяет запросы на две категории

простой запрос
не простой запрос

Итак, что такое простой запрос и что такое сложный запрос? На самом деле, это тоже очень просто, нам нужно только знать, что такое простой запрос, а все остальное непросто, и условия, которым должен соответствовать простой запрос:

Метод запроса может быть только GET, POST, HEAD
Информация заголовка HTTP не превышает следующих полей
- Нет настраиваемых полей заголовка
- Примите, принимайте язык, язык контента, Last-Event-ID
- Content-Type имеет только три значения application/x-www-form-urlencoded, multipart/form-data, text/plain

Простой запрос должен соответствовать вышеуказанным условиям. На самом деле, это обычно запрос в традиционной форме. Готов ли после прочтения вышеприведенных условий простого запроса появиться непростой запрос? Например, если выполняется только одно из следующих условий. , это не простой запрос.

Метод запроса PUT, DELETE
пользовательское поле заголовка
Отправлять данные в формате JSON и т. д.

Для запросов CORS не простые запросы, запрос на запрос HTTP будет добавлен до официальной связи. Метод запроса - это параметры, которые называются预检请求 (preflight)

Браузер сначала спросит сервер, находится ли доменное имя текущей веб-страницы в списке разрешений сервера и какие методы HTTP и поля заголовка можно использовать.XMLHttpRequestзапрос, в противном случае будет сообщено об ошибке. Это делается для того, чтобы эти новые запросы не оказывали давления на традиционные серверы без поддержки CORS, давая серверу возможность заранее отклонить и предотвращая получение сервером большого количества запросов DELETE и PUT. , Эти традиционные формы Невозможные кросс-доменные запросы

В: Как оптимизировать загрузку ресурсов CSS, чтобы заблокировать рендеринг?

Оптимизируйте дерево DOM, сделайте DOM как можно меньше

Используйте CSS как можно большеidа такжеclassМеньше используйте теги напрямую, потому что стиль узлов тегов может быть унаследован, поэтому браузеру приходится выполнять рекурсию в процессе построения.DOMдерево, чтобы точно определить, как выглядит элемент

Добавьте встроенный CSS (встроенный стиль) в код CSS, необходимый для первого рендеринга экрана.

Для CSS, который не нужен для рендеринга первого экрана, вы можете использовать форму файла и загрузить его после рендеринга содержимого страницы.

В: Что такое оплавление и перерисовка и в чем разница?

Вы знаете, что при создании DOM-дерева он включаетdisplay:noneУзлы, дерево DOM и дерево CSSOM основаны на наборе свойств, основанных на узлах.margin/padding/width/height等Сгенерировать дерево рендеринга ( render ), дерево рендеринга не включаетdisplay:noneузел иheadи т. д. узлов, но включаютvisibility:hiddenузел

Когда узел дерева рендеринга необходимо перестроить из-за изменения размера и полей, он вызывается回流 (Reflow)

Когда изменение элемента влияет только на часть внешнего вида элемента (например, цвет фона, цвет границы, цвет текста и т. д.), вам нужно всего лишь применить новый стиль для рисования элемента, который называется重绘 (Repaint)

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

В: Что может вызвать рефлюкс?

инициализация рендеринга страницы
Изменения структуры DOM, такие как удаление узла
изменения дерева рендеринга, такие как уменьшение отступов (padding)
окноresizeКогда событие срабатывает
Некоторые атрибуты JS вызывают перекомпоновку.Многие браузеры оптимизируют перекомпоновку и выполняют пакетную перекомпоновку, когда их достаточно, но в дополнение кrender树Прямое изменение , при получении некоторых свойств, браузер также вызовет перекомпоновку, чтобы получить правильное значение, что делает оптимизацию браузера недействительной.
- offset ( Top/Left/Width/Height )
- scroll ( Top/Left/Width/Height )
- cilent ( Top/Left/Width/Height )
- width, height
- называетсяgetComputedStyle()или IEcurrentStyle

Q: Как уменьшить и избежать перерисовки reflow?

Сокращайте изменения стилей по пунктам, желательно все сразу.styleили определить стиль какclassи обновить сразу

Избегайте циклических манипуляций с DOM и переводите DOM в автономный режим перед изменением.

СоздаватьdocumentFragment, примените к нему все манипуляции с DOM и, наконец, добавьте его вwindow.document
Сначала поместите узел DOMdisplay:none(сработает один разreflow), а затем внесите изменения и снова отобразите его.
Клонируйте узел DOM в памяти, измените его и замените живым узлом.

Избегайте многократного чтения таких атрибутов, как смещение, и кэшируйте их в переменные, если их нельзя избежать.

Абсолютно или фиксированно размещайте сложные элементы так, чтобы они не вписывались в поток документа, иначе перекомпоновки будут дорогими.

Изменение размера шрифта также может вызвать перекомпоновку, поэтому постарайтесь свести это к минимуму, насколько это возможно.

Макет таблицы, небольшое изменение приведет к изменению макета всей таблицы, поэтому лучше использовать меньше

Q: Вы понимаете обычные слои и составные слои?

Слои, отображаемые браузером, обычно включают две категории:普通图层так же как复合图层

Обычный документооборот можно понимать как составной слой, который мы называем默认复合层, потому что независимо от того, сколько элементов добавлено, они фактически находятся в одном и том же составном слое.absoluteмакет,fixedКроме того, несмотря на то, что можно отклониться от обычного документооборота, он по-прежнему принадлежит默认复合层

Составные слои могут быть независимыми от обычного потока документов.После модификации можно избежать перерисовки всей страницы, тем самым улучшив производительность.Однако составные слои нельзя использовать в больших количествах.В противном случае страница будет больше зависать из-за избыточного ресурса потребление потерять большие

В графическом процессоре каждый композитный слой рисуется отдельно, поэтому не влияет друг на друга.硬件加速образом, объявит新的复合图层, она будет выделять ресурсы отдельно, и естественно будет отделена от обычного документооборота, так что какие бы изменения в этом составном слое не коснулись默认复合层Перерисовка

PS:Технология аппаратного ускорения относится к использованию аппаратных возможностей графического процессора для облегчения рендеринга веб-страниц.

В: Оптимизирована отрисовка страницы в браузере?

Структура HTML-документа имеет как можно меньше уровней, желательно не глубже шести уровней.
JS-скрипты нужно размещать как можно позже
Иерархия структуры стилей максимально проста.
Небольшое количество стилей первого экрана использует встроенный режим в метке.
Сведите к минимуму манипуляции с DOM в сценариях, попытайтесь получить доступ к информации о стиле DOM в автономном режиме и избегайте чрезмерного запуска перекомпоновки.
Уменьшите количество модификаций стилей элементов с помощью кода JS и максимально используйте модификации.classНазовите стиль операции или анимацию
Сведите к минимуму переформатирование и перерисовку браузера
Это 2020 год! просто не используйtableвыложенный
Используйте только анимацию CSStransformа такжеopacity, перекомпоновки и перерисовки не произойдет
Скрыть за пределами экрана или попытаться остановить анимацию при прокрутке страницы
Используйте только CSS для анимации, насколько это возможно, анимация CSS определенно намного лучше, чем анимация JS.
Избегайте неявного синтеза в браузере
Изменить размер составного слоя

наконец

Если это полезно для вас, двигайте руками и ставьте большие пальцы, чтобы поощрить это.Конечно, я лично понимаю, что, поскольку эта статья занята, ее написание занимает много времени, и она пишется с перерывами, поэтому может быть некоторые места, которые не очень хорошо связаны, не очень гладко или если что-то не так, пожалуйста, укажите это, я был бы очень благодарен

Да, и еще, вы можете добавить друга и присоединиться к группе, чтобы общаться с вами.Также приглашаем подписаться на публичный аккаунт [Irregular Front End] 😄