Як розпочати створення веб-браузера? [зачинено]


88

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

Будь-які рекомендації високо вдячні!


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

8
Я пам’ятаю статтю деякий час тому, коли хтось прикривався тим фактом, що вже ніхто не має сміливості будувати нові механізми візуалізації. За його словами, потрібні нові браузери, оскільки сучасні комп’ютери різні. Кілька ядер. Першим кроком є ​​Chrome з 1 процесом на вкладку. Давайте подивимося, що буде далі.
stesch 01.03.09

35
Вирощуйте кілька куль і робіть, що хочете. Якщо це працює, чудово. Якщо ні, продовжуйте намагатися, інакше ви опинитеся, як інша половина суспільства, яка каже: "Не створюйте нічого нового, просто використовуйте зламане лайно, яке у нас вже є".
uSeRnAmEhAhAhAhAhA

7
Вам потрібна одна з таких таблеток, яку Бредлі Купер приймає « Безмежно» . ;)
Алі Гаджані

3
Спробуй. Б'юся об заклад, це набагато простіше, ніж говорять люди, особливо якщо ви підключаєте багато існуючих компонентів. Наскільки важко проаналізувати якийсь текст і вивести кольорові поля з текстом усередині них?
Ian Warburton

Відповіді:


126

Ну розбийте його на шматки. Що таке веб-браузер? Що це робить? Це:

  • Отримує зовнішній вміст. Тому вам потрібна бібліотека HTTP або (не рекомендується) писати це самостійно. Протокол HTTP має багато складностей / тонкощів, наприклад, обробка заголовків із закінченням терміну дії, різні версії (хоча це в основному 1.1 сьогодні) тощо;
  • Обробляє різні типи вмісту. Існує реєстр Windos для такого роду речей, які ви можете завантажити. Я говорю про інтерпретацію вмісту на основі типу MIME;
  • Розбирає HTML та XML : для створення DOM (об'єктної моделі документа);
  • Аналізує та застосовує CSS : це передбачає розуміння всіх властивостей, усіх одиниць виміру та всіх способів, як можна вказати значення (наприклад, "border: 1px solid black" проти окремих властивостей width-width тощо);
  • Впроваджує візуальну модель W3C (і це справжній удар); і
  • Має механізм Javascript .

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

  • Скільки одночасних з'єднань використовувати?
  • Повідомлення про помилку перед користувачем;
  • Довірені особи;
  • Параметри користувача;
  • тощо

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

  • Trident: розроблений Microsoft для Internet Explorer;
  • Gecko: використовується у Firefox;
  • Webkit: використовується в Safari та Chrome 0-27;
  • KHTML: використовується в середовищі робочого столу KDE. Webkit розлучився з KHTML кілька років тому;
  • Електра: використовується в опері 4-6;
  • Престо: використовується в опері 7-12;
  • Блимає: використовується в Chrome 28+, Opera 15+, fork 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: механізм Javascript від Google, який використовується в Chrome та Opera;
  • Opera (12.X і менше) також використовувала свою власну.

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

Це дуже багато роботи.


* Gecko :) Також погодьтеся. Основними частинами є візуалізатор HTML та механізм JavaScript.
абатищев 01.03.09

1
Опера створила свої власні. Presto - нинішній, а Electra - попередній.
Тім Салліван

Чудова глибока відповідь - я забув про синтаксичний розбір JavaScript разом!
Росс

1
Світ, однак, потребує більше людей, які мають кулі для створення браузерів. Cp eff.org/deeplinks/2016/04/save-firefox .
Pacerier

27

Звучить справді цікавий проект, але для цього потрібно буде вкласти величезні зусилля.

Це непроста справа, але з академічної точки зору ви можете навчитися на цьому стільки .

Деякі ресурси, які ви можете перевірити:

Але бачачи це з реалістичної точки зору, величезні зусилля, необхідні для кодування з нуля, нагадали мені цей комікс:


(джерело: geekherocomic.com )

Щасти :-)


О, GHC продовжував? Думаю, я відписався, коли вони почали робити те лігво Росса.
Росс

@Ross: Так, вони все ще доставляють комікс, цього нового хлопця називають Борисом з Росії, а він "
Суперхакер

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. Без ідеологічної підтримки GNU для Linux вона ніколи не мала б шансів.

Отже, припускаючи, що ви справді достатньо амбітні (або безглузді), щоб спробувати створити новий успішний браузер, вам слід зосередитись на архітектурі та дизайні . Немає практичних причин створювати новий браузер з нуля, якщо ви не впевнені, що якимось чином можна вдосконалити дизайн існуючих браузерів. Це означає, що вам потрібно достатньо ознайомитися з кодом 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

1
... Якби Google почав будувати браузер сьогодні, він би точно створив його з нуля , але зараз їм занадто дорого перетворювати «Титанік», оскільки всі його співробітники вже знають Blink. Новий стартап з глибокими навичками та добре фінансується грошима для створення конкуруючої ОС-браузера, безумовно, може перевершити Chrome.
Pacerier

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
Я повинен був згадати: якщо ви хочете створити яблучний пиріг з нуля, вам слід почати зі створення Всесвіту.
Kris

@ Mk12: справді, дякую. оновлено.
Кріс,

1
@Kris Як створити Всесвіт, коли немає з чим його створити?
uSeRnAmEhAhAhAhAhA

1
@ user2645707: Я б не знав, я просто папугаю когось розумнішого за мене. quotationspage.com/quote/26980.html
Кріс,

12
+1 за "Напевно, ви можете зробити краще, ніж Internet Explorer".
Пула Нандха

14

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

Я не знаю багато про те, як працюють протоколи (те, що вам обов'язково потрібно дослідити), або про те, що відбувається в браузері, але чудовим місцем для початку буде джерело браузерів з відкритим кодом, в першу чергу Chrome і Firefox. Chrome - це особливо хороший проект, на який слід дивитись, оскільки він робить лише те, з чого я очікую, що ви почнете: хром та серверну частину браузера. Спочатку забудьте про створення механізму візуалізації - використовуйте Webkit або Gekko.


8

Як усі інші вже говорили, веб-браузер - це величезний проект. Вам доведеться турбуватися про tcp / ip & sockets, рендерінг html, використання css, створення моделі DOM, виконання javascript, роботу з неправильно сформованою розміткою та кодом та обробку всіх типів файлів, перш ніж ви зможете навіть подумати про те, чого люди очікують від браузер (тобто закладки, історія, приватний перегляд, безпека тощо) Це величезний проект.

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

Я завантажував джерело Firefox і повільно видаляв його. Іншими словами, я б взяв джерело та видалив усі функції закладок. Потім я б видалив можливість обробляти аддони. Потім я видалив весь код щодо збереження файлів. Я буду продовжувати цей процес до тих пір , поки я отримав дуже основний веб - браузер. Я б переглянув цей код.

Потім я б почав будувати свій власний. Я б взяв знання, отримані завдяки роз'єднанню Firefox, і вклав би їх у створення нового браузера.

Цілому багато удачі вам!


Чи можете ви вказати будь-який вказівник щодо того, як розкласти Firefox? Я маю на увазі, я отримую exeфайл, після встановлення якого я отримую вихідну папку з великою кількістю dllфайлів. Як мені вивчити фактичний код, який це зробив, і логіку, яка стоїть за цим?
SexyBeast

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


4

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

Тоді ви повинні знайти спосіб перетворити справжній HTML з Інтернету відповідно до ваших потреб.

Але не жартуйте: браузер - це не маленький проект.


3

... тоді почніть турбуватися про безпеку

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


1

дуже амбіційний проект, але один розробник не може зробити це сам, вам потрібна команда (менеджер проекту, тестувальники ...), і, можливо, вам варто переглянути свій вибір мови c # працює лише у Windows (я знаю моно в Linux, але це не те саме) у будь-якому разі я бажаю тобі удачі, і я буду радий користуватися вашим браузером


0

У вас справді багато вільного часу, чи не так? AFAIK, більшість браузерів були написані на C ++, не всі користувачі мають платформу .NET, встановлену на своїх комп'ютерах, і якщо вони це роблять, можливо, це не потрібна версія.

Це може зайняти роки, але в будь-якому випадку, є багато браузерів з відкритим кодом, FireFox, Google Chrome .. тощо. Ви можете почати з перегляду коду, удачі в цьому :)


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