Що веб-браузер дозволяє виконувати. Підключення до Інтернету та знайомство з Інтернет. Застосування правил у порядку пріоритету
Вітаю всіх читачів свого блогу на зв'язку Роман Чуешов. Ось уже багато років люди заходять до мережі, зовсім не замислюючись про програми, якими вони при цьому користуються. Ось ви знаєте, що таке інтернет-браузер і як він працює? Саме про це сьогодні й йтиметься. Рекомендую дочитати статтю до кінця, де я розповім чому важливо встановлювати кілька браузерів до себе на комп'ютер і вміти правильно їх налаштовувати. Отже, наперед.
Web Browser як він є
Знайомство з браузером я пропоную почати з визначення.
Веб-браузер (ще одна назва) – спеціальна програма, яка дозволяє переглядати розміщені в Мережі сайти та інформацію, що міститься на них.
Працює це так:
- програма надсилає http-запит на отримання інформації;
- сервер надає доступ;
- програма опрацьовує дані за затвердженими стандартами;
- на екрані з'являється інтерпретоване зображення коду.
З'явилися браузери ще в момент винайдення інтернету і поступово заполонили всі електронні пристрої. Сьогодні ж на кожному комп'ютері, планшеті або смартфоні буде встановлено один із веб-браузерів.
Історія створення Web Browser
Найпершим Web Browser, що має графічний інтерфейс, став . Але після того, як співробітники цієї компанії перейшли в Netscape і зайнялися розробкою нового продукту, розвиток «Мозаїка» було припинено. На щастя, вихідний код потрапив до рук Microsoft. Як результат, на світ з'явився всесвітньо відомий Internet Explorer.
Тут багато хто може здивовано скрикнути: чому ж тоді саме IE став таким популярним, а про Mosaic багато хто навіть не чув? Справа в тому, що Microsoft зробила один дуже важливий і, як виявилося, дуже розумний хід - вона включила браузер обов'язкове оновлення для операційної системи (на той момент це був Windows 95). Отже, у користувачів просто не залишалося вибору – вони користувалися саме IE.
Internet Explorerшвидко завоював ринок (95% – практично весь світ), а робота Netscape було закінчено. При цьому розробники, закривши проект, опублікували недороблений код під вільною ліцензією, тож у майбутньому його змогли використати для створення .
У 1995 році також на світ з'явилася Opera. Ці два оглядачі були змушені швидко розвиватися, щоб хоч трохи відвоювати ринок, що вони успішно й робили. І поки Microsoft не діяла (справді, навіщо намагатися, коли ти є монополістом?!), Мазіла та Опера стали досить популярними. Почалася справжня битва за користувачів, яка підштовхнула ринок до створення нового продукту – .
Сучасні Web Browser
Якщо ви розібралися з поняттям Web Browser, можна переходити до вибору програми, яка задовольнятиме всі вимоги. Трохи вище вже промайнуло кілька назв – більшість із них досі на плаву.
Отже, найпопулярнішими є:
- Opera;
- Internet Explorer;
- Apple Safari;
- Яндекс Браузер.
Гугл Хром на сьогоднішній день є найпоширенішим браузером. Він був створений на основі Chromium і працює на движку WebKit (Вебкіт). За кілька років оглядач зміг завоювати 25% ринку.
І зробив він це за рахунок простоти, функціоналу та швидкості завантаження сторінок, а також наявності різноманітних розширень. Зазначимо, що Яндекс, будучи головним конкурентом Google, нещодавно представив свою версію програми. Питання, чи захочуть користувачі завантажити його? Я думаю, так, хочуть.)
Mozilla Firefox популярний у Росії, а також Німеччині та Польщі. Однак поступово він втрачає свої позиції і незабаром може скотитися до рівня Opera. Що стосується останнього, то він використовувався переважно для мобільних пристроїв, а зараз і зовсім канув у лету. Те саме відбувається і з IE, яким користуються у вкрай поодиноких випадках.
Окремо варто згадати про Сафарі, який було розроблено спеціально для продукції Apple. Входить до списку встановлених програм на Mac OS X та iOS.
А ось Phoenix і Аміго - браузери, які порядком набридли користувачам. Вони безкоштовні і встановлюються автоматично при відвідуванні деяких сайтів. Більше нагадують вірус, який хочеться видалити з комп'ютера якнайшвидше.
Пам'ятайте, що вам доведеться працювати з сайтами, тому дуже важливо подбати про правильне відображення веб-ресурсу в кожному браузері. Т.к. ми з вами займатимемося ще й версткою сайту, тобто. перетворювати намальований макет блогу у фотошопі, шляхом тегової розмітки, на візуальне відображення у браузері.
Сьогодні користувачі користуються різними браузерами, тому однакове відображення інформації (сайту) у них дуже важливе.
У мене на комп'ютері встановлені всі найпоширеніші браузери: Google Chrome, Mozilla Firefox, Opera, Internet Explorer, Apple Safari для Windows, Яндекс Браузер. Завантажити їх можна безкоштовно в інтернеті на офіційних сайтах.
На цьому поки що все. Встановлюйте браузери собі на ПК і читайте статті з даної рубрики, і ви навчитеся правильно налаштовувати їх для швидкої і безперебійної роботи.
З повагою, Роман Чуєшов
Доброго дня, шановні читачі блогу Start-Luck. Іноді пошук відповідей на найпростіші питання можуть відкривати неймовірні речі, про які людина ніколи не замислювалася. Ми звикли просто користуватися лампочкою, мікрохвильовою піччю та пилососом.
Варто комусь відкрити статтю про те, як працюють ці машини, як він виходить на новий рівень. Якщо він дуже цікавить людину, то згодом той стає досить непоганим електриком або майстром на всі руки, для якого не проблема полагодити будь-що.
Сьогодні йтиметься трохи про інші речі. Ми поговоримо, що таке браузери та їх принцип роботи. Навряд чи вам колись доведеться лагодити браузер, зате після цієї статті у вас не залишиться питань щодо того, як влаштовані сайти. У цьому я навіть не маю сумніву.
Як влаштований сайт
Будь-який електронний ресурс – це набір файлів. Деякі відповідають за дизайн, інші – за тестову складову. Пишуться вони за допомогою спеціальних мов програмування. Не всі творці сайтів розуміються на коді, деякі використовують прості програми, які самі перетворюють дії на код і файли.
Якщо ви подивіться на сайт, як його бачать браузери, то побачите лише папку з незрозумілою назвою, в якій будуть лежати інші файли. Відкривши будь-який з них ви зовсім нічого не зрозумієте.
Допоки цей набір документів знаходиться на комп'ютері розробника, до них немає доступу у читачів. Вони не в Інтернеті. Відкрити сайт для публічного перегляду допомагають. Грубо кажучи, у них є щось подібне до великих флешок, на які викладаються папки з сайтами.
До кожної папки прив'язується URL, або, простою мовою, адресу. Введіть його в адресний рядок браузера і той люб'язно веде вас до папки. Це не все, що роблять браузери, але про це поговоримо у наступному розділі.
Місія браузера
Як я вже сказав, існують певні програми, які допомагають користувачам. А є браузери, які потрібні для того, щоб без знань цього самого коду, переглядати сайт не у вигляді папки, а цілком звичним чином.
Наприклад, програміст каже: «Ось стаття, а натиснувши на цю фразу, людина повинна переміститися на іншу сторінку мого сайту». Він вписуємо певний код. Ви його не бачите, браузер це розуміє і відразу видає читачеві просте та звичне посилання з підкресленням.
Навчитися мов програмування не так складно, як може здатися на перший погляд. Зараз дуже багато і простих, що дозволяють спростити життя та роботу в інтернеті. Не менше й курсів, які допомагають чайникам розібратися у тонкощах майстерності. Наприклад, " WordPress 4: практика створення сайту »Михайла Русакова. Уроки дуже прості. Наприкінці навчання кожен зможе стати справжнім сайтобудівником.
Отже, для чого потрібні браузери, ми з вами розібралися. Тепер давайте подивимося, які вони бувають.
Класифікація
Якщо говорити відверто, то поділити браузери на види неможливо. Не вас обманюватиму – вони всі приблизно однакові. Різниця полягає лише в інтерфейсі, іноді швидкості завантаження та незначних нюансах.
Сьогодні я вже не раз натрапив на такий поділ: Google Chrome, Яндекс Браузер, Опера, Mozilla. У мене не повертається мова розділити їх саме в такий спосіб.
Наведу просту альтернативу. Коли йдеться про ковбасу, її можна класифікувати за складом, ціною, способом приготування (копчення, варення). Браузерів не так багато і всі вони приблизно однакові, тому поділити їх можна тільки за виробником, але, як на мене, якась це паршива класифікація.
Їх принцип роботи та місія однакові у будь-якому випадку. То як же люди обирають браузери? Здебільшого – це інтерфейс. Всі мають невеликі відмінності і людина швидко до них звикає. Наприклад, зайшовши в Яндекс Браузер, вам пропонують почитати новини, які можуть здатися вам цікавими. Це чіпляє користувачів.
Деяким здається, що браузер Google Chrome відкриває сайти швидше. Не можу сказати, наскільки це правда. Особисто я користуюсь кількома браузерами, і швидкість кожного залежить від інтернету загалом. Нехай Яндекс стверджує про турбо режими, але якщо ввечері мережа перевантажена і навіть торрент працює дуже повільно, завантажити сторінку за секунду ніяк не вийде.
Як вибрати браузер, встановіть кілька і просто подивіться який вам здається найзручнішим. Ну от і все. Підписуйтесь також на розсилку, щоб отримати якісну інформацію.
До нових зустрічей та удачі.
Ваш комп'ютер не може підтримувати функціональність в цьому матеріалі.
ForEach.call(document.querySelectorAll("header .date a"), function(elem, i) ( elem.textContent += " (" + ["author","editor"][i] + ")"; ) );
Передмова
Цей докладний посібник із внутрішніх механізмів роботи систем WebKit і Gecko став результатом великих досліджень, проведених ізраїльською веб-програмісткою Талі Гарсіель. Вона протягом кількох років відстежувала всю інформацію, що публікується, про те, як влаштовані браузери (див. розділ ), і присвятила багато часу аналізу їх вихідного коду. Ось що пише сама Талі:
Коли на 90% комп'ютерів було встановлено IE, доводилося миритися з тим, що це загадкова "чорна скринька", проте тепер, коли більше половини користувачів вибирає браузери з відкритим вихідним кодом, настав час розібратися, що ховається у них усередині, у мільйонах рядків програмного коду на C++...Талі опублікувала результати дослідження на своєму сайті, однак ми вважаємо, що вони заслуговують на увагу ширшої аудиторії, тому розміщуємо їх тут з деякими скороченнями.
Веб-розробник, знайомий із внутрішнім механізмом роботи браузерів, приймає більш кваліфіковані рішення та розуміє, чому слід вибрати ті чи інші засоби. Це досить об'ємний документ, проте ми рекомендуємо читати його якнайуважніше і гарантуємо, що ви не пошкодуєте про це. Пол Айріш, Chrome Developer Relations
Вступ
Веб-браузери, мабуть, є найпоширенішими програмами. У цьому підручнику я пояснюю, як вони працюють. Ми докладно розглянемо, що відбувається з моменту, коли ви набираєте в адресному рядку google.ru до появи сторінки Google на екрані.
Які браузери ми розглянемо
На сьогоднішній день існує п'ять основних браузерів: Internet Explorer, Firefox, Safari, Chrome та Opera. У прикладах використовуються браузери з відкритим кодом: Firefox, Chrome і Safari (код відкритий частково). Згідно зі статистикою використання браузерів на сайті StatCounter, на серпень 2011 року браузери Firefox, Safari та Chrome були встановлені в цілому на 60% пристроїв. Таким чином, браузери з відкритим кодом мають на сьогоднішній день дуже сильні позиції.
Основні функції браузера
Основне призначення браузера – відображати веб-ресурси. Для цього на сервер надсилається запит, а результат виводиться у вікні браузера. Під ресурсами в основному маються на увазі 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.
Модулі відображення
У браузерах (Firefox, Chrome і Safari), що цікавлять нас, використовуються два модулі відображення. У Firefox застосовується Gecko – власна розробка Mozilla, а Safari і Chrome використовується WebKit.
WebKit являє собою модуль відображення з відкритим вихідним кодом, який спочатку був розроблений для платформи Linux і адаптований компанією Apple для Mac OS і Windows. Детальнішу інформацію можна знайти на сайті webkit.org.
Основна схема роботи
Модуль відображення отримує зміст запитаного документа протоколу мережного рівня, зазвичай фрагментами по 8 КБ.
Схема подальшої роботи модуля відображення виглядає наведеним нижче чином.
Малюнок. Схема роботи модуля відображення.Модуль відображення виконує синтаксичний аналіз HTML-документа та переводить теги у вузли у дереві змісту. Інформація про стилі витягується як із зовнішніх CSS-файлів, так і елементів style. Ця інформація та інструкції щодо відображення у HTML-файлі використовуються для створення ще одного дерева – .
Воно містить прямокутники з візуальними атрибутами, такими як колір та розмір. Прямокутники розміщуються в тому порядку, в якому вони мають бути виведені на екран.
Після створення дерева відображення починається елементів, у ході якої кожному вузлу надаються координати точки на екрані, де він має з'явитися. Потім виконується , при якій вузли дерева відображення послідовно малюються за допомогою виконавчої інтерфейсу користувача.
Важливо розуміти, що це – послідовний процес. Для зручності користувача модуль відображення намагається вивести зміст на екран якнайшвидше, тому створення дерева відображення та компонування можуть розпочатися ще до завершення синтаксичного аналізу коду HTML. Одні частини документа аналізуються та виводяться на екран, тоді як інші лише передаються через мережу.
Приклади роботи
Малюнок. Схема роботи модуля відображення WebKit. Малюнок. Схема роботи модуля відображення Mozilla Gecko().Як видно з малюнків 3 і 4, WebKit і Gecko використовується різна термінологія, проте схеми їх роботи практично ідентичні.
У Gecko дерево візуально відформатованих елементів називається деревом кадрів (frame tree), в якому кожен елемент є кадром. WebKit використовується дерево відображення (render tree), що складаються з об'єктів відображення (render objects). Розміщення елементів у WebKit називається компонуванням, або версткою (layout), а Gecko – обтіканням (reflow). Об'єднання вузлів DOM та візуальних атрибутів для створення дерева відображення називається у WebKit суміщенням (attachment). Невелика відмінність Gecko, що не стосується семантики, полягає в тому, що між HTML-файлом і деревом DOM знаходиться ще один рівень. Він називається буфером змісту (content sink) і служить формування елементів DOM. Тепер поговоримо про кожний етап роботи докладніше.
Синтаксичний аналіз: загальні відомості
Оскільки синтаксичний аналіз є важливим етапом роботи модуля, розглянемо його докладніше. Почнемо з короткого вступу.
Під синтаксичним аналізом документа мається на увазі його перетворення на придатну для читання та виконання структуру. Результатом синтаксичного аналізу, як правило, є дерево вузлів, що становлять структуру документа. Воно називається деревом синтаксичного аналізу, або просто синтаксичним деревом.
Наприклад, в результаті синтаксичного аналізу виразу 2 + 3 - 1 може вийти таке дерево:
Малюнок. Вузол дерева для математичних виразів.Граматика
Синтаксичний аналіз працює на основі певних правил, що визначаються мовою (форматом) документа. Для кожного формату існують граматичні правила, що складаються зі словника та синтаксису. Вони утворюють т.з. . Природні мови не підкоряються правилам безконтекстної граматики, тому стандартні техніки синтаксичного аналізу їм годяться.
Синтаксичний та лексичний аналізатори
Разом із синтаксичним застосовується лексичний аналіз.
Лексичний аналіз є поділом інформації на токени, або лексеми. Токени утворюють словник тієї чи іншої мови та є конструктивними елементами до створення документів. У природній мові токенами були всі слова, які можна знайти в словниках.
Сенс синтаксичного аналізу полягає у застосуванні синтаксичних правил мови.
Аналіз документа зазвичай виконується двома компонентами: лексичним аналізатором, що розбирає вхідну послідовність символів на дійсні токени, та синтаксичним аналізатором, які аналізують структуру документа згідно з синтаксичними правилами даної мови та формують синтаксичне дерево. Аналізатор ігнорує неінформативні символи, такі як пробіли та перенесення рядків.
Малюнок. Перехід від вихідного документа до синтаксичного дерева.Синтаксичний аналіз є ітеративним процесом. Синтаксичний аналізатор зазвичай запитує у лексичного новий токен і перевіряє його щодо відповідності якомусь із синтаксичних правил. Якщо вдається встановити відповідність, для токена створюється новий вузол у синтаксичному дереві, а аналізатор запитує наступний токен.
Якщо токен відповідає жодному правилу, синтаксичний аналізатор відкладає його і запитує такі токени. Так продовжується доти, доки не буде знайдено правило, якому б відповідали всі відкладені токени. Якщо знайти таке правило не вдається, аналізатор створює виняток. Це означає, що документ містить синтаксичні помилки і не може бути повністю оброблений.
Переклад
Синтаксичне дерево не завжди буває остаточним результатом. Синтаксичний аналіз часто використовується у процесі переведення вхідного документа у потрібний формат. Прикладом може бути компіляція. Компілятор, який переводить вихідний код в машинний, спочатку розбирає його і формує синтаксичне дерево, а потім створює на основі цього дерева документ з машинним кодом.
Малюнок. Етапи компіляції.Приклад синтаксичного аналізу
На малюнку 5 показано синтаксичне дерево, побудоване з урахуванням математичного висловлювання. Визначимо елементарну математичну мову та розглянемо процес синтаксичного аналізу.
Словник: наша мова може містити цілі числа, знаки "плюс" та "мінус".
Синтаксис
- Структурними елементами мови є висловлювання, операнди та оператори.
- Мова може містити будь-яку кількість виразів.
- Вираз – це послідовність, що складається з операнда, оператора та ще одного операнда.
- Оператор - це токен плюс або мінус.
- Операнд – це токен цілого числа чи вираз.
Розглянемо вхідну послідовність символів 2+3 – 1 .
Перший елемент, що відповідає правилу, - 2 (згідно з правилом №5, це операнд). Другий такий елемент – 2 + 3 (послідовність, що складається з операнда, оператора та ще одного операнда, визначена правилом №3). Наступну відповідність ми знайдемо наприкінці: послідовність 2 + 3 – 1 є виразом. Оскільки 2+3 – це операнд, ми отримуємо послідовність, що складається з операнда, оператора та ще одного операнда, що відповідає визначенню виразу. Рядок 2 + + не містить відповідності до правил, тому була б розцінена як недійсна.
Формальне визначення словника та синтаксису
Мова з прикладу вище можна було б визначити так:
INTEGER:0|* PLUS: + MINUS: - Як бачите, цілі числа визначені регулярним виразом.
Синтаксис зазвичай описується у форматі BNF. Мова з прикладу вище можна описати так:
Expression:= term operation term operation:= PLUS | MINUS term:= INTEGER | expression
Як мовилося раніше, мову можна обробляти з допомогою стандартних синтаксичних аналізаторів, якщо його граматика безконтекстнатобто може бути повністю виражена у форматі BNF. Формальне визначення безконтекстної граматики можна знайти у статті Вікіпедії .
Типи синтаксичних аналізаторів
Синтаксичні аналізатори бувають двох типів: низхідні та висхідні. Перші виконують аналіз згори донизу, а другі – знизу догори. Нисхідні аналізатори розбирають структуру верхнього рівня та шукають відповідності синтаксичним правилам. Висхідні аналізатори спочатку обробляють вхідну послідовність символів та поступово виявляють у ній синтаксичні правила, починаючи з правил нижнього та закінчуючи правилами верхнього рівня.
Тепер подивимося, як ці два типи аналізаторів упоралися б з нашим прикладом.
Східний аналізатор почав би з правила верхнього рівня і визначив би, що 2 + 3 - це вираз. Потім він визначив би, що 2 + 3 – 1 також є виразом (у процесі визначення виразів виявляються відповідності іншим правилам, проте першим завжди розглядається правило верхнього рівня).
Висхідний аналізатор обробляв би послідовність символів, доки знайшов би підходяще правило, яким можна замінити виявлений фрагмент, і так остаточно послідовності. Вирази з частковою відповідністю при цьому поміщаються у стек аналізатора.
При роботі такого аналізатора вхідна послідовність символів зсувається вправо (представте курсор, який поміщений на початок послідовності і в ході аналізу зрушується вправо) і поступово зводиться до синтаксичними правилами.Автоматичне створення синтаксичних аналізаторів
Існують спеціальні програми для створення синтаксичних аналізаторів, які називаються генераторами. Достатньо завантажити в генератор граматику мови (словниковий запас та синтаксичні правила), і він автоматично створить аналізатор. Для створення синтаксичного аналізатора необхідне глибоке розуміння принципів його роботи, і зробити це вручну не так просто, тому генератори бувають дуже корисними.
DOM
Отримане синтаксичне дерево складається з елементів DOM та вузлів атрибутів. DOM – об'єктна модель документа (Document Object Model) – служить для представлення HTML-документа та інтерфейсу елементів HTML таким зовнішнім об'єктам, як JavaScript.
У корені дерева знаходиться об'єкт Document.
Модель DOM практично ідентична розмітці. Розглянемо приклад розмітки:
Hello World
Під словами "дерево містить вузли DOM" мається на увазі, що дерево складається з елементів, які реалізують один із інтерфейсів DOM. У браузерах застосовуються специфічні реалізації, які мають додаткові атрибути для внутрішнього використання.
Алгоритм синтаксичного аналізу
Як уже говорилося в попередніх розділах, синтаксичний аналіз коду HTML неможливо виконати за допомогою стандартних низхідних або висхідних аналізаторів.
Нижче наведено причини цього.
- Мова має "щадний" характер.
- У браузерах закладено механізми обробки деяких частих помилок у коді HTML.
- Цикл синтаксичного аналізу характеризується можливістю повторного входження. Вихідний документ зазвичай не змінюється в процесі аналізу, однак у випадку HTML теги скрипту, що містять document.write, можуть додавати нові токени, тому вихідний код може змінюватися.
Оскільки стандартні аналізатори не підходять для HTML, браузери створюють власні аналізатори.
Алгоритм синтаксичного аналізу докладно описаний у специфікації HTML5. Він складається з двох етапів: лексичного аналізу та побудови дерева.
У результаті лексичного аналізу вхідна послідовність символів розбивається на токени. До токенів HTML відносяться теги, що відкривають і закривають, а також назви і значення атрибутів.
Лексичний аналізатор виявляє токен, передає його конструктору дерев і переходить до наступного символу пошуку подальших токенів, і так до закінчення вхідної послідовності.
Малюнок. Етапи синтаксичного аналізу коду HTML (джерело: специфікація HTML5).Алгоритм лексичного аналізу
Результатом роботи алгоритму є токен HTML. Алгоритм виражений як автомата з кінцевим числом станів. У кожному стані обробляється один або декілька символів вхідної послідовності, на основі яких визначається такий стан. Воно залежить від етапу лексичного аналізу та етапу формування дерева, тобто обробка одного й того самого символу може призвести до різних результатів (різних станів) залежно від поточного стану. Алгоритм досить складний, щоб докладно описувати його тут, тому розглянемо спрощений приклад, який допоможе краще зрозуміти принцип його роботи.
Виконаємо лексичний аналіз простого коду HTML:
Hello world
Початковий стан - "дані". Коли аналізатор виявляє символ< , состояние меняется на "відкритий тег". Якщо далі виявляється буква (a-z), створюється токен тега, що відкриває, а стан змінюється на "назва тега". Вона зберігається, доки не буде виявлено символ > . Символи по одному додаються до назви нового токена. У нашому випадку виходить токен html.
При виявленні символу > токен вважається готовим і аналізатор повертається у стан "дані". Тег
обробляється так само. Таким чином, аналізатор вже згенерував теги html і body і повернувся до стану "дані". Виявлення літери H у фразі Hello world призводить до генерації токена символу. Те саме відбувається з іншими літерами, поки аналізатор не дійде до символу< в теге . Для кожного символу фрази Hello world створюється токен.Потім аналізатор знову повертається у стан "відкритий тег". Виявлення символу / веде до створення токена тега, що закриває, і переходу в стан "назва тега". Вона зберігається, доки не буде виявлено символ > . У цей момент генерується токен нового тега, а аналізатор знову повертається до стану "дані". Послідовність символів