Как начать создавать веб-браузер? [закрыто]


88

Я решил приложить некоторые усилия для создания веб-браузера с нуля. Какие общие функции, архитектуры и особенности современных веб-браузеров мне следует знать перед тем, как начать?

Любые рекомендации приветствуются!


9
Да, это безумный проект, но нам не нужно здесь говорить о Микки - я думаю, что это отличная тема для обсуждения того, как вы это сделаете :)
Росс

8
Я помню статью некоторое время назад, в которой кто-то оплакивал тот факт, что ни у кого больше нет смелости создавать новые движки рендеринга. По его словам, необходимы новые браузеры, потому что современные компьютеры другие. Несколько ядер. Первый шаг - Chrome с 1 процессом на вкладку. Посмотрим, что будет дальше.
stesch 01

35
Выращивайте шарики и делайте, что хотите. Если это сработает - отлично. Если нет, продолжайте попытки, иначе вы закончите, как другая половина общества, которая говорит: «Не создавайте ничего нового, просто используйте сломанное дерьмо, которое у нас уже есть».
uSeRnAmEhAhAhAhAhA

7
Тебе нужна одна из тех таблеток, которые принимает Брэдли Купер в « Безграничном» . ;)
Али Гаджани 08

3
Попробуй. Держу пари, это намного проще, чем говорят здесь люди, особенно если вы соедините вместе множество существующих компонентов. Насколько сложно разобрать текст и вывести несколько цветных полей с текстом внутри?
Ян Уорбертон,

Ответы:


125

Ну разобьем на части. Что такое веб-браузер? Что оно делает? Это:

  • Получает внешний контент. Итак, вам нужна библиотека HTTP или (не рекомендуется) написать ее самостоятельно. В протоколе HTTP много сложности / тонкости, например, обработка заголовков с истекающим сроком действия, различных версий (хотя в наши дни это в основном 1.1) и т. Д .;
  • Обрабатывает разные типы контента. Для такого рода вещей есть реестр Windos, который вы можете использовать вместе. Я говорю об интерпретации контента на основе типа MIME;
  • Анализирует HTML и XML : для создания DOM (объектной модели документа);
  • Анализирует и применяет CSS : это влечет за собой понимание всех свойств, всех единиц измерения и всех способов, которыми могут быть указаны значения (например, «border: 1px сплошной черный» против отдельных свойств border-width и т. Д.);
  • Реализует визуальную модель W3C (и это настоящий кикер); а также
  • Имеет движок Javascript .

И это вкратце веб-браузер. Некоторые из этих задач невероятно сложны. Даже легко звучащие могут быть трудными. Возьмем получение внешнего контента. Вам нужно иметь дело с такими вариантами использования, как:

  • Сколько одновременных подключений использовать?
  • Сообщение об ошибке пользователю;
  • Прокси;
  • Параметры пользователя;
  • и т.п.

Причина, по которой я и другие коллективно поднимаем брови, заключается в том, что движок рендеринга сложен (и, как кто-то заметил, на его разработку ушли годы человека). Основные движки рендеринга:

  • Trident: разработан Microsoft для Internet Explorer;
  • Gecko: используется в Firefox;
  • Webkit: используется в Safari и Chrome 0–27;
  • KHTML: используется в среде рабочего стола KDE. Webkit произошел от KHTML несколько лет назад;
  • Elektra: используется в Opera 4-6;
  • Presto: используется в Opera 7-12;
  • Blink: используется в Chrome 28+, Opera 15+, вилке webkit;

Тройку лидеров следует считать основными движками рендеринга, используемыми сегодня.

Механизмы Javascript также сложны. Вот несколько из них, которые, как правило, связаны с конкретным механизмом рендеринга:

  • SpiderMonkey: используется в Gecko / Firefox;
  • TraceMonkey: заменит SpiderMonkey в Firefox 3.1 и представит JIT-компиляцию (точно в срок);
  • KJS: используется Konqueror, привязан к KHTML;
  • JScript: движок Javascript Trident, используемый в Internet Explorer;
  • JavascriptCore: используется в Webkit браузером Safari;
  • SquirrelFish: будет использоваться в Webkit и добавляет JIT, например TraceMonkey;
  • V8: движок Google Javascript, используемый в Chrome и Opera;
  • Opera (12.X и ниже) также использовала свою собственную.

И, конечно же, есть все элементы пользовательского интерфейса: навигация между страницами, история страниц, очистка временных файлов, ввод URL-адреса, автозаполнение URL-адресов и так далее.

Это большая работа.


* Gecko :) Тоже согласен. Основными частями являются средство визуализации HTML и движок JavaScript.
Абатищев 01

1
Оперу создали сами. Престо - нынешний, а Электра - их предыдущий.
Тим Салливан,

Отличный подробный ответ - я совсем забыл о парсинге JavaScript!
Росс

1
Однако миру нужно больше людей, которые умеют создавать браузеры. Cp eff.org/deeplinks/2016/04/save-firefox .
Pacerier 01

26

Звучит как действительно интересный проект, но он потребует от вас огромных усилий.

Это не легкая вещь, но с научной точки зрения, вы можете узнать так много от него.

Некоторые ресурсы, которые вы можете проверить:

Но, глядя на это с реалистичной точки зрения, огромные усилия, необходимые для написания кода с нуля, напомнили мне этот комикс:


(источник: geekherocomic.com )

Удачи :-)


О, GHC продолжил? Думаю, я отказался от подписки, когда они начали заниматься той штукой с логовом Росс.
Росс

@Ross: Да, они все еще доставляют комикс, этого нового парня зовут Борис из России, и он "суперхакер" LOL
Кристиан С. Сальвадо

17

Большинство современных веб-браузеров - гигантские звери и, вероятно, довольно плохо спроектированы, потому что они (и сама сеть) развивались довольно бессистемно.

Вам нужно начать с того, чтобы четко обозначить цели вашего проекта (и то, чего вы надеетесь достичь). Вы делаете это просто для развлечения или ожидаете, что другие люди будут использовать ваш браузер? Если вы ожидаете, что другие будут использовать его, что будет для них стимулом? Нереально ожидать, что вы разработаете новый браузер с нуля, который каждый сможет использовать в качестве замены Chrome, Safari, Firefox, IE, Opera и т. Д. Все эти проекты имеют 10-15-летний старт. вы, и к тому времени, когда вы их догоните, они будут еще на 10-15 лет впереди вас. Кроме того, за ними стоит гораздо больше человеческих ресурсов, и поэтому, если вы хотите, чтобы ваш проект был успешным, вам в какой-то момент понадобится эта человеческая сила.

Это причина того, что Apple и Google, крупные компании с большим количеством ресурсов, не начали с нуля. Даже Microsoft не начинала с нуля. Первоначальный IE был основан на Mosaic. Единственными значительными браузерами, которые все еще существуют сегодня, которые были созданы с нуля, являются Opera , Konqueror и Lynx., у которых, к сожалению, мизерная доля рынка. Давайте на время забудем о Lynx, поскольку это текстовый браузер и, по-видимому, единственная причина, по которой он все еще существует, - это то, что он обслуживает эту конкретную нишу. Opera, возможно, является одним из лучших браузеров, когда-либо созданных, и, тем не менее, у него никогда не было большой доли рынка, поэтому помните, что успех и инновации - это не одно и то же. KHTML - это движок Konqueror, который сам по себе так и не стал очень успешным, но является основой WebKit, который используют Apple и Google. Я думаю, можно было бы определенно возразить, что если бы KHTML никогда не создавался, ни Safari, ни Chrome не существовало бы. Интересно, что и KHTML, и Opera были в основном созданы норвежскими программистами, работающими в одном здании в Осло.

Вам нужно смотреть на создание веб-браузера, как на создание операционной системы, потому что это, по сути, и есть браузер - это операционная система для запуска веб-приложений. Веб-браузер, как и операционная система, представляет собой очень сложную программу с множеством компонентов. Конечно, люди преуспели в создании новых операционных систем с нуля. На ум приходит Линус Торвальдс. Он сделал Linux, одну из самых успешных операционных систем.

Конечно, вы сталкиваетесь с дополнительной проблемой, которая усложняет создание нового успешного браузера, чем создание новой успешной ОС. Ожидается, что браузеры будут безупречно запускать весь унаследованный код, распространенный в сети. Теперь предположим, что Линусу Торвальдсу сказали, что его новая ОС не будет иметь значения, если она не будет полностью обратно совместима с UNIX или какой-либо существующей ОС. Я сомневаюсь, что он бы беспокоился, а Linux, вероятно, не существовало бы сегодня. На самом деле, конечно, единственная причина, по которой Linux стал популярным, заключалась в том, что он был хорошо спроектирован, а проект GNU мог создавать инструменты для переноса огромных объемов существующего кода в Linux. Без идеологической поддержки Linux со стороны GNU у него никогда не было бы шанса.

Итак, если вы действительно достаточно амбициозны (или безрассудны), чтобы попытаться создать новый успешный браузер, вам следует сосредоточиться на архитектуре и дизайне . Нет никаких практических причин создавать новый браузер с нуля, если вы не уверены, что можете каким-либо образом улучшить дизайн существующих браузеров. Это означает, что вам необходимо достаточно ознакомиться с кодом WebKit и Gecko , чтобы понимать принятые ими дизайнерские решения, но вам не следует пытаться копировать их дизайн, потому что в противном случае вы могли бы просто использовать их код.

Мое личное мнение (без проведения достаточных исследований) заключается в том, что сегодняшние браузеры недостаточно модульны. Если бы я собирался создать новый браузер, я бы нашел способ упростить замену элементов (например, замену одного движка JavaScript на другой) и дать пользователю гораздо больше контроля, чем он имеет в настоящее время в существующих браузерах. . Современные браузеры и веб-дизайнеры отняли у пользователя почти весь контроль. Почему я, пользователь, не могу указать веб-браузеру, как я хочу отображать контент, отображаемый на моем компьютере? Первоначальный HTML давал только рекомендации о том, как структурировать контент, и со временем новые стандарты становились все более и более догматичными, вплоть до того, что пользователь теперь полностью зависел от веб-дизайнера. Привлекательность Linux заключалась в том, что он вернул контроль пользователю, и что «

Еще одна вещь, на которую я бы потратил время на исследование, - это принципы проектирования операционных систем. Разработка хорошего браузера, по крайней мере теоретически, должна требовать тех же принципов, что и разработка хорошей ОС, особенно в отношении параллельных процессов, моделей безопасности и т. Д.

Наконец, после множества исследований, я думаю, именно здесь вам следует начать кодировать:

  1. Реконструировать мозаику, но с вашими собственными дизайнерскими идеями. Это также то, что я бы посоветовал, если вы делаете это просто для развлечения или для получения образовательной выгоды. Прочтите исходные спецификации HTML 1.0 и HTML 2.0, а также спецификации HTTP 1.1 и текущие спецификации URI и убедитесь, что ваш браузер соответствует всем этим спецификациям. Вы, конечно, можете загрузить существующее программное обеспечение, которое уже обрабатывает транспортные протоколы, соглашения URI и т. Д., Но если вы серьезно относитесь к разработке собственного браузера, я думаю, что это хорошее упражнение, чтобы делать эти вещи с нуля, так что вы получите хорошее представление о том, как все части головоломки подходят друг к другу. В конце шага 0 у вас должен быть браузер, по крайней мере, сопоставимый с тем, что было в 90-е годы. Это хорошая первая веха. И вы действительно можете скачать оригинальную мозаику наftp://ftp.ncsa.uiuc.edu/Mosaic/ и посмотрите, как он соотносится с вашим браузером. Это также хорошее упражнение, чтобы увидеть, как текущие веб-сайты отображаются в древнем браузере, таком как Mosaic.

  2. Добавьте поддержку DOM в свой браузер. Сначала сосредоточьтесь на W3C DOM Level 1 и Level 2, поскольку почти все современные браузеры полностью их поддерживают. Затем взгляните на уровень 3 и уровень 4. Модель DOM чрезвычайно важна для веб-программирования, и поэтому, если вы действительно собираетесь создать современный веб-браузер, весь дизайн должен учитывать это. Поскольку вы пишете браузер на C #, вы можете подумать о том, как можно использовать существующую объектную модель .NET в своих интересах.

  3. Посмотрите на существующие механизмы сценариев и посмотрите, сможете ли вы перенести их в свой проект. Я бы отговорил вас от написания собственного интерпретатора JavaScript не только потому, что это очень большой проект сам по себе, но и потому, что так много работы уже было вложено в оптимизацию компиляторов JS (например, V8). Поэтому, если вы не гуру в дизайне компиляторов, ваш ручной интерпретатор JS, вероятно, будет хуже того, что уже существует, даже если он безупречно соответствует спецификациям EMCAScript. Опять же, я думаю, что механизм сценариев должен быть чем-то, что в любом случае является полностью отдельным модулем от реального браузера, поэтому я думаю, что было бы гораздо полезнее иметь структуру, которая позволяет вам заменять любой механизм сценариев, а не создавать механизм сценариев это работает только с вашим браузером.

  4. Посмотрите исходный код HTML / CSS / JS для 10-20 лучших веб-сайтов в Северной Америке (Google, Facebook, YouTube, Twitter, Wikipedia, Amazon, популярные платформы для ведения блогов и т. Д.) И настройте свой браузер так, чтобы он хорошо работал с этими сайтами. . Это несколько более легко решаемая проблема, чем создание браузера, который соответствует всем существующим стандартам (то, что современные браузеры все еще не делают идеально), и тем более создание браузера, который правильно отображает все веб-сайты в Интернете (никто не может сделай это). Люди будут жаловаться, что ваш браузер нарушает стандарты и тому подобное, но это не такая большая проблема, как люди, жалующиеся на то, что они не могут получить доступ к Google или Facebook через ваш браузер. Я не могу вспомнить ни одного браузера, который бы правильно соблюдал все (или даже большинство) стандарты в своем первом выпуске, поэтому я говорю, что даже не пытайтесь.


1
+1 для большей части кода веб-браузеров сегодня ужасно отстойно с кучей устаревшего дерьма с 1990-х годов . Google попытался решить эту проблему, создав Blink, который, по сути, представляет собой Webkit с удаленными 8,8 миллионами строк дерьма, но, тем не менее, внутри Blink застряло множество неизвлекаемых застрявших дерьмов.
Pacerier 01

1
... Если бы Google начал создавать браузер сегодня, он определенно создал бы его с нуля , но теперь им слишком дорого крутить Титаник, потому что все его сотрудники уже знают Blink. Новый стартап с глубокими навыками и хорошо финансируемым деньгами для создания конкурирующей браузерной ОС определенно может иметь преимущество перед Chrome.
Pacerier 01

15

Вы имеете в виду, как писать собственный движок рендеринга?

Могу только пожелать удачи. На создание текущего поколения различных браузеров ушло много человеческих лет. Если вы хотите добиться большего успеха, чем любой из них, вам потребуются серьезные навыки. Если вам нужно спросить, с чего начать, вам, вероятно, придется потратить больше нескольких лет на учебу, прежде чем будет иметь смысл пытаться выполнить такое задание.

Тем не менее, вот несколько (очевидных) указателей:

  1. написать много кода, который выполняет мелочи, например, решает все проблемы projecteuler.net
  2. узнать все, что можно, о своем наборе инструментов и его стандартах сообщества
  3. написать намного больше кода
  4. получить полное представление о конечных автоматах
  5. напишите еще код
  6. узнать все о стеке tcp / ip и о том, как он используется для http
  7. узнать все, что можно о http
  8. изучить стандарты (html, xml, sgml, css)
  9. отпразднуйте свое 150-летие.
  10. начать работу над фактическим проектом браузера.

редактировать ниже здесь

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

Я программирую более двух третей своей жизни, и мне нравится думать, что я довольно приличный программист, но было бы глупо с моей стороны думать, что у меня есть половина шансов написать приличный веб-браузер с нуля. .

Конечно, если это то, что вы хотите сделать, не позволяйте моему комментарию стоять у вас на пути. Вы, вероятно, можете сделать лучше, чем Internet Explorer.


12
Я должен был упомянуть: если вы хотите создать яблочный пирог с нуля, вам нужно начать с создания вселенной.
Крис

@ Mk12: действительно, спасибо. обновлено.
Крис

1
@Kris Как создать Вселенную, когда ее нечем создать?
uSeRnAmEhAhAhAhAhA

1
@ user2645707: Не знаю, я просто повторяю кого-то умнее меня. quotationspage.com/quote/26980.html
Крис

12
+1 за «Возможно, вы можете лучше, чем Internet Explorer».
Pulah Nandha

14

Это безумно амбициозный проект (особенно для разработчика-одиночки), но я бы хотел когда-нибудь заняться чем-нибудь - вы могли бы многому у него научиться.

Я мало что знаю о том, как работают протоколы (это то, что вам определенно нужно изучить), или о том, что происходит в браузере, но отличным местом для начала будет источник браузеров с открытым исходным кодом, в первую очередь Chrome и Fire Fox. Chrome - особенно хороший проект, поскольку они делают только то, с чего я ожидал, что вы начнете: хром и бэкэнд браузера. Забудьте сначала о создании движка рендеринга - используйте Webkit или Gekko.


8

Как уже говорили все, веб-браузер - это огромный проект. Вам нужно беспокоиться о tcp / ip и сокетах, рендеринге html, использовании css, создании модели DOM, выполнении javascript, работе с искаженной разметкой и кодом и обработке всех типов файлов, прежде чем вы сможете даже подумать обо всем, что люди ожидают от браузер (например, закладки, история, приватный просмотр, безопасность и т. д.). Это огромный проект.

При этом это можно сделать. Я предлагаю посмотреть исходный код Firefox. Я знаю, что вы сказали, что хотите создать браузер с нуля, но было бы очень полезно сначала поучиться на проекте с открытым исходным кодом.

Я бы загрузил исходный код Firefox и медленно удалил его. Другими словами, я бы взял исходный код и удалил все функции закладок. Затем я бы удалил возможность обрабатывать аддоны. Затем я бы удалил весь код, касающийся сохранения файлов. Я буду продолжать этот процесс, пока не получу очень простой веб-браузер. Я бы просмотрел этот код.

Затем я начал создавать свою собственную. Я использовал знания, полученные при разборке Firefox, и вкладывал их в создание нового браузера.

Целом много удачи вам!


Можете ли вы указать, как дезинтегрировать Firefox? То есть, я получаю exeфайл, после установки которого я получаю исходную папку с большим количеством dllфайлов. Как мне изучить реальный код, который это сделал, и логику, которая за этим стоит?
SexyBeast

Этот комментарий опаздывает на вечеринку, но все равно. Файлы .EXE и .DLL являются результатом этапа компиляции, и вы не можете ожидать от них особого смысла. Вам понадобится исходный код (некоторый C ++ и другие языки в разных файлах), чтобы разобраться в программе. Программистам необходимо разбираться в своей программе, поэтому они стремятся разделять и документировать различные функциональные части кода.
Рой Принс,


4

Вы можете начать с хорошо сформированного и действительного XHTML, который должен быть проще, чем суп из тегов, с которым ваш браузер столкнется в реальной «жизни».

Затем вы должны найти способ приспособить настоящий HTML из Интернета к вашим потребностям.

Но не обманывайте себя: браузер - это не маленький проект.


3

... тогда начните беспокоиться о безопасности

(нефункциональные и сквозные проблемы, как правило, следует учитывать заранее :))


1

очень амбициозный проект, но один разработчик не может сделать это в одиночку, вам нужна команда (менеджер проекта, тестировщики ...), и, возможно, вам стоит пересмотреть свой выбор языка. С # работает только в Windows (я знаю моно в Linux, но это не то же самое) в любом случае желаю вам удачи и буду рад использовать ваш браузер: D


0

У тебя действительно много свободного времени, не так ли? AFAIK, большинство браузеров были написаны на C ++, не у всех пользователей установлена ​​платформа .NET на своих компьютерах, и если они это сделают, это может быть не та версия, которая вам нужна.

На это могут уйти годы, но в любом случае существует множество браузеров с открытым исходным кодом, FireFox, Google Chrome и т. Д., Вы можете начать с просмотра кода, удачи в этом :)


1
Chrome не является открытым исходным кодом; Но большую часть его исходного кода можно найти в проекте
Anonymous
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.