Это третий день моего участия в вызове Gengwen. Для получения дополнительной информации о событии, пожалуйста, проверьте:Обновить вызов.
На самом деле, эта идея у меня была давно, но я так и не начал ее писать.Как раз к ежедневному обновлению наггетсов я задумался о ее реализации еще раз, а затем записи процесса реализации.
Источник идей
Некоторое время назад я изучал Babel и написал книгубуклет,есть кейс реализации интерпретатора js на базе парсера babel.Когда я писал тот кейс я думал что реализована интерпретация и выполнение js.Можно ли пойти дальше и добавить часть рендеринга написать простой браузер? .
Недавно я просматривал исходники postcss, и реализация парсера css также была выяснена, и я смог реализовать парсинг из css в ast самостоятельно.
Я писал синтаксический анализатор html раньше и много раз писал подобные вещи, такие как синтаксический анализатор шаблонов vue, синтаксический анализатор wxml и т. д. Также можно выполнить преобразование из html в ast.
Я тоже недавно писалСтатья о взаимосвязи между циклом событий и движком js и движком рендеринга., иСтатья о принципе кроссового двигателя, описывает, как использовать цикл событий для интеграции интерпретации js и рендеринга css, совместно использовать поток для завершения рендеринга и логики, а также как реализовать кросс-энд движки на основе идеи контейнеров.
Объединение этих вещей на самом деле является идеей реализации простого браузера, поэтому я хочу воспользоваться событием обновления этой статьи, чтобы реализовать это. Один представляет собой синтез того, что выводится за это время, а другой также может углубить понимание среды выполнения внешнего кода. Я также надеюсь дать вам некоторое вдохновение.
Обзор идеи реализации
Эта статья расскажет о реализации идей, специфической реализации, начиная с следующего.
html parser
Мы будем реализовывать html-парсер, разбирать html-строку в dom-дерево и использовать для этого однопроходный метод обхода, что согласуется с идеей парсера компилятора шаблонов vue.
css parser
Мы будем реализовывать синтаксический анализатор css, анализировать строку css в css-дерево, и идея реализации аналогична синтаксическому анализатору postcss.
механизм компоновки
С помощью синтаксического анализатора html и css объедините их в дерево рендеринга, а затем внедрите механизм компоновки для расчета стилей в виде конкретных координат.
движок рендеринга
С конкретными координатами вы можете рендерить Здесь мы рендерим на основе холста. На этом отображение html и css на интерфейсе завершено.
js-интерпретатор
Для интерпретации и выполнения js строк требуется сначала js парсер, который сам не реализуешь, просто используй акрон, а потом сам интерпретируй и исполняй. Он будет реализовывать выполнение области действия и функций, внедрять несколько событий привязки и управлять реализацией dom api.
event loop
Рендеринг и выполнение логики реализованы, но оба хотят работать в одном потоке, тогда его нужно запланировать через Event Loop. JS выполняется в макрозадаче, так же, как и все микропастры, и каждый цикл завершается. Проверка требует рендеринга, скорость рендеринга составляет 16 мс на кадр для обновления.
Мы будем реализовывать логику цикла событий, непрерывно извлекающего события через константу setTimeout, потому что бесконечный цикл будет блокировать основной поток (в C++ цикл событий может быть реализован с бесконечным циклом, потому что есть другие потоки, которые приходят и собираются помещать объекты событий в очереди).
Таким образом, можно добиться обновления частоты кадров при рендеринге и выполнении логики js.
Загрузка сетевых ресурсов
Вышеприведенное реализует рендеринг и выполнение html, css и js, а также реализует планирование цикла событий. Эти ресурсы загружаются из Интернета, поэтому должен быть реализован модуль загрузки, который должен иметь возможность загружать html с URL-адреса, а затем анализировать ссылку для его загрузки.
статический сервер
Ресурсы типа html, css и js загружаются с веб-сервера.Через протокол http этот сервер тоже нужно реализовать.Это может быть простой статический сервер или динамический сервер с некоторой логикой.
интерфейс браузера
Поскольку это браузер, должно быть место для ввода URL-адреса и место для отображения содержимого, поэтому мы сделаем интерфейс, вверху будет адресная строка, которая используется для ввода URL-адреса, а внизу будет область содержимого, которая используется для отображения отображаемого содержимого.
Общая схема архитектуры выглядит следующим образом:
Суммировать
Эта статья является первой из серии статей о [Написание простого браузера от руки], в ней в основном описывается источник идеи, общая идея реализации и общая идея каждой части.
Первый это парсер html, парсер css и парсер js.Кроме js, который будет использовать acorn, остальные будут реализовываться сами по себе, а дальше будет реализовываться движок верстки и движок рендеринга, интерпретация и выполнение js ast реализованы, и оба будут интегрированы через цикл событий для достижения рендеринга и логики расписания. После добавления загрузки сетевых ресурсов и интерфейса браузера это простой браузер, и идея осуществима.
Каждая последующая часть будет описана в статье, а исходный код будет размещен на github, так что следите за обновлениями.