Как работает JavaScript: глубокий сетевой уровень + как оптимизировать производительность и безопасность

сервер JavaScript браузер Программа перевода самородков
Как работает JavaScript: глубокий сетевой уровень + как оптимизировать производительность и безопасность

Это 12-я статья в серии, изучая JavaScript и его встроенные компоненты. В процессе распознавания и описания этих основных элементов мы также поделитесь тем, как мы строимSessionStackнекоторые эмпирические правила, которым нужно следовать. SessionStack — это легкое приложение JavaScript, которое помогает пользователям просматривать и воспроизводить ошибки в своих веб-приложениях в режиме реального времени, поэтому оно должно быть не только надежным, но и производительным.

Если вы пропустили предыдущие статьи, вы можете найти их ниже:

  1. Как работает JavaScript: обзор движка, среды выполнения, стека вызовов
  2. Как работает JavaScript: 5 советов по оптимизации кода в движке V8
  3. Как работает JavaScript: управление памятью + обработка 4 распространенных утечек памяти
  4. Как работает JavaScript: рост событийного цикла и асинхронное программирование + 5 советов по лучшему программированию с помощью async/await
  5. Как работает JavaScript: глубокое погружение в WebSockets и HTTP/2 с SSE и как выбрать правильный
  6. Как работает JavaScript: конкуренция с WebAssembly + Почему WebAssembly лучше, чем JavaScript в некоторых ситуациях
  7. Как работает JavaScript: внутреннее устройство веб-работника и 5 сценариев, которые вы должны использовать
  8. Как работает JavaScript: жизненный цикл Web Worker и варианты использования
  9. Как работает JavaScript: механизм веб-push-уведомлений
  10. Как работает JavaScript: отслеживание изменений DOM с помощью MutationObserver
  11. Как работает JavaScript: механизмы рендеринга и советы по оптимизации производительности

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

немного истории

49 лет назад было создано нечто под названием ARPAnet. этоРанняя сеть с коммутацией пакетов, тоже первыйПрактический TCP / IP Люкссеть из. Сеть создает связь между Калифорнийским университетом и Стэнфордским исследовательским центром. Двадцать лет спустя Тим Бернерс-Ли опубликовал предложение под названием «Сетка», которое позже стало известно как Всемирная паутина. За эти 49 лет Интернет прошел долгий путь, начиная с двух компьютеров, обменивающихся пакетами данных, до сегодняшнего дня с более чем 75 миллионами серверов, 3,8 миллиарда пользователей и 1,3 миллиарда веб-сайтов.

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

Обзор

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

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

Инженеры часто считают сетевой стек узким местом. Обычно это так, потому что все ресурсы должны быть получены из Интернета, прежде чем можно будет выполнить следующие шаги. Чтобы сделать сетевой уровень более эффективным, он должен играть больше, чем просто роль простого диспетчера сокетов. То, что он представляет нам, — это очень простой механизм получения ресурсов, но на самом деле это полноценная платформа со своими собственными стандартами оптимизации, API и сервисами.

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

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

  • Пользователь вводит URL в адресную строку браузера
  • Получив URL-адрес веб-ресурса, браузер сначала проверяет локальный кэш и кэш приложения и пытается использовать локальную копию для выполнения запроса.
  • Если кеш недоступен, браузер получит доменное имя из URL-адреса и передастDNSIP-адрес запрашивающего сервера. Если домен кэширован, поиск DNS не требуется.
  • Браузер создает HTTP-пакет, в котором говорится, что он запрашивает веб-страницу, расположенную на удаленном сервере.
  • Пакет отправляется на уровень TCP, добавляя собственную информацию поверх пакета HTTP. Эта информация будет использоваться для поддержания запущенного сеанса.
  • Затем пакет передается на уровень IP, основной задачей которого является определение способа отправки пакета от пользователя на удаленный сервер. Эта информация также хранится в верхней части пакета.
  • Пакет отправляется на удаленный сервер.
  • Как только удаленный сервер получает пакет, он отправляет ответ аналогичным образом.

W3CСпецификация времени навигацииПредоставляет API браузера, который предоставляет данные о времени и производительности за жизненным циклом каждого запроса в браузере. Давайте взглянем на эти компоненты, поскольку они играют жизненно важную роль в обеспечении наилучшего взаимодействия с пользователем:

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

управление сокетами

Начнем с терминологии:

  • Источник ——  состоит из протокола приложения, имени домена и порта (например, https,www.example.com, 443)
  • Пул сокетов  --  Набор сокетов, принадлежащих одному источнику (все основные браузеры ограничивают размер пула максимум 6 сокетами)

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

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

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

  • Местный запрос —— 23ms
  • Трансконтинентальный запрос —— 120ms
  • Межконтинентальный запрос —— 225ms

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

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

Некоторые браузеры идут еще дальше. Например, Chrome может изучить рабочие привычки пользователя, чтобы стать быстрее. Он изучает веб-сайты, которые посещают пользователи, и типичные шаблоны просмотра, чтобы предсказать вероятное поведение пользователя и принять меры до того, как пользователь что-либо сделает. Самый простой пример — когда пользователь наводит курсор на ссылку, Chrome предварительно отображает страницу. Если вам интересно узнать больше об оптимизации Chrome, вы можете проверитьВысокопроизводительная браузерная сетьэта глава в книгеWoohoo. IG viit.com/splash/high-afraid….

Кибербезопасность и песочница

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

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

согласование TLS

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

Полное рукопожатие TLS состоит из следующих шагов:

  1. Клиент отправляет на сервер сообщение «Client hello» вместе со сгенерированным клиентом случайным значением и поддерживаемыми наборами шифров.
  2. Сервер отвечает, отправляя клиенту сообщение «Привет серверу» со случайным значением, сгенерированным сервером.
  3. Сервер отправляет свой сертификат аутентификации клиенту и может запросить аналогичный сертификат у клиента. Сервер отправляет сообщение «Привет, сервер готов».
  4. Если сервер запросил сертификат у клиента, клиент отправляет его.
  5. Клиент создает случайный предварительный мастер-секунду и использует открытый ключ в сертификате сервера для его шифрования, а затем отправляет зашифрованный предварительный ключ на сервер.
  6. Сервер получил предварительный мастер-ключ. Сервер и клиент генерируют главный ключ и сеансовый ключ на основе предварительного главного ключа.
  7. Клиент отправляет серверу уведомление «Change cipher spec», указывающее, что клиент начнет хеширование и шифрование сообщений с помощью нового сеансового ключа. Клиент также отправляет сообщение «Клиент готов».
  8. Сервер получает сообщение «Изменить спецификацию шифра» и переключает состояние безопасности уровня записи на симметричное шифрование с использованием сеансового ключа. Сервер отправляет клиенту сообщение «Сервер завершен».
  9. Теперь клиенты и серверы могут обмениваться данными приложений по установленному ими защищенному каналу. Все сообщения, отправляемые с текущего клиента на сервер и обратно, шифруются сеансовым ключом.

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

Та же политика происхождения

Две страницы имеют одинаковое происхождение, если их протокол, порт и имя хоста совпадают.

Вот несколько примеров возможного встраивания ресурсов из разных источников:

  • пройти через<script src=”…”></script>Справочные ресурсы JavaScript. Сообщения об ошибках синтаксиса относятся только к сценариям того же происхождения.
  • пройти через<link rel=”stylesheet” href=”…”>Справочные ресурсы CSS. CSS с разными источниками требует правильного заголовка Content-Type из-за нестрогих правил синтаксиса CSS. В разных браузерах могут быть разные ограничения.
  • пройти через<img>Справочные ресурсы изображения.
  • пройти через<video>а также<audio>Ссылка на мультимедийные ресурсы.
  • пройти через<object>,<embed>а также<applet>Ссылка на ресурсы плагина.
  • Ссылайтесь на ресурсы шрифтов через @font-face . Некоторые браузеры разрешают междоменные шрифты, некоторые — нет.
  • любой пропуск<frame>а также<iframe>Ссылочные ресурсы. Веб-сайты могут использовать флаг заголовка X-Frame-Options, чтобы предотвратить эту форму взаимодействия между источниками.

Приведенный выше список далеко не полный, его цель — подчеркнуть принцип «наименьших привилегий». Браузер предоставляет только те API и ресурсы, которые необходимы коду приложения: приложение предоставляет данные и URL-адреса, браузер форматирует запрос и обрабатывает полный жизненный цикл каждого соединения.

Стоит отметить, что «политика одного и того же происхождения» не является единым понятием. Вместо этого существует набор связанных механизмов для обеспечения соблюдения ограничений на доступ к DOM, управление состоянием файлов cookie и сеансов, сетью и другими компонентами браузера.

Кэширование ресурсов и состояния клиента

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

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

Управлять эффективным и оптимизированным кешем ресурсов сложно. К счастью, браузер делает все сложности за нас, нам просто нужно убедиться, что наш сервер возвращает соответствующие директивы кэширования; чтобы узнать больше, см.Кэшировать ресурсы на клиенте. Вы предоставляете поля заголовка ответа Cache-Control, ETag и Last-Modified для всех ресурсов на вашей странице, верно?

Наконец, часто упускаемая из виду, но важная функция браузера — обеспечение аутентификации, управление сеансами и файлами cookie. Браузеры поддерживают отдельные «файлы cookie» для каждого источника, предоставляют необходимые прикладные и серверные API для чтения и записи новых файлов cookie, данных сеанса и аутентификации, а также автоматически добавляют и обрабатывают соответствующие заголовки HTTP. Вместо этого мы автоматизируем весь процесс.

Возьмите каштан:

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

API и протоколы приложений

Изучив веб-сервисы, мы, наконец, подошли к прикладным API и протоколам. Как мы видели, нижние уровни предоставляют ряд ключевых услуг: управление сокетами и соединениями, обработку запросов и ответов, применение различных политик безопасности, кэширование и многое другое. Каждый раз, когда мы инициируем HTTP, XMLHttpRequest, долгосрочное событие Server-Sent или сеанс WebSocket или открываем соединение WebRTC, мы взаимодействуем с некоторыми или всеми этими базовыми службами.

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

Повысьте производительность и безопасность веб-приложений, выполнив несколько простых шагов.

  • Поле заголовка «Connection: Keep-Alive» всегда используется в запросах. Браузеры делают это по умолчанию. Убедитесь, что сервер использует тот же механизм.
  • Использование правильных полей заголовка Cache-Control, Etag и Last-Modified может сэкономить некоторое время загрузки браузера.
  • Потратьте время на настройку и оптимизацию вашего веб-сервера. Вот где происходит настоящее волшебство! Помните, что этот процесс адаптирован для каждого веб-приложения и типа данных, которые вы передаете.
  • Всегда используйте TLS! Особенно, если в вашем приложении есть какая-либо форма аутентификации.
  • Изучите, какие политики безопасности браузеры предоставляют и применяют в вашем приложении.

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

Вот почему мы усердно работали, чтобы практиковать все приведенные выше советы и многое другое, что мы обсудим в будущих выпусках.

Если хочешьПопробуйте SessionStack, который имеет бесплатный план.

Справочные ресурсы

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории