Рассмотрим сначала общие принципы работы браузера, затем более подробно опишем его работу с учетом разделения элементов на блочные и строчные. Наконец, приведём уточнённые правила построения браузером самого распространённого элемента на страницах — абзаца.
Общие принципы
Браузер, интерпретируя HTML-код, формирует на экране документ, который видит пользователь. Элементы отображаются последовательно — слева направо (строчные) и сверху вниз (блочные), в соответствии с порядком следования элементов в HTML-коде. Нельзя написать код на “чистом” HTML так, чтобы браузер сначала нарисовал линию в нижней части экрана, а потом вывел текст в верхней.
Когда рисование программируют на Бейсике или Си, есть возможность вывести элемент в любое место экрана по своему усмотрению. HTML-программы таким свойством не обладают. HTML не работает с экранными координатами.
Программируя на HTML, нельзя ориентироваться на определенные размеры окна документа. Браузер использует то окно, которое предоставил ему пользователь. Значит, одна и та же HTML-страница может отображаться на экране немного по-разному на разных компьютерах и даже на одном компьютере, если настроить его по-другому: изменить разрешение экрана или размеры окна браузера.
Урок 3. Как работает браузер.
В одном окне можно увидеть такой документ:
Тот же самый документ в другом окне смотрится по-другому:
Все эти “причуды” браузера заставляют новичка на вопрос “Как работает браузер?” ответить кратко: “Плохо!” Однако отмеченные минусы — это лишь плата за универсальность HTML-кода. И, надо сказать, плата не так высока.
Обозначенные ограничения оборачиваются положительной стороной HTML, делая его независимым от компьютерной платформы (DOS, Windows, Unix, MacOs, ) и параметров видеовывода конкретного компьютера (CGA, EGA, VGA, SVGA, ), в частности, от количества экранных точек (пикселов) и текущих размеров окна браузера.
Это означает, что наш HTML-документ способны увидеть все, у кого на компьютере установлена программа-браузер. И становится неважным, какой тип компьютера и какой тип операционной системы предпочитает конкретный пользователь. Именно это свойство HTML-документов играет такую важную роль в глобальной компьютерной сети Интернет, где представлены все мыслимые типы компьютеров и операционных систем.
Уточненные правила работы браузера
Опишем более подробно правила работы браузера.
Элемент HTML визуально совпадает с окном браузера. В него вложен элемент BODY , который по умолчанию имеет отступы от границ родителя (то есть от границ окна).
Внутри BODY располагается цепочка блочных элементов. Даже если разработчик записал строчный элемент или неразмеченный фрагмент текста, он будет помещён в специально созданный безымянный блок автоматически.
Браузер выводит блочные элементы друг за другом сверху вниз. При этом ширина блочного элемента совпадает с доступной шириной родителя, а высота определяется по содержимому.
Каждый раз, когда внутри блока обнаруживаются блочные элементы, они строятся на экране прямоугольниками сверху вниз по ширине родителя.
Как работают Web браузеры
Если в блоке есть смесь блочных и строчных элементов (на уровне прямых потомков), то все строчные элементы (а также неразмеченный текст) собираются в безымянные блоки и строятся по описанным выше правилам построения блоков.
Если внутри блока нет других блоков, а только строчные элементы, браузер выводит их в строку, пытаясь заполнить всю ширину родительского блока. Если материал в одной строке не умещается, он переносится на следующие строки.
Строки по умолчанию выравниваются со стороны, принятой для текущего языка (слева для русского).
При изменении ширины окна браузер перевёрстывает страницу: ширину блоков подгоняет под новый размер, ширину строк под изменившуюся ширину содержащих их блоков.
Такую работу браузера называют вёрсткой потоком , а в силу подгонки материала под текущий размер окна — резиновой вёрсткой.
Правила построения абзаца
Абзац — блочный элемент, поэтому правила его построения подчиняется общим правилам построения блока: блок выводится прямоугольником во всю ширину родительского элемента. Если абзац является прямым потомком BODY , его ширина совпадает с шириной окна браузера (не считая предопределённых отступов BODY от рамки окна).
Внутри абзаца располагаются строчные элементы. Они выводятся на экран обычным образом: браузер заполняет текущую экранную строку до упора в правый край блока P , после чего остаток переносится на следующие строки.
Отметим, что для абзаца характерны отступы по вертикали (сверху и снизу), которыми браузер обрамляет содержащий абзац прямоугольник. Прямоугольники обычных блоков (таких, как контейнер DIV ) следуют друг за другом плотно, а абзацы отделяются сверху и снизу промежутками размером в одну строку.
Таким образом, правила построения абзаца можно сформулировать следующим образом:
- Перед абзацем формируется промежуток размером в одну строку.
- Абзац выравнивается по левому краю (для языков с написанием слева направо).
- Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде.
- Перенос текста на новую строку выполняется, если очередное слово не помещается в экранной строке, а не тогда, когда в HTML-коде начинается новая строка.
- После абзаца формируется промежуток размером в одну строку.
В дополнение к приведённым правилам отметим, что промежутки между абзацами не удваиваются. Это эффект называется , он подробно рассматривается в разделе Тема 2/Стилевые свойства/Внешние отступы (ссылка).
Источник: robotlandia.ru
Как работает браузер? Простыми словами о сложном
Браузер — самая главная программа любого компьютера или смартфона. Без него цифровое устройство, как без души, ведь большая часть работы за компьютером связана с интернетом. Возможно, вам будет интересно знать как работает веб-браузер. А тех, кто не подписан на мой блог — прошу подписаться!
Графический интерфейс пользователя (GUI)
Когда мы открываем браузер, первым делом видим графический интерфейс пользователя. Он включает в себя адресную строку, кнопки управления (назад, вперед, обновить) и область отображения веб-страниц. GUI обеспечивает нам возможность взаимодействовать с браузером, вводить URL-адреса, щелкать по ссылкам и использовать другие функции.
Графический интерфейс есть в любом браузере и может отличаться в зависимости от версии и самого обозревателя. Разница есть, но небольшая и интуитивно понятная.
Как работает браузер? Простыми словами о сложном
Движок рендеринга
Одной из ключевых задач браузера является отображение веб-страниц. Для этого используется специальный компонент, называемый движком рендеринга. Он обрабатывает HTML-код, CSS-стили и JavaScript-скрипты, преобразуя их в визуальное представление, которое мы видим на экране.
Отвечает за расположение элементов на странице, их стилизацию, отображение изображений и выполнение других задач, связанных с отображением контента. Самый популярный движок на сегодняшний день — Chromium. На нем построены десятки современных обозревателей.
Протоколы и сетевые запросы
Браузеры осуществляют связь с веб-серверами с помощью различных сетевых протоколов, таких как HTTP (Hypertext Transfer Protocol) и HTTPS (HTTP Secure). Когда мы вводим URL-адрес в адресной строке или щелкаем по ссылке, браузер создает сетевой запрос к соответствующему серверу.
Запрос содержит информацию о том, какую веб-страницу или ресурс мы хотим получить. После отправки запроса сервер обрабатывает его и отправляет обратно веб-страницу или другой контент, который запрашивался. И далее уже подключается движок рендеринга, который превращает полученные данные в веб-страницу.
Кэширование
Для ускорения загрузки веб-страниц и уменьшения нагрузки на серверы, браузеры используют кэширование. Когда мы посещаем веб-страницу, сохраняется ее копия на компьютере или мобильном устройстве. При следующем обращении к этой странице, браузер проверяет, есть ли у него сохраненная копия в кэше.
Если она есть и не изменилась, обозреватель загружает страницу из кэша, что позволяет сэкономить время загрузки. Кэш нужен как для быстрой работы браузера, так и для снижения нагрузки на конечный сервер — ему не придется каждый раз отдавать одни и те же данные.
На самом деле работа браузера — очень сложный процесс, порой, требующий большой вычислительной мощности. Именно по этой причине на старом железе современные сайты могут работать очень медленно.
Каким браузером пользуетесь вы? Напишите в комментариях
Подписывайтесь на мой канал в Телеграм, там я публикую интересные новости технологий и провожу конкурсы с призами в виде гаджетов:
Источник: dzen.ru
Как работает веб браузер
Веб браузер — программа, через которую осуществляется просмотр интернет-страниц. Общая архитектура всех популярных обозревателей похожа: она состоит из нескольких компонентов, независимых друг от друга, которые впоследствии объединяются через специальные интерфейсы.
Статьи по теме:
- Как работает веб браузер
- Что такое браузер
- Как настроить браузер на компьютере
Инструкция
Сначала появляются настройки сети: JavaScript, XML парсер и Display Backend (обработка событий на экране). Это 4 независимых модуля, которые осуществляют свое функционирование в рамках графического движка. Далее программируется высокоуровневый движок, который, как и интерфейс пользователя, способен сохранять определенные данные. Существуют еще дополнительные компоненты (плагины, мультимедиа, модуль работы с почтой, помощь, инструменты разработчика и т. п.), однако они не так влияют на структуру обозревателя.
Каждая составная часть архитектуры находится на определенном уровне и может взаимодействовать только с ближайшим элементом. Поэтому архитектура браузера называется многоуровневой.
Пользовательский интерфейс является своеобразным буфером, которые существует между движком и пользователем. Именно он принимает все пожелание от юзера, дает ему все возможности и обрабатывает все его действия. Интерфейс помогает обеспечить стандартный набор функций. Высокоуровневый движок отвечает за обработку страницы, т. е. за вывод всей графической части. Также он начинает загружать страницу, обновляет их, переходит назад или вперед, работает с закладками, историей и настройками, которые влияют на работу графики.
Сам же графический движок является главной частью любого браузера. Он отображает содержимое ресурса и анализирует HTML и XML, учитывая влияние CSS и JS, а также других объектов (изображения, flash). На основе всех данных, которые собрал движок, осуществляется генерация макета, который пользователь видит на мониторе.
Компоненты сеть, JS, XML парсер являются специализированными частями программы, которые работают над соответствующими параметрам. Display Backend связан с ОС и обеспечивает вывод самой примитивной графики (скролбары, формы, оформление окон и т. п.), которая зависит от операционки.
Благодаря компонентной системе браузер может легко менять дизайн, легче локализовать ошибки программы, каждый компонент улучшается отдельно и не влияет на программу в целом, каждый компонент можно использовать отдельно.
Источник: www.kakprosto.ru