Newtoo — розробка повноцінного браузерного движка з нуля в 2018?

Привіт!

Сьогодні я вам розповім про мою спробу створити власний сучасний веб-браузерний движок з нуля.

Мій движок називається Newtoo.

Що за Newtoo

Отже, Newtoo. Навіщо я його створив?

Так вже вийшло, що у світі є всього 4 найпопулярніших браузерних движка, які настільки складні, що самі розробники не знають і половини їх кодової бази, і настільки просунуті за технологіями, що почати їх наздоганяти — марна трата часу.

А чи так це насправді? Мій проект створений, щоб повторити подвиги сучасних браузерних движків і перевірити, наскільки реально створити гідну альтернативу великим проектам, історія яких починається з дев’яностих років. Мій новий движок створюється з нуля, а значить його історія починається сьогодні.

Ідеологія Newtoo — показати сторінку швидше, ніж інші.

Як Newtoo працює швидше
Як я говорив раніше, основні браузерні движки розвиваються не перший рік. Ті помилки, які були допущені на початкових стадіях розробки залишаються в проекті до кінця. Найяскравіший приклад цьому — розумні покажчики в C++ — це ще більш складний синтаксис, великий оверхед при роботі, створення та видалення розумних покажчиків. Крім того, є дуже багато типів розумних покажчиків і потрібно знати, який коли використовувати, адже у кожного є свої сюрпризи нюанси. Подивіться на цей файл з WebKit. Коли бачиш такий код, синтаксис розумних покажчиків, намагаєшся заспокоїться і дихати рівно, але такого роду код — це весь вебкит з ніг до голови. В моєму движку немає таких недоліків.

Що в коробочці
Давайте подивимося, з чого складається Newtoo

Читайте також  Як підключити колонку до ноутбука

На даний момент реалізовані наступні частини проекту:

  • Парсер HTML
  • Сериализатор HTML
  • Парсер CSS (селектори, правила і властивості)
  • Сериализатор CSS
  • Основне DOM API1

Інші частини проекту, які поки не реалізовані:

  • Каскадинг CSS (обчислення css стилів)
  • Компонувальник
  • Рендер
  • Віртуальна машина JS та події
  • Обробник подій і інтерактивне виділення сторінки

 

Парсер HTML

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

Наприклад, ви забули поставити лапки, набираючи атрибут

<article id=hello></article>

Движок вас зрозуміє, є значення атрибута написано без пробілів

Ви можете не закривати тег, коли це не обов’язково


<div>
 <p>First line
 <p>Second line
 <img src="uk/images/2019.png" alt="З новим роком!">
 <p>Third line <br> Last line
</div>

Парсер підтримує префікси


<myprefix:span>Hello, world!</myprefix:span>

Для того, щоб перетворити назад елементи сторінки код, я написав сериализатор HTML. Я думаю, ви здогадалися, що він робить.

Як працює парсер HTML

Для початку наш парсер ріже наш html код на шматочки і визначає їх тип.

Наприклад ось це:


<!doctype html><html><head><title>Lorem ipsum</title></head></html>

Перетворюється на це:


<!doctype html> - doctype token
<html> - tag token
<head> - tag token
<title> - tag token
Lorem ipsum - text token
</title> - close tag token
</head> - close tag token
</html> - close tag token

Ці шматочки називаються токени.

Токени діляться на 6 типів:

  • Тег
  • Закриваючий тег
  • Текст
  • Коментар
  • Тип документа (doctype)
  • Javascript або css код

Парсер читає токени зліва направо. Для кожного типу свій підхід парсингу.

Коли парсер читає вміст тега, сам тег реєструється в ієрархії (ієрархія від дитини до батьків вниз), а коли парсер закінчив читати вміст тега, він видаляє його з ієрархії.

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

Читайте також  Не працює інтернет - Wi-Fi підключений, а інтернет не працює

Використовуючи такий метод парсинга токенів, можна писати <p> без закривається тега.

Парсер CSS

На даний момент движок вміє парсити тільки стильові css правила, наприклад:

.flex[alignment="right"] { font-weight: light; color: #999 }

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

На відміну від інших движків, Newtoo підтримує поодинокі коментарі ‘//’ в коді css і не видаляє їх при взаємодії з css через javascript.

Парсер CSS селекторів

Щоб дізнатися, які саме елементи html сторінки потрібно форматувати стилями css, був придуманий мова селекторів. Ви напевно його вже знаєте.

Парсер селекторів підтримує всі комбінатори, два види лапок, селектори тегів, класів, атрибутів, множинні селектори і класи.

Ось повний список всіх підтримуваних селекторів:

TagName
#Id
.Class
[attr=value]
[attr|=value]
[attr$=value]
[attr~=value]
[attr^=value]
[attr*=value]
.Multi.Class
#Mix#ed.Selec[tor=s]
"Quotes"
'Alternative quotes'
#descedant #child
#parent < #child
#previous + #this
#other ~ #this
.multi, .selectors
#element:hover
#element:active
#element:...

Так, селектори четвертого рівня движок поки не підтримує, але я працюю над цим.

DOM API

Коли мій парсер HTML читає наш код, він створює об’єктну модель документа (DOM). DOM виглядає як дерево з вузлів, де корінь — вікно браузера, від нього відгалужується документ, а від документа вже елементи сторінки. З усіма вузлами DOM можна взаємодіяти через JavaScript c допомогою DOM API.

Мій движок підтримує будь-які зміни DOM. Наприклад, можна переробити html-код будь-якого елемента:

document.getElementById("article").innerHTML = "Стаття зникла. <b>Бум!</b>";

Зараз не буду перераховувати всі функції роботи з елементами, документом, текстом, виділенням, повірте, їх багато!

Віртуальну машину JavaScript поки не написав, але API вже є і добре працює.

Майбутнє проекту

Про перспективи проекту нічого не можу сказати, вам вирішувати.
Якщо вам сподобався мій движок, значить я добре постарався.

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

Вам також сподобається...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *