Официальный чиновник Alibi «заявил, что сложность процесса ввода запроса от URL» отличается!

предисловие

Несколько лет назад я готовился к смене работы, и я обобщил волну наиболее частых вопросов на собеседованиях, чтобы поделиться с вами. Эта статья о распространенных проблемах с браузерами.Около 10 интервьюеров столкнулись с 6 похожими вопросами (в основном крупные и средние фабрики). (Часть интервью забыта. Для того, чтобы сформировать законченный рассказ и повысить читабельность, 20% содержания является вымышленным.) В настоящее время работает в Чэнду в команде Didi Chuxing.

Рекомендуемые статьи по основам работы с компьютером:nuggets.capable/post/684490…

Вопрос: Что происходит, когда URL-адрес вводится из адресной строки браузера до тех пор, пока запрос не вернется

Вы посмотрите на такой гнилой вопрос, маленький случай, но вопрос, заданный начальником интервью 996, намного превзошел сам вопрос.Если вы не верите, читайте дальше.

Я ответил, что сначала будет выполняться парсинг url, а поиск ip будет выполняться по системе dns.

Как только я закончил говорить, босс из компании, которая любит Xiufubao, прервала меня, сказав, почему URL должен быть проанализирован, а какие правила запроса DNS? Как только я услышал это, я подумал себе, я не играю в карты в соответствии с рутиной. Эти два вопроса, как правило, не спрашивают в Интернете. Я снова подумал в моем сердце. Турбулентная весна!

Поговорим о том, почему url нужно парсить (то есть кодировать)

Общее содержание моего ответа таково: потому что стандарт Интернета предусматривает, что URL-адреса могут быть только буквами и цифрами, и есть некоторые другие специальные символы (-_.~ ! * '() ; : @ & = + $ , / ? # [ ], специальный Символ - это информация, которую я пришел проверить. Я не могу так много вынести. Чаще всего не включают знак процента и двойные кавычки), и если он не экранирован, будет двусмысленность , Такие какhttp:www.baidu.com?key=value, если мойkeyвключает в себя равные=символы, такие какke=y=valueЕсли у вас есть двусмысленность, вы не знаете=В итоге подключенkeyа такжеvalueсимвол или самkeyесть=.
Затем большой парень избил меня и сказал, каковы правила кодирования URL, я сказал utf-8
Здоровяк то за ним погнался, почему utf-8, это во всех браузерах так? Используете ли вы кодировку gb2312 для китайского языка, и если браузер не использует utf-8 единообразно, как вы сказали, как вы можете гарантировать, что это все кодировка utf-8?
Я постеснялся сказать, что знаю что-то подобное, непонятно, а сам формат кодирования html должен быть примерно, а как убедиться, что кодировка utf-8, думаю, можно использовать encodeURIComponent
В чем разница между encodeURIComponent и encodeURI?
Отличие в том, что encodeURIComponent имеет более широкий диапазон кодирования и подходит для кодирования параметров, encodeURI подходит для кодирования самого URL (locaion.origin) Конечно, проект вообще обрабатывается библиотекой qs.

Затем поговорим о процессе парсинга DNS и о том, как html оптимизирует DNS.

Во-первых, dns относится к версии компьютерной сети Се Сирень, давно видел, некоторые детали забыл, но общий процесс запомнился. Например, чтобы запросить URL как:www.baidu.com

1. Вход в устройствоwww.baidu.comИмя домена, операционная система сначала проверит, есть ли запись в файле hosts, и если да, то вернет соответствующий сопоставленный IP-адрес.

2. Если файла hosts нет, проверьте, есть ли у локального преобразователя DNS кэш. (на этот я не ответил)

3. Далее заходим на dns сервер настроенный на нашем компе если есть или есть кеш, и возвращаемся

4. Если нет, перейдите на корневой DNS-сервер (13 в мире, фиксированный IP-адрес), а затем определите, какой сервер управляет доменным именем .com.Если он не может быть разрешен, проверьте, может ли сервер .baidu.com быть разрешается, пока вы не найдете www IP-адрес .baidu.com

Примечание: проверив данные, я обнаружил, что существует два режима DNS-запроса: один — режим переадресации, другой — режим без переадресации.4 упомянутых выше — это режим без переадресации.

Для внешней оптимизации DNS вы можете написать адрес кеша DNS в заголовке html-страницы, например

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

Я, наконец, выдержал первый раунд ожесточенных вопросов, а затем продолжил рассказывать, что произошло от ввода URL-адреса в адресной строке браузера до возврата запроса.

После нахождения IP-адреса это трехстороннее рукопожатие протокола http (и четыре разрыва будут задействованы позже)

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

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

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

Первое рукопожатие: хост A отправляет на сервер TCP-пакет с битовым кодом SYN=1 и случайным образом генерирует номер подтверждения (это часть tcp-пакета), после того как хост B получает SYN-код до тех пор, пока A не запросит установить соединение ;
Второе рукопожатие: после того, как хост B получает запрос, он отправляет номер подтверждения (seq+1 хоста A), syn=1 и seq=random number TCP-пакет на A;
После того, как хост А получит его, проверьте правильность номера подтверждения, т. е. является ли номер подтверждения, отправленный А в первый раз, равным +1, и равен ли битовый код подтверждения 1. Если он правильный, хост А отправит номер подтверждения еще раз (seq+1 хоста B). , ack=1, после того как хост B получит его и подтвердит значение seq и ack=1, соединение будет установлено успешно.

Затем заполнить небольшой вопрос, почему два рукопожатия не работают, потому что при втором рукопожатии хост B не может подтвердить, что хост A получил запрос подтверждения, а значит, B думает, что соединение установлено, и начинает отправлять данные , а отправляемые пакеты всегда А. Если бы я его не получил, было бы очень легко атаковать Б. Если бы я специально отправил пакет и не получил его, сервер легко бы завис.

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

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

Я сказал, сначала отправьте данные из локальной сети на коммутатор компании (если коммутатор не кэширует сопоставление между локальным mac-адресом и IP-адресом, оно будет получено через протокол ARP в это время), преимущество Switch заключается в том, что он может изолировать домен коллизий (поскольку Ethernet использует протокол CSMA/CD, который предусматривает, что только одна машина может одновременно отправлять данные по сетевой линии), так что не только одна машина может отправлять данные по сети. пакеты одновременно
Далее свитч отправляет данные на роутер.Роутер равнозначен шлюзу компании (наша компания небольшая), а роутер имеет функцию пересылки и группировки пакетов данных (роутер построит таблицу маршрутизации через выбранный протокол маршрутизации , и в то же время нерегулярно следуют за соседними маршрутизаторами, обменивающимися маршрутной информацией), и тогда считается, что это проходит через физический уровень, уровень канала передачи данных (Ethernet) и начинает пересылать данные на сетевой уровень.
Затем маршрутизатор пересылает IP-датаграмму.Как правило, IP-адрес компании преобразуется с помощью NAT, чтобы IP-адрес внутренней сети также мог получить доступ к внешней сети.В нашей компании я заметил, что IP-адрес внутренней сеть начинается с 192.168.0. Все данные поступают на сервер через пакетную передачу маршрутизатора.
Затем вступает в действие протокол верхнего уровня сервера, протокол транспортного уровня.В соответствии с номером порта в пакете tcp, специфичной для сервера службе разрешено обрабатывать входящий пакет данных, а tcp ориентирован на поток байтов ( tcp имеет четыре характеристики: надежная передача, управление потоком, управление перегрузкой, управление соединением), так почему же объект запроса нашего узла и его событие данных прослушивания объединяются вместе строками (буфером), ведь tcp сам по себе является потоком байтов, и данные, используемые объектом запроса (уровень http), представляют собой блок данных, отправленный TCP.
Наконец, данные передаются от транспортного слоя на уровень приложений, то есть HTTP Service (или HTTPS).

答完这里，我说大佬我只知道大概的流程，具体细节我不是很清楚，但自己后面会补上。 . .

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

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

Я имею в виду примерно:

Когда браузер успешно загружает ресурс в первый раз, сервер возвращает 200. В это время браузер не только скачивает ресурс, но и сохраняет заголовок ответа (в нем очень важен атрибут даты, который используется для расчета разница во времени между текущим временем и датой, когда один и тот же ресурс используется во второй раз) кэшируются вместе;
В следующий раз, когда ресурс загружается, он должен быть сначала обработан сильным кешем. Приоритет управления кешем является самым высоким. Например, управление кешем: без кеша, он сразу перейдет к шагу согласования кеша. Если кеш -control: max-age= xxx, он сначала сравнит разницу во времени между текущим временем и последним временем, когда он вернул 200. Если он не превышает max-age, нажмите на сильный кеш и прочитайте файл непосредственно из локального кеша. без отправки запроса (здесь следует отметить, что если нет управления кешем, значение expires будет взято для сравнения, истекает ли он).Если он истекает, он переходит на следующий этап и согласовывает кеш.
На этапе кэша согласования на сервер отправляется запрос с If-None-Match и If-Modified-Since в заголовке, сервер сравнивает Etag, если совпадает, попадает в кэш согласования и возвращает 304; ресурс file принимает новое значение Etag и возвращает 200;
Вторым важным полем кэша согласования является If-Modified-Since.Если значение If-Modified-Since, отправленное клиентом, совпадает со временем последнего изменения файла, полученного сервером, происходит попадание в кэш согласования. и возвращается 304, возвращает новое последнее изменение и файл и возвращает 200;

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

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

1、先查找内存，如果内存中存在，从内存中加载；
2、如果内存中未查找到，选择硬盘获取，如果硬盘中有，从硬盘中加载；
3、如果硬盘中未查找到，那就进行网络请求；
4、加载到的资源缓存到硬盘和内存；

Затем большой парень спросил, знает ли он, что такое эвристическое кэширование и при каких условиях оно срабатывает?

Этот вопрос вызывает у меня чувство двух слов, глупый! Тогда ответьте честно, я не знаю. (Проверьте информацию о следующем)

Эвристическое кэширование:

Если Expires, Cache-Control: max-age или Cache-Control: s-maxage не отображаются в ответе и ответ не содержит других ограничений на кэширование, кэш может использовать эвристику для расчета времени жизни свежести. Обычно на основе 2 полей времени в заголовке ответа Date минус 10% от значения Last-Modified в качестве времени кэширования.

// Date 减去 Last-Modified 值的 10% 作为缓存时间。
// Date：创建报文的日期时间, Last-Modified 服务器声明文档最后被修改时间
  response_is_fresh =  max(0,（Date -  Last-Modified)) % 10

Тогда отвечайте, я сказал, что после возврата на html, html будет парсить.Эту часть знаний я подготовил заранее, но ответ не очень подробный, наверное имеется в виду cssom+domTree=html, а потом верстка и отрисовка

Построить дерево DOM (дерево DOM): разобрать HTML-документ сверху вниз, чтобы сгенерировать дерево узлов DOM (дерево DOM), также называемое деревом содержимого (дерево содержимого);
Построить дерево CSSOM (объектная модель CSS): загрузить и проанализировать стили для создания дерева CSSOM;
Выполнение JavaScript: загрузка и выполнение кода JavaScript (включая встроенный код или наброски файлов JavaScript);
Построить дерево рендеринга: создать дерево рендеринга на основе дерева DOM и дерева CSSOM;
Дерево визуализации: последовательность прямоугольников, отображаемых на экране по порядку, с такими визуальными свойствами, как шрифт, цвет и размер.
Макет (макет): Дерево рендеринга каждого узла правильное положение узла дерева на экране;
Рисование: пройдитесь по дереву рендеринга, чтобы нарисовать все узлы, и примените соответствующий стиль к каждому узлу.Этот процесс выполняется через внутренний модуль пользовательского интерфейса;

Затем интервьюер спросил меня о некоторых методах оптимизации слоя рендеринга страницы, а именно:

оптимизация рендеринга страницы

Структура HTML-документа имеет как можно меньше уровней, предпочтительно не более шести уровней;
Сценарий должен располагаться как можно дальше сзади, а можно и спереди;
Небольшое количество стилей для верхней части страницы размещается внутри этикетки;
максимально простой уровень структуры стиля;
Сведите к минимуму операции DOM в сценариях, как можно больше кэшируйте информацию о стиле, обращающуюся к DOM, и избегайте чрезмерного запуска перекомпоновки;
Уменьшение модификации стиля элемента через код JavaScript, чтобы использовать имена классов для изменения или манипулирования шаблоном анимации;
Анимации следует использовать, насколько это возможно, для элементов с абсолютной или фиксированной позицией;
Скрыть экран или попытаться остановить анимацию при прокрутке страницы;
Старайтесь как можно чаще кэшировать поисковые запросы DOM и сохранять как можно более краткий поиск;
Для веб-сайтов с несколькими доменными именами вы можете включить предварительное разрешение доменных имен.

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

zhuanlan.zhihu.com/p/105561186

Кстати, Chengdu Didi набирает front-end, java и тестирование. Я напрямую отправляю его во внутреннюю систему отправки здесь, каждый может отправить его, а адрес электронной почты резюме:2298613245@qq.com