В этой статье около 6000 слов, и ее чтение занимает около 10 минут.
напиши первым
Кто-то говорит, что сетевая база фронтенд-инженеров очень слабая, что многие не компьютерщики, а порог низкий, на самом деле его нельзя обобщать. Но раз люди жалуются, давайте исправимся.
Нет правил, нет стандартов
Фронтенд-инженеры должны глубоко прочувствовать это предложение, это также может быть связано с тем, что изменений во фронтенде действительно слишком много.TMскоро. Но изменения так быстры, они всегда должны успокоитьсяправилоНу, а если нет, то это не может закончиться.
Где устоявшиеся правила?
Существует множество правил, например:AMD,CMD,PromiseПодождите, это можно рассматривать как своего родаправило, далее в совокупности именуемые стандартом.
Есть такая поговорка:
Вы можете создавать библиотеки по своему усмотрению, но не устанавливайте стандарты по своему усмотрению.
Другими словами, если не хватает людей, которые согласны с этим, то созданный вами стандарт действительно бесполезен.
Итак, остановитесь и задумайтесь, давайте посмотрим на это с философской точки зрения:
Если не будет стандарта, то мир станет очень беспорядочным и хаотичным, именно благодаря стандарту мир становится упорядоченным и аккуратным.
Мы можем вывести это по аналогии с индукцией данных:
Мы будем всемирной сетью (Internet— Интернет), провести индукцию и сделать вывод, что если в мире не будет общепринятого стандарта для сети, то она станет аномально хаотичной.
Поэтому, когда мы изучаем основы сети, мы фактически изучаем сегодняшниеInternetстандарт. Когда мы изучаем стандарт, мы можем следовать ему и делать то, чего хотим достичь. На самом деле, вы обнаружите, что многие вещи совпадают.
Теперь мы должны знать, как улучшить нашу сетевую основу.
мы собираемся учитьсяInternetДавайте посмотрим, каков его стандарт, почему он разработан таким образом, каковы преимущества написания его таким образом и какова программная идея этого дизайна.
Идеи программирования иногда вызывают у нас много разных чувств.
почему сейчасMVP,MVVM,MVXи другие шаблоны дизайна. Это из-за хороших программистов, чтобы учитьсяMVCПосле классической дизайнерской идеи черпайте вдохновение, а затем расширяйте классическую дизайнерскую идею во множество других превосходных дизайнерских идей. Следовательно, это также цель изучения чего-либо, и это также способ обучения, который позволяет нам сформировать режим самостоятельного обучения. Только так мы сможем продолжать двигаться вперед.
Ладно, не будем нести чушь, тогда начну объяснять со своих личных знаний и мнений.Основы сети.
PS:PromiseимеютPromiseA/B/C/ждал стандартов сообщества, но в итоге выбралPromiseA+в качестве официального стандарта.
Internetне загадочный
InternetЭто не совсем таинственно, и выслушайте меня:
Если вы хотите выйти в интернет, то у вас должно быть сетевое оборудование.Не обязательно покупать его здесь, оно может быть предоставлено кем-то другим.Например, если оператор дергает провод, вам не нужно купить провод (вручную прикольно), есть еще хосты, коммутаторы, роутеры и т.д., которые в основном состоят изInternetсетевое оборудование.
Возможно, некоторые люди не понимают, что делает каждое устройство, но есть некоторые вещи, когда вы не понимаете, попробуйте использоватьМетод заменычтобы понять. Например, вы можете не понимать коммутаторы и маршрутизаторы, но если вы их не понимаете, это создаст препятствия для дальнейшего понимания.Так что же нам делать?
Мы можем относиться к аппаратным устройствам как к программному обеспечению.
Ведь железо это тоже код, конечно, кода нет, типа линии, хаба, но можно подумать, что в нем прописана пустая функция, это может понять железо с уровня ПО.
Тогда это немного милее:
Аппаратное обеспечение, выполняющее определенную функцию, можно рассматривать как функциональный модуль программного обеспечения с входными и выходными параметрами.
Чтобы визуализировать это снова, это можно понять как промежуточное программное обеспечение.
Данные передаются в промежуточном программном обеспечении, и в каждом промежуточном программном обеспечении выполняется соответствующая обработка, такая как инкапсуляция, проверка правильности и, наконец, данные отображаются на ваших глазах.
Если вы понимаете это таким образом, чувствуете ли вы, что это не так глубоко и трудно понять, как вы себе представляли?
На самом деле, наша цель состоит в том, чтобы:
Визуализируйте абстрактное и эзотерическое знание, а затем абстрагируйте визуализированное знание во что-то, что мы можем понять.
Так что это похоже на то, что мы однажды сделали наши прекрасные мозгиbabelПеревод, это действительно весело, это быстрый способ понять эзотерику. Знания нельзя выучить до смерти. Изменения неотделимы от своих корней. Во многих местах есть одни и те же идеи. Умение интегрировать — очень важная способность.
Ассоциация, вызванная классическим вопросом
Можете ли вы рассказать о процессе трехкратного рукопожатия и четырехкратного махания рукой?
Я полагаю, что этот вопрос задавали многим людям. Это незаменимый вопрос в случае исследования знаний о сети. Он также показывает, что знания, отраженные в этом вопросе, являются базовыми и исследуют основу вашей сети.
Теперь, когда мы снова видим проблему, мы можем попытаться перейти к источнику. Например, подумайте, почему существует этот процесс, почему вы должны делать это именно так, нельзя ли решить его двойным рукопожатием, нельзя ли обойтись без четвертой волны?
Вот статья, которую лично я считаю неплохой:
Следуйте анимации, чтобы изучить трехстороннее рукопожатие TCP и четырехстороннюю волну.
Не буду отвечать на ответ на тройное рукопожатие и четырехстороннюю волну, статья выше уже представила его более наглядно. Если у вас есть какие-либо вопросы, вы можете отсканировать мой QR-код WeChat в конце статьи, и мы поговорим в частном порядке (забавное лицо).
История данных и электричества
Вот история моей ерунды:
Передача данных с одного хоста [Пекин] на другой хост [Нанкин] — это сложный процесс. В отличие от передачи энергии, это всего лишь вопрос одного мозга. Конечно, передача энергии — это также знания высокого уровня, такие как высоковольтная энергия коробка передач.
Но данные намного сложнее, чем электричество.
Например, электричество — это центральный кондиционер, и кто за него платит, я его кому подведу, всем одинаково, ничего. В принципе не бывает такой ситуации, как: твоя бытовая техника такая милая, твоя бытовая техника намного красивее моей. С помощью этого маленького каштана я в основном хочу объяснить, что у электричества нет конфиденциальности, и у пользователей нет возможности что-либо потерять. Напряжение сегодня низкое, терпите, завтра поменяйте большой трансформатор, ночью будет нормально, а пользователь ничего не скажет.
Напротив, данные отличаются. Данные являются своего рода частной информацией. Поскольку они обладают конфиденциальностью, они должны обеспечивать безопасность и целостность, и они не могут быть иногда безопасными, иногда небезопасными, иногда полными, а иногда неполными. Поэтому сложность передача значительно увеличивается.
Ассоциация, вызванная картинкой
Давайте посмотрим на картинку ниже:
Во-первых, на этой картинке показан текущийInternetиерархическая структура. Я также не объясняю, почему это так сейчас, потому что это стандарт и есть консенсус. Но я хочу сказать несколько вещей.
Первая ситуация: Вы наверняка не раз видели такую картинку, но у многих людей до сих пор спрашивают во время интервью, и они какое-то время не могут ее вспомнить, трансформировавшаяся память. Например, это кровавый факт, что после произнесения такого количества английских слов они быстро забываются. Итак, теперь, когда мы снова видим эту картинку, как мы можем гарантировать, что нас не спросят снова в следующий раз?
Тогда надо возиться с памятью, строить ассоциации, привлекать истории, иметь сюжет.OK, теперь, что мы можем ассоциировать с этой картиной? Это вопрос, поэтому следуйте за мной и начните думать.
первый угол
Думайте с точки зрения внешнего интерфейса,OSIсемислойная модель дляTCP/IPВ процессе преобразования четырехслойной модели очевидно, что инкапсуляция выполнена.
Думая с точки зрения промежуточного программного обеспечения, это7слой или4Слой, мы можем думать о каждом слое как о промежуточном программном обеспечении. Данные передаются между промежуточным ПО, поэтому каждый раз, когда они проходят через промежуточное ПО, это означает, что обработка данных будет выполняться один раз. Каждое промежуточное ПО выполняет определенную функцию.TCP/IPЧетвертый уровень — это философия обертывания семислойной модели и упрощения сложности. Объединение слоев с повторяющимися функциями в одном слое помогает обеспечить относительную независимость функций каждого уровня и их принадлежность к более высокому уровню абстракции. Детали скрыты, а функциональные различия между уровнями более выражены.
второй угол
Доступна сnpmДумая о пакетах, вы найдете вTCP/IP分层结构中，高层级会依赖低层级。 как будтоnpmупаковать, установитьAпакет, который вы автоматически установитеBМешок,Bпакет будет зависеть отCМешок. То есть для успешной установкиAпакет, затемBМешок,CЗадействованы все пакеты. Хорошо, если вы понимаете это таким образом, поток данных, инициированный моим прикладным уровнем, определенно будет зависеть от транспортного уровня, сетевого уровня и уровня интерфейса. Поэтому некоторые фронтенд-инженеры умеют только инициироватьajaxилиfetchПри запросе спускайтесь внизhttp. для прогулокtcp , ip, интерфейсный слой. не уверен. Итак, видя это, я думаю, что мои друзья все еще должны иметь хорошее представление о том, как запросы данных, которые вы инициируете, проходят в сети.
Соединение между HTTP/TCP/IP
Какая связь между тремя, здесь я даю каштан, хотя и не точный, но достаточно образный.
IPявляется единицей хоста, черезIPможет найти ваш город.
TCPоснован на порте хоста, черезTCPНайдите свой район в своем городе.
HTTPНу, это основано на пользовательских процессах, черезHTTPВы можете узнать номер комнаты района, в котором находится ваш город.
По приведенной выше аналогии очень легко понять, в этом прелесть рассказывания историй, хахаха. Этот пример также может показать, что если вы хотите найти номер комнаты, вы должны сначала найти город, затем найти сообщество и, наконец, найти номер комнаты. То есть вы хотите отправитьHTTPЧтобы быть успешным, он должен бытьTCP , IPдолжен пройти успешно, прежде чем вы сможете отправитьHTTPуспех.
Примечание от 3 февраля 2019 г.: вышеHTTP/TCP/IP 三者的联系Приведенный пример очень неточен, прошу прощения.
Большой парень связался со мной:
Вышеприведенная картинка дала правильное объяснение.Основная причина в том, что я форсировал повествование, что привело к некоторой постановке телеги впереди лошади, и было легко ввести друзей в заблуждение, так что прошу прощения.
IP
IPУровень является сетевым уровнем и определяет, как адресуются различные хосты. Просто понять, это черезIPадрес, чтобы найти соответствующий хост.
TCP/UDP
Транспортный уровень является очень важным уровнем, связывающим предыдущий и следующий, предоставляя услуги связи вышестоящему прикладному уровню и инкапсулируя информацию прикладного уровня в сетевую информацию снизу.
Транспортный уровень соединяет процессы между хостами, а сетевое взаимодействие различных процессов на одном хосте различается портами, поэтому транспортный уровень предоставляет хостам услуги «порт-порт».
Вот какой процесс
Таким образом, можно понять, что когда приложение вызывается в память для запуска, приложение можно назвать процессом.
Порт не принадлежит ни одному приложению
Приложение устанавливает соединение с портом через системный вызов (Binding), будет определено, что порт обслуживает процесс, а данные и все передаются процессу через порт. Поскольку порт не принадлежит ни одному приложению, только когда он привязан, он определяет, какой процесс обслуживать.
Как взаимодействуют транспортный уровень и порты
Данные, отправленные транспортным уровнем на порт, принимаются соответствующим процессом, а данные, отправленные соответствующим процессом на транспортный уровень, отправляются из порта. Порт здесь — это то, как адресуется транспортный уровень.
Порт — это концепция на программном уровне.
Порт — это положительное целое число, представленное 16-битным двоичным числом, что означает, что хост теоретически может иметь максимум 65535 каналов транспортного уровня. Но обычно меньше 65535. Например, порт 80, порт 21, порт 8080 и т. д. — все это номера портов по умолчанию, и через эти номера портов осуществляется конкретная связь.
HTTP
HTTPпостроен наTCP/IPпротокол верхнего прикладного уровня иHTTPSвHTTPприсоединиться кSSL/TLS.
Коротко представить,HTTPявляется английской аббревиатурой Hypertext Transfer Protocol, т.е.Internetсамое важноеWebСтандарты уровня приложений,HTTPВозможность передачи данных в любом формате.
Как фронтенд-инженеры, мы должны начать с
HTTPЧему ты там научился?
Мы говорим одно, например, интервью часто спрашивают вас, введитеurlЧто потом будет, собственно, если понять это глубже, можно нарисовать картинку и сказать ему, конечно, об этом можно говорить только при звонке по телефону.
- Сначала вы нажимаете на
urlОн был инициирован один разhttpпросить -
httpЗапрос, безусловно, будет зависеть отtcp,ipЖдать. что означает, что вы делаетеtcpЦзяньлянь,IPЗапрос. - если ваш
urlЕсли это доменное имя, вам необходимо сначала разрешить доменное имя, то естьdnsработать. сделать это вipадрес. Этот процесс должен быть завершен на прикладном уровне, потому что, если прикладной уровень не завершен, тоTCPне могу получить слойIPадрес, чтоIPАдресные данные не будут получены. Поэтому, когда мы делаем такой вывод, мы знаем, чтоdnsсделано на уровне приложений. - После нормы данных на интерфейсный слой, он должен быть передан соответствующему
IPСоответствующий порт сервера для адреса. то естьTCPСтройте Союз.TCPЧтобы сначала установить успешное соединение,HTTPдля передачи. Поскольку это зависимость, получательHTTPнужно отTCPЭто получает данные. еслиTCPНе удалось установить соединение, затемHTTPНевозможно установить успешный союз. - Если все успешно, то переносим данные.
- После передачи,
TCPСоединение закрыто. Страница имеет новые данные, отображаемые перед пользователем
Увидев это, вы обязательно подумаете, кеш, я тут кеш не учел, кеш сегодня везде, давайте заполним этот пункт сами.
Вот классная диаграмма, показывающая, когда вводURL, как выглядит весь процесс. Как показано ниже:
HTTPэто эталон, у него своя форма, видите лиHTTPВы наверное можете себе представить форму передачи данныхTCPНаверное, какая форма передачи данных.
Структура данных сетевого запроса контролируется внешним интерфейсом, например, метод запроса, запрошенныйurl, параметры запроса и т. д. Затем структура данных ответа должна контролироваться сервером, а сервер выдает нам необходимую возвращаемую информацию, такую как код состояния, данные, управление кешем и т.д.
Коды состояния HTTP
существуетwebВ программировании коды состояния очень важны.
Какова цель установки кода состояния?
Это позволяет разработчикам и пользователям узнать, нормально ли сервер обработал запрос или произошла ошибка. Понимание цели очень необходимо нам, чтобы понять, почему код состояния разделен именно так, по крайней мере, это не так незнакомо в наших сердцах.
И в коде состояния есть ряд очень важных, т.е.3XXряд.
301,302разница
302 временная переадресация
Временное перенаправление, осведомленность в том, что когда сервер отключается, клиент инициируетurlЗапрос не может быть успешным. Также необходимо инициировать запрос к серверу, чтобы сервер перенаправил на целевой URL, то есть вернулlocation, затем перейдите к целевому URL.
PS: Подумайте об этом, почему там 302?
301 Постоянное перенаправление
Постоянное перенаправление инициируется браузером, даже если сервер закрытurlЗапрос также может направляться непосредственно к целевому URL-адресу, минуя сервер. Если кэш не очищен, последующие обращения будут напрямую обращаться к другому адресу.
Метод HTTP-запроса
Это можно понять так,HTTPЭто похоже на параметр объекта, который имеетMethod,представлятьHTTPМетод запроса используется, чтобы сообщить серверу, что клиент обращается к вашемуurlКакова цель, будь то получение информации, загрузка данных или удаление информации. Наиболее часто используетсяGETа такжеPOST. часто используемыйGETа такжеPOSTНе говори это, скажи это здесьOPTIONS:
OPTIONSзаключается в том, чтобы предоставить запрос для клиентаURLКакие способы доступа доступны по адресу.
PS: оставьте это для размышлений, этоOPTIONSКаков сценарий использования?
POSTа такжеPUTРазница:
POST:POSTСервер должен убедиться, что данные полностью сохранены, и дубликаты не допускаются.POSTподача данных. обычно вHTMLдля отправки данных через форму.
PUT:PUTРазрешить клиенту отправлять повторяющиеся данные. При отправке повторяющихся данных существующие данные на сервере будут перезаписаны новыми отправленными данными.
PS: Вот книга, которую я рекомендую, "Иллюстрированный HTTP", которая очень хорошо написана, с картинками и текстом, простая и понятная, ее стоит прочитать.
Как HTTP проходит на стороне сервера
Посмотрите на картинку, которую я нарисовал ниже, это серверная программа,WebОтношения между сервером и клиентом:
На картинке выше представлена основная модель.WebСервер действует только как мост, т.е.HTTPЗапрос декодируется и преобразуется в метод вызова интерфейса, который может распознать серверная программа, а затем серверная программа инкапсулирует сгенерированный возврат в видеHTTP Response, и возвращается пользователю.
Примечание 1:
На стороне сервера, если запрос, отправленный пользователем, предназначен для получения статических ресурсов, он обычно не проходит через программу на стороне сервера, а напрямую возвращает ресурс пользователю через механизм кэширования на стороне сервера, такой какNginxкеш статических ресурсов. Без серверной программы скорость отклика будет значительно выше.
Заметка 2:
Обычно сервер находится во внутренней сети компании, и доступ к внешней сети недоступен.HTTPзапрос, ведь в большинстве случаев он передается первымNginxОбратный прокси-сервер также отвечает за перенаправление трафика и пересылку различных запросов на определенные серверы в интрасети.
Socket
SocketНа китайском языке это относится к сознанию отверстия или розетки.Как следует из названия, он может общаться, когда он подключен.Socketсначала какBSD UNIXМеханизм взаимодействия процессов постепенно стал стандартом сетевого программирования, которого придерживаются основные операционные системы.
Socketчто
SocketЭто дескриптор коммуникационной цепочки, который можно использовать для реализации связи между разными виртуальными машинами или разными компьютерами, а также для реализации связи между разными процессами на одном хосте.
Socketсочинение
Socket = IPадрес + порт + протокол
IP 地址 + 端口 + 协议Уникальный идентификатор формируется для идентификации канала связи.
можно увидеть,SocketНа самом деле даTCP/IPОн хорошо инкапсулирован и скрывает многие детали сети. Это позволяет разработчикам улучшить сетевое программирование. На самом деле мы пишем функцию, которая тщательно инкапсулирует внутренние детали и завершает указанное поведение, передавая параметры.
так сказать всеTCP/UDPДождитесь программирования, в основном согласноSocketстандарт протокола для программирования, другими словами,Socketпредставляет собой набор стандартов, напримерDOM, все языки могут следоватьDOMстандартный интерфейс для реализации собственной логики.
Socketесть свои примитивы, разработчики могут следитьSocketРеализация примитивов на разных языках для выполнения сетевого программирования.
Разговор о веб-сокете
Что такое веб-сокет?
ЭтоHTML5Новый стандартный протокол, предназначенный для реализации полнодуплексной связи между браузером и сервером. мы можем поставитьWebSocketпонимается какWeb + Socket, который представляет собой дуплексную связь.
Что такое дуплексная связь?
То есть в один и тот же момент я могу выступать и отправителем сообщения, и получателем сообщения.
Почему это появляетсяWebSocket
существуетWebSocketПеред выходом передняя частьWebОбщение в основномHTTP,ноHTTP(1 или 2) Сам запрос имеет некоторые недостатки, такие как:
- Информация заголовка является избыточной, и каждый раз, когда отправляется запрос, необходимо передавать большое количество избыточной информации.
- Дуплексная связь невозможна.
Итак, на этом техническом фоне,WebSocketТехнологии пришли и компенсировали этоHTTPДефекты. Но мы не можемHTTP, потому что было использовано слишком много сцен, поэтому я объединил их и позволилWebSocketсоглашение находится вHTTPна договоре. Это обеспечивает плавный переход на новый протокол связи.
WebSocketпринцип общения
WebSocketУстановленоHTTPвыше, что означает, что вы должны построитьWebSocketЕсли тебе нужно идтиHTTP, после прогулки, вашWebSocketУстановлено длительное соединение. Затем, пока он не будет активно разорван, соединение между клиентом и сервером будет поддерживаться и не будет разорвано. Когда есть передача данных, она будет передаваться напрямую, больше не инициируетсяHTTPпросить.
Интерфейсное использованиеWebSocketЭто просто, всего несколькоAPI, можете сами проверить. Но мы должны знать каждыйAPIЧто произошло, только когда мы поймем правду, стоящую за этим, мы сможем по-настоящему понятьWebSocket.
Преимущества веб-сокета
- Поддержка функции push, сервер может передавать данные клиенту.
- уменьшить количество общения, с одной стороны
WebSocketИнформация в заголовке очень маленькая, с другой стороны, ее не нужно выполнять частоHTTPПодключено, вы можете установить постоянное соединение.
Вот рекомендуемая статья, которая очень хорошо написана, вы можете взглянуть:
Каков принцип WebSocket? Почему возможно постоянное соединение?
C/S и B/S Архитектура
Фронтенд-инженерам все же необходимо пониматьwebРазвитие и эволюция архитектуры, когда дело доходит до развития и эволюции, я должен кое-что сказать.C/Sа такжеB/SАрхитектура.
C/S
C/S,Прямо сейчасClient/Server, текущая основная модель архитектуры сетевого программирования.Clentосведомленность клиента,SЭто осведомленность к серверу.
B/S
которыйBrowser/Server, это использоватьWebБраузер как клиентское приложение.
Из приведенного выше введения мы можем сделать вывод, чтоC/SсерединаCИх много, напримерAPP, настольные приложения и т. д. ноB/SсерединаBТолько конкретно для браузера.
Вот проблема,B/Sструктура иC/SВ чем отличия или преимущества по сравнению со структурой?
Преимущества и недостатки Б/С
преимущество
Во-первых: наиболее очевидным является то,B/SОбновления развертывания выполняются быстро, и обновления приложений не требуются, посколькуB/SВсе приложения системы развернуты на сервере и не требуют обновления клиентского ПО. так многоAPPВстроенныйH5,Hybrid. Поскольку обзор не требуется, его можно опубликовать напрямую. Почему вам не нужно проводить аудит из-за междоменных ограничений на внешнем интерфейсе,JSПолучить другую информацию об устройстве невозможно, поэтому можно не беспокоиться о проблемах безопасности и не нужно проводить аудит.
Второе: Кроссплатформенность, потому что операционная система ее поддерживает.Webбраузер, поэтому просто запустите его в браузере.
недостаток
высокие требования к безопасности,B/SАрхитектура построена в глобальной сети и доступна для всех пользователей. пройти черезurlможет получить доступ к ресурсам на стороне сервера, поэтому требования безопасности более чемC/Sпод кайфом.
Примечание
- Я не писал слишком много подробностей, некоторые детали вы можете понять сами, или вы можете приватно пообщаться со мной для технического обмена.
- В этой статье описаны сетевые знания, которыми должен овладеть фронтенд-инженер в целом.
- Количество персонажей в этой книге нормальное, и смотреть на нее не должно быть слишком утомительно (смеется и плачет).
Ссылка на ссылку
Вывод в конце статьи
Прочитав это, мы обнаружим, что сетевые знания не так уж и загадочны.Если вы будете усердно учиться, вы также можете получить знания о сетевых интерфейсах.
общаться с
Серия технических статей Nuggets резюмируется следующим образом: если вы считаете, что это хорошо, нажмите звездочку, чтобы поощрить это, или вы можетеgithubМеня беспокоит волна, непрерывный вывод качественных статей.
Я терминатор исходного кода, приветствую технические обмены, приглашаю следить за моим блогом Nuggets и время от времени делиться знаниями.
Кстати, чего еще не хватает, конечно же, желаю всем благополучного года Свиньи! !