Первая страница
Наша команда
Контакты
О нас

    Головна сторінка



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

Скачати 53.65 Kb.

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




Скачати 53.65 Kb.
Дата конвертації13.03.2017
Розмір53.65 Kb.

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


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

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

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

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


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


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

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

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

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



  • Адресний рядок для введення URI

  • Кнопки навігації "Назад" і "Вперед"

  • Закладки

  • Кнопки поновлення і зупинки завантаження сторінки

  • Кнопка "Додому" для переходу на головну сторінку

Як не дивно, специфікації, яка б визначала стандарти користувацького інтерфейсу браузера, не існує.
Інтерфе́йс користувача́ (англ. user interface, UI, дружній інтерфейс) - засіб зручної взаємодії користувача з інформаційною системою. Сукупність засобів для обробки та відображення інформації, максимально пристосованих для зручності користувача; у графічних системах інтерфейс користувача реалізовується багатовіконним режимом, змінами кольору, розміру, видимості (прозорість, напівпрозорість, невидимість) вікон, їхнім розташуванням, сортуванням елементів вікон, гнучкими налаштовуваннями як самих вікон, так і окремих їхніх елементів (файли, папки, ярлики, шрифти тощо), доступністю багатокористувацьких налаштувань.
Сучасні інтерфейси є результатом багаторічної еволюції, а також того, що розробники частково копіюють один одного. У специфікації HTML5 не вказано, що саме повинен містити інтерфейс браузера, однак перелічено деякі основні елементи. До них відноситься адресний рядок, рядок стану і панель інструментів.
Пане́ль інструме́нтів (англ. toolbar) - елемент графічного інтерфейсу користувача, призначений для розміщення на ньому кількох інших елементів.
Зрозуміло, існують і специфічні функції, такі як менеджер завантажень в Firefox.

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


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



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

  2. Механізм браузера - управляє взаємодією інтерфейсу і модуля відображення.

  3. Модуль відображення - відповідає за виведення запитаного змісту на екран. Наприклад, якщо запитується HTML-документ, модуль відображення виконує синтаксичний аналіз коду HTML і CSS і виводить результат на екран.
    Синтакси́чний ана́ліз (па́рсинг) (англ. parsing) - в інформатиці це процес аналізу вхідної послідовності символів, з метою розбору граматичної структури згідно із заданою формальною граматикою. Синтаксичний аналізатор (англ. parser)


  4. Мережні компоненти - призначені для виконання мережних викликів, таких як HTTP-запити. Їх інтерфейс не залежить від типу платформи, для кожного з яких є власні реалізації.

  5. Виконавча частина користувацького інтерфейсу - використовується для промальовування основних віджетів, таких як вікна і поля зі списками. Її універсальний інтерфейс також не залежить від типу платформи. Виконавча частина завжди застосовує методи користувальницького інтерфейсу конкретної операційної системи.
    Операці́йна систе́ма, скорочено ОС (англ. operating system, OS) - це базовий комплекс програм, що виконує управління апаратною складовою комп'ютера або віртуальної машини; забезпечує керування обчислювальним процесом і організовує взаємодію з користувачем.


  6. Інтерпретатор JavaScript - використовується для синтаксичного аналізу та виконання коду JavaScript.

  7. Сховище даних - необхідно для збереженості процесів. Браузер зберігає на твердий диск дані різних типів, наприклад файли cookie.
    Тверди́й диск або Тверди́й магні́тний диск, або Накопичувач на магнітних дисках (англ. Hard (magnetic) disk drive, англ. HDD), у комп'ютерному сленгу - «вінчестер» (від англ. winchester), - магнітний диск, основа якого виконана з твердого матеріалу.
    У новій специфікації 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.


Скачати 53.65 Kb.

  • Основні функції браузера
  • Структура верхнього рівня
  • Модуль відображення
  • 5 основних модулів відображення для рендерингу сторінок
  • Основна схема роботи
  • Приклади роботи