- Оригинальный адрес:Inside look at modern web browser (part 2)
- Оригинальный автор:Mariko Kosaka
- Перевод с:Программа перевода самородков
- Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
- Переводчик:CoolRice
- Корректор:ThomasWhyne, tian-li
что происходит при навигации
Это второй из четырех блогов о внутреннем устройстве Chrome. существуетпредыдущий постВ разделе мы рассмотрели, как разные процессы и потоки обрабатывают разные части браузера. В этом посте мы более подробно рассмотрим, как каждый процесс и поток обмениваются данными для демонстрации веб-сайта.
Давайте рассмотрим простой пример использования для просмотра веб-страниц: вы вводите URL-адрес в свой браузер, и браузер извлекает данные из Интернета и отображает страницу. В этой статье мы сосредоточимся на той части, где пользователь запрашивает сайт, а браузер подготавливает страницу к отображению, то есть на навигации.
он запускается как процесс браузера
Рис. 1. Пользовательский интерфейс браузера вверху, диаграмма процессов браузера с пользовательским интерфейсом, сетью и потоками хранилища внизу
как и мыЧасть 1: CPU, GPU, память и многопроцессорные архитектурыКак описано в , все, что находится за пределами вкладки, обрабатывается процессом браузера. Процесс браузера имеет много потоков, таких как поток пользовательского интерфейса, который рисует кнопки браузера и поля ввода, сетевой поток, который обрабатывает сетевой стек для получения данных из Интернета, поток хранилища, который контролирует доступ к файлам, и так далее. Когда вы вводите URL-адрес в адресную строку, ваш ввод обрабатывается потоком пользовательского интерфейса процесса браузера.
простая навигация
Шаг 1. Обработайте ввод
Когда пользователь начинает вводить текст в адресной строке, первое, что спросит UI-поток, это «это поисковый запрос или URL-адрес?». В Chrome адресная строка также является строкой ввода поиска, поэтому поток пользовательского интерфейса должен проанализировать и решить, следует ли отправить ваш запрос в поисковую систему или на запрашиваемый веб-сайт.
Рисунок 1. Поток пользовательского интерфейса спрашивает, является ли ввод поисковым запросом или URL-адресом.
Шаг 2: Начните навигацию
Когда пользователь нажимает клавишу Enter, поток пользовательского интерфейса разрешает сетевые вызовы для получения содержимого сайта. Анимация загрузки будет отображаться в углу вкладки, а сетевой поток пройдет через соответствующие протоколы, такие как поиск DNS, и установит соединение TLS для запроса.
Рисунок 2. Поток пользовательского интерфейса указывает сетевому потоку перейти кmysite.com
В этот момент сетевой поток может получить заголовок перенаправления сервера, например HTTP 301. В этом случае сетевой поток сообщит потоку пользовательского интерфейса, что сервер запрашивает перенаправление. Затем будет инициирован другой запрос URL.
Шаг 3: Прочитайте ответ
Рисунок 3: Заголовок ответа с Content-Type и полезной нагрузкой в виде фактических данных
Как только тело ответа (полезная нагрузка) начинает получаться, сетевой поток при необходимости просматривает первые несколько байтов потока данных. В поле Content-Type ответного сообщения будет объявлен тип данных, но он может отсутствовать или быть неправильным, поэтомуОбнюхивание MIME-типаДля решения этой проблемы. Этоисходный кодПрокомментировал "сложные вопросы". Вы можете прочитать комментарии, посмотреть, как разные браузеры сопоставляют тип контента и полезную нагрузку.
Если ответ представляет собой HTML-файл, следующим шагом будет передача данных в процесс рендеринга, но если это zip-файл или что-то в этом роде, это означает, что это запрос на загрузку, поэтому данные необходимо передать диспетчеру загрузки.
Рисунок 4. Сетевой поток спрашивает, являются ли данные ответа HTML с защищенного веб-сайта
также будет осуществляться в это времяSafeBrowsingОсмотр. Если имя домена и данные ответа соответствуют известному вредоносному веб-сайту, веб-поток отображает страницу с предупреждением. Кроме того, будетCross Origin Read Bблокировка (CORB)Убедитесь, что конфиденциальные данные из разных источников не передаются средству визуализации.
Шаг 4: Найдите процесс рендеринга
Когда все проверки завершены и сетевой поток уверен, что браузер перейдет на запрошенный сайт, сетевой поток сообщает потоку пользовательского интерфейса, что все данные готовы. Поток пользовательского интерфейса будет искать процесс визуализации, чтобы начать визуализацию веб-страницы.
Рисунок 5: Сетевой поток сообщает потоку пользовательского интерфейса найти процесс рендеринга
Поскольку ответ на сетевые запросы может занять сотни миллисекунд, можно применить оптимизацию. Когда поток пользовательского интерфейса шага 2 отправляет запрос URL-адреса в сетевой поток, он уже знает, на какой сайт они перейдут. Одновременно с сетевым запросом UI-поток параллельно пытается активно найти или запустить процесс рендеринга. Таким образом, если все идет так, как ожидалось, процесс рендеринга уже находится в режиме ожидания, когда сетевой поток получает данные. Если навигация перенаправляется между доменами, резервный процесс может не использоваться, и в этом случае может использоваться другой процесс.
Шаг 5: Отправить навигацию
Теперь, когда данные и процесс рендеринга готовы, процесс браузера отправит IPC (межпроцессное взаимодействие) в процесс рендеринга для отправки навигации. Он также передает поток данных, поэтому процесс рендеринга может продолжать получать данные HTML. Как только процесс браузера получает подтверждение того, что процесс рендеринга завершен, навигация завершается и начинается синтаксический анализ загрузки документа.
На данный момент адресная строка была обновлена, а индикатор безопасности и пользовательский интерфейс настроек сайта отражают информацию о сайте для новой страницы. История сеансов для этой вкладки будет обновлена, поэтому кнопки «вперед» и «назад» будут переходить на сайт, на который вы только что перешли. Когда вы закрываете вкладку или окно, история сеанса сохраняется на диск, чтобы оптимизировать восстановление вкладки/сеанса.
Рисунок 6: IPC между браузером и процессом визуализации, запрашивающим визуализацию страницы.
Дополнительный шаг: начальная загрузка завершена
Как только навигация зафиксирована, процесс рендеринга начинает загрузку ресурсов и рендеринг страницы. Подробнее о том, что происходит на этом этапе, мы расскажем в следующей статье. Как только процесс рендеринга становится «завершенным». Он отправит IPC обратно в процесс браузера (этоonloadПроисходит после того, как событие было запущено и выполнено). В этот момент поток пользовательского интерфейса останавливает анимацию загрузки на вкладке.
Я говорю «конец», потому что клиентский JavaScript по-прежнему может загружать дополнительные ресурсы и отображать новые представления после этого момента.
Рис. 7. Процесс рендеринга отправляет IPC процессу браузера, уведомляя страницу о том, что она «загружена».
Перейти на другой сайт
Простая навигация закончилась! Но что, если пользователь введет другой URL в адресной строке? Что ж, процесс браузера выполняет те же действия для перехода на другой сайт. Но прежде чем он это сделает, он проверяет, заботится ли об этом отображаемый в данный момент сайт.beforeunloadмероприятие.
beforeunloadПредупреждение «Покинуть этот сайт?» может быть создано, когда вы пытаетесь уйти или закрыть вкладку. Все на вкладке, включая ваш код JavaScript, обрабатывается процессом рендеринга, поэтому, когда поступает новый запрос навигации, процесс браузера должен свериться с текущим процессом рендеринга.
Уведомление:не добавляйте безусловноеbeforeunloadобработчик. Это создает большую задержку, потому что обработчик должен выполниться до начала навигации. Этот обработчик событий следует добавлять только при необходимости, например, если пользователя нужно предупредить о том, что он может потерять данные, введенные на странице.
Рисунок 8: Процесс браузера отправляет процесс рендеринга IPC, сообщите ему, чтобы перейти на другой сайт
Если процесс рендеринга начал навигацию (например, пользователь щелкает ссылку или запускается клиентский JavaScriptwindow.location = "https://newsite.com"), процесс рендеринга сначала проверитbeforeunloadобработчик события. Затем он выполняет те же шаги, что и браузер, начиная навигацию. Единственное отличие состоит в том, что запросы навигации отправляются процессом рендеринга процессу браузера.
Когда новый сайт, по которому осуществляется переход, отличается от отображаемого в данный момент сайта, вызывается отдельный процесс визуализации для обработки новой навигации, при этом текущий процесс визуализации сохраняется для обработки аналогичныхunloadмероприятие. Для получения дополнительной информации, проверьтеОбзор жизненного цикла страницыи как использоватьAPI цикла объявления страницыКрючковое событие.
Рисунок 9: 2 IPC (от процесса браузера к новому процессу рендеринга) сообщают об отрисовке страницы и говорят старому рендереру о выгрузке
Если есть сервисный работник
Недавним изменением в процессе навигации стало введениеservice worker. Сервисные работники — это способ записи сетевых прокси в код вашего приложения, что позволяет веб-разработчикам лучше контролировать локально кэшированный контент и когда новые данные извлекаются из сети. Если сервис-воркер настроен на загрузку страниц из кеша, нет необходимости запрашивать данные из сети.
Важно помнить, что Service Workers — это код JavaScript, который запускается в процессе рендеринга. Но когда приходит навигационный запрос, как процесс браузера узнает, что на сайте есть сервис-воркер?
Рисунок 10: Сетевой поток в процессе браузера, ищущий область действия сервис-воркера
При регистрации сервис-воркера оставьте область действия сервис-воркера в качестве ссылки (вы можетеThe Service Worker LifecycleПодробнее об областях см. в ). Когда происходит навигация, сетевой поток использует область действия зарегистрированного работника службы для проверки имени домена.Если работник службы уже зарегистрирован для URL-адреса, поток пользовательского интерфейса находит поток рендеринга для выполнения кода работника службы. Service Worker может загружать данные из кеша, не запрашивая данные из сети, или может запрашивать новые ресурсы из сети.
Рисунок 11: Поток пользовательского интерфейса в браузере запускает процесс рендеринга для обработки сервис-воркеров; затем рабочий поток в процессе рендеринга запрашивает данные из сети
Предварительная загрузка навигации
Вы можете видеть, что если сервис-воркер в конце концов решит запросить данные из сети, двусторонний обмен между процессом браузера и процессом рендеринга может вызвать задержки.Предварительная загрузка навигации— это механизм ускорения этого процесса за счет загрузки ресурсов параллельно с запуском сервис-воркера. Он помечает эти запросы заголовком, который позволяет серверу принимать решение об отправке другого контента для этих запросов, например, обновлять только данные, а не полный документ.
Рис. 12. Поток пользовательского интерфейса в процессе браузера запускает процесс рендеринга для обработки сервис-воркера, одновременно запуская сетевые запросы
Суммировать
В этом посте мы рассмотрели, что происходит во время навигации и как код вашего веб-приложения (например, заголовки ответов и клиентский JavaScript) взаимодействует с браузером. Знание того, какие шаги предпринимает браузер для получения данных по сети, упрощает понимание того, почему были разработаны такие API, как предварительная загрузка навигации. В следующей статье мы рассмотрим, как браузеры анализируют HTML/CSS/JavaScript для отображения страниц.
Понравилась ли Вам эта статья? Если у вас есть какие-либо вопросы или предложения для будущих статей, добро пожаловать в раздел комментариев ниже или в Twitter.@kosamariПо выходу из ваших комментариев.
Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.
Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.