Принципи роботи браузерів

1.5. Принципи роботи браузерів

http://www. /ru/tutorials/internals/howbrowserswork/#The_rendering_engine

Для веб-дизайнерів і веб-розробників дуже важливо розуміти, як працюють браузери. Це важливо, тому що від цього залежить працездатність сайтів. Різні браузери обробляють сайти дещо по-різному.

Браузери використовують протокол передачі гіпертексту, або HTTP, щоб відправити запит серверу на отримання вмісту сторінки, і отримати цей вміст. Після того, як дані отримані, вони обробляються движком браузера, і результат видається користувачеві.

Відображення медіа-контенту залежить від того, чи підтримує браузер конкретні типи файлів, або від наявності встановлених плагінів.

Основні функції браузера

Основним призначенням браузера є відображення веб-ресурсів. Для цього на сервер відправляється запит, а результат виводиться у вікні браузера. Під ресурсами в основному розуміють HTML-документи, однак це також може бути PDF-файл, картинка чи інший зміст. Розташування ресурсу визначається за допомогою URI (уніфікованого ідентифікатора ресурсів).

Те, яким чином браузер обробляє і відображає HTML-файли, визначено специфікаціями HTML і CSS. Вони розробляються Консорціумом W3C, який впроваджує стандарти для Інтернету.

Багато років браузери відповідали лише частини специфікацій, і для них створювалися окремі розширення. Для веб-розробників це означало серйозні проблеми з сумісністю. Сьогодні більшість браузерів в більшій чи меншій мірі відповідає всім специфікаціям.

Користувацькі інтерфейси різних браузерів мають багато спільного. Основними елементами інтерфейсу браузера є:

Адресний рядок для введення URI Кнопки навігації "Назад" і "Вперед" Закладки Кнопки поновлення і зупинки завантаження сторінки Кнопка "Додому" для переходу на головну сторінку

Як не дивно, специфікації, яка б визначала стандарти користувацького інтерфейсу браузера, не існує. Сучасні інтерфейси є результатом багаторічної еволюції, а також того, що розробники частково копіюють один одного. У специфікації HTML5 не вказано, що саме повинен містити інтерфейс браузера, однак перелічено деякі основні елементи. До них відноситься адресний рядок, рядок стану і панель інструментів. Зрозуміло, існують і специфічні функції, такі як менеджер завантажень в Firefox.

Структура верхнього рівня

Нижче перелічено основні компоненти браузера.

Інтерфейс користувача - містить адресний рядок, кнопки "Назад" і "Вперед", меню закладок і т. Д. До нього відносяться всі елементи, крім вікна, в якому відображається запитувана сторінка. Механізм браузера - управляє взаємодією інтерфейсу і модуля відображення. Модуль відображення - відповідає за виведення запитаного змісту на екран. Наприклад, якщо запитується HTML-документ, модуль відображення виконує синтаксичний аналіз коду HTML і CSS і виводить результат на екран. Мережні компоненти - призначені для виконання мережних викликів, таких як HTTP-запити. Їх інтерфейс не залежить від типу платформи, для кожного з яких є власні реалізації. Виконавча частина користувацького інтерфейсу - використовується для промальовування основних віджетів, таких як вікна і поля зі списками. Її універсальний інтерфейс також не залежить від типу платформи. Виконавча частина завжди застосовує методи користувальницького інтерфейсу конкретної операційної системи. Інтерпретатор JavaScript - використовується для синтаксичного аналізу та виконання коду JavaScript. Сховище даних - необхідно для збереженості процесів. Браузер зберігає на твердий диск дані різних типів, наприклад файли cookie. У новій специфікації HTML (HTML5) є схвалення терміну "веб-база даних": це повноцінна (хоча й полегшена) браузерна база даних.

Слід зазначити, що Chrome, на відміну від більшості браузерів, використовує кілька екземплярів модуля відображення, по одному в кожній вкладці, які представляють собою окремі процеси.

Модуль відображення

Модуль відображення відповідає за виведення запитаного змісту на екрані браузера.

За замовчуванням він здатний відображати HTML- і XML-документи, а також картинки. Спеціальні модулі (розширення для браузерів) роблять можливим відображення іншого змісту, наприклад PDF-файлів. Однак основними функціями є відображення HTML-документів і картинок, відформатованих за допомогою стилів CSS.

5 основних модулів відображення для рендерингу сторінок

	Trident - був розроблений компанією Microsoft. Використовується в багатьох браузерах: Internet Explorer, Windows Mobile, AOL Browsers
	Presto - розроблений для браузера Opera, але зараз браузер Opera використовує движок Blink.
	WebKit - це ще один движок з відкритим кодом, він розроблявся такими компаніями як Google, Apple, Nokia та іншими. Його спочатку було розроблено для платформи Linux і адаптовано компанією Apple для Mac OS і Windows. Детальніші відомості можна знайти на сайті webkit. org. Використовується в браузері Safari від Apple, і в багатьох браузерах мобільних пристроїв.
	Gecko - це движок з відкритим вихідним кодом, який було розроблено ще за часів браузера Netscape, але почав використовуватися тільки з браузера Mozilla Firefox.
	Blink - заснований на WebKit, але він розробляється Google. Використовується браузером Google Chrome, а також браузерами Opera, починаючи з 14 версії і в пристроях на Android починаючи з версії 4.4.

Велика частина відмінностей браузерів випливає з відмінностей у модулі рендерингу сторінок. Ці відмінності приводять до того, що сторінки в різних браузерах виглядають дещо по-різному.

Модулі відображення продовжують розвиватися. Але проблема в тому, що старі версії браузерів працюють на старих версіях движків. Саме тому веб-дизайнеру потрібно тестувати сторінки не просто в декількох браузерах, але також в декількох версіях цих браузерів.

Основна схема роботи

Модуль відображення отримує зміст запитаного документа за протоколом мережного рівня, зазвичай, фрагментами по 8 КБ.

Схема подальшої роботи модуля відображення виглядає наступним чином.

Модуль відображення виконує синтаксичний аналіз HTML-документа і переводить теги у вузли DOM в дереві змісту. Інформація про стилі витягується як із зовнішніх CSS-файлів, так і з елементів style. Ця інформація та інструкції по відображенню в HTML-файлі використовуються для створення ще одного дерева - дерева відображення.

Воно містить прямокутники з візуальними атрибутами, такими як колір і розмір. Прямокутники розташовуються в тому порядку, в якому вони повинні бути виведені на екран.

Після створення дерева відображення починається компонування елементів, в ході якої кожному вузлу присвоюються координати точки на екрані, де він повинен з'явитися. Потім виконується промальовування, при якому вузли дерева відображення послідовно промальовуються за допомогою виконавчої частини користувальницького інтерфейсу.

Важливо розуміти, що це послідовний процес. Для зручності користувача модуль відображення намагається вивести зміст на екран якнайскоріше, тому створення дерева відображення і компоновка можуть початися ще до завершення синтаксичного аналізу коду HTML. Одні частини документа аналізуються і виводяться на екран, в той час як інші тільки передаються по мережі.

Приклади роботи

Схема роботи модуля відображення WebKit.

Схема роботи модуля відображення Mozilla Gecko

Як видно з рисунків, в WebKit і Gecko використовується різна термінологія, проте схеми їх роботи практично ідентичні.

У Gecko дерево візуально відформатованих елементів називається деревом фреймів (frame tree), в якому кожен елемент є фреймом. У WebKit використовується дерево відображення (render tree), що складаються з об'єктів відображення (render objects). Розміщення елементів в WebKit називається компонуванням, або версткою (layout), а в Gecko - обтіканням (reflow). Об'єднання вузлів DOM і візуальних атрибутів для створення дерева відображення називається в WebKit суміщенням (attachment). Невелика відмінність Gecko, що не має відношення до семантики, полягає в тому, що між HTML-файлом і деревом DOM знаходиться ще один рівень. Він називається буфером змісту (content sink) і служить для формування елементів DOM.