Если вы являетесь фронтенд-разработчиком или хотите им стать, возможно, вам будет полезно узнать, как работают браузеры. Вы можете заранее увидеть, как написанный вами код работает в браузере и как он отображается пользователю. Этот процесс может дать вам представление о том, какие шаги вы можете предпринять, чтобы решить проблемы, с которыми вы столкнулись.
Что такое веб-браузер?
В настоящее время популярными веб-браузерами на рынке являются Chrome, Firefox, Яндекс Браузер, Opera и Edge. Чтобы просто объяснить основную функцию браузера, можно сказать, что он устанавливает соединение с серверами, подключенными к Интернету, с помощью протокола передачи гипертекста ( HTTP ) и позволяет пользователю просматривать контент. Это содержимое может быть файлами HTML, файлами CSS, файлами PDF, изображениями, видео или другим содержимым.
Браузеры интерпретируют веб-сайты с помощью HTML и CSS и предоставляют нам пригодное для использования изображение. Эти спецификации предоставлены Консорциумом World Wide Web (W3C). Однако, поскольку каждый браузер имеет свой собственный стандарт, созданные веб-сайты могут отображаться в каждом браузере по-разному. Это вызывает несогласованность. Вы можете выполнить различные шаги, чтобы избежать этой ситуации. Мы обсудим этот вопрос в другой теме.
В приведенном ниже списке мы перечислили некоторые организации, устанавливающие эти стандарты. Это может дать вам представление о том, каким стандартам должны соответствовать веб-сайты и сетевые системы:
- IETF (Internet Engineering Task Force): Интернет-стандарты (STD), которые, среди прочего, регулируют настройку и использование URI, HTTP и MIME.
- W3C (Wide Web Consortium): спецификации для языка разметки (например, HTML), определения стилей (например, CSS), DOM, специальные возможности.
- IANA (Управление по присвоению номеров в Интернете): реестры имен и номеров
- Ecma Intl.: стандарты сценариев, особенно для JavaScript.
- ISO (Международная организация по стандартизации): стандарты, регулирующие широкий спектр аспектов, включая кодировку символов, управление веб-сайтом и дизайн пользовательского интерфейса.
Не будет ошибкой сказать, что существует большая разница между браузерами прошлого и браузерами сегодняшнего дня. С современными браузерами мы можем очень легко организовывать видеоконференции, разрабатывать плагины и выполнять 3D-операции, но это не является предметом данной статьи.
Компоненты пользовательского интерфейса браузеров
Все браузеры имеют общие черты. Когда вы запускаете разные браузеры, вы увидите панель поиска, клавиши «вперед» и «назад», закладки, кнопку обновления, область вкладок, строку состояния, область содержимого и т. д. Однако для них нет общего стандарта. Все дело в том, что разработчики браузеров и дизайнеры пользовательского интерфейса хотят предоставить своим пользователям.
Высокоуровневая структура браузера
- Пользовательский интерфейс: в пользовательском интерфейсе есть такие элементы, как панель инструментов, кнопки «вперед/назад» и меню закладок.
- Механизм браузера: обеспечивает взаимодействие между пользовательским интерфейсом и механизмом рендеринга.
- Механизм рендеринга: он отвечает за отображение запрошенного контента на экране.
- Сеть: он управляет различными протоколами, такими как HTTP-запрос, WebSocket и WebRTC между браузером и серверами.
- Интерпретатор JavaScript: он анализирует коды JavaScript на странице для их запуска.
- Серверная часть пользовательского интерфейса: предоставляет пользователям базовые графические компоненты, такие как поля со списком и окна.
- Сохранение данных: он хранит и предоставляет доступ к данным, которые должен хранить браузер. Он также поддерживает системы хранения, такие как файлы cookie, localStorage, IndexedDB, WebSQL и FileSystem.
