Jak zacząć budować przeglądarkę internetową? [Zamknięte]

88

Postanowiłem włożyć trochę wysiłku w zbudowanie przeglądarki internetowej od podstaw. Jakie są typowe funkcje, architektury i cechy nowoczesnych przeglądarek internetowych , o których powinienem wiedzieć przed rozpoczęciem?

Wszelkie rekomendacje są wysoko cenione!

Galilyou
źródło
9
Tak, to szalony projekt, ale nie musimy tutaj brać miki - myślę, że to świetny punkt do dyskusji, jak to obejść :)
Ross
8
Pamiętam artykuł jakiś czas temu, w którym ktoś opłakiwał fakt, że nikt nie ma już odwagi, by budować nowe silniki renderujące. Powiedział, że potrzebne są nowe przeglądarki, ponieważ dzisiejsze komputery są inne. Wiele rdzeni. Pierwszym krokiem jest Chrome z 1 procesem na kartę. Zobaczmy, co będzie dalej.
stesch
35
Wyhoduj kilka piłek i rób, co chcesz. Jeśli to zadziała, to świetnie. Jeśli nie, próbuj dalej, w przeciwnym razie skończysz jak druga połowa społeczeństwa, która mówi: „Nie twórz niczego nowego, po prostu użyj zepsutego gówna, które już mamy”.
uSeRnAmEhAhAhAhAhA
7
Potrzebujesz jednej z tych pigułek, które Bradley Cooper przyjmuje w Limitless . ;)
Ali Gajani
3
Dać mu szansę. Założę się, że jest to o wiele łatwiejsze niż mówią ludzie, zwłaszcza jeśli połączysz ze sobą wiele istniejących komponentów. Jak trudne może być przeanalizowanie tekstu i wyświetlenie kolorowych ramek zawierających tekst?
Ian Warburton

Odpowiedzi:

125

Rozbij to na kawałki. Co to jest przeglądarka internetowa? Co to robi? To:

  • Pobiera zawartość zewnętrzną. Potrzebujesz więc biblioteki HTTP lub (niezalecane) napisz to samodzielnie. Protokół HTTP jest bardzo złożony / subtelny, np. Obsługa nagłówków wygasających, różne wersje (chociaż obecnie jest to głównie 1.1), itp.;
  • Obsługuje różne typy zawartości. Istnieje rejestr Windos dla tego typu rzeczy, które możesz na barana. Mówię tutaj o interpretacji treści w oparciu o typ MIME;
  • Analizuje HTML i XML : aby stworzyć DOM (Document Object Model);
  • Analizuje i stosuje CSS : wymaga to zrozumienia wszystkich właściwości, wszystkich jednostek miary i wszystkich sposobów określania wartości (np. "Border: 1px solid black" vs oddzielne border-width, itp.);
  • Implementuje model wizualny W3C (i to jest prawdziwy kicker); i
  • Posiada silnik Javascript .

A to w skrócie przeglądarka internetowa. Niektóre z tych zadań są niezwykle złożone. Nawet te łatwo brzmiące mogą być trudne. Weź pobieranie zawartości zewnętrznej. Musisz poradzić sobie z przypadkami użycia, takimi jak:

  • Ilu jednoczesnych połączeń użyć?
  • Błąd podczas raportowania do użytkownika;
  • Proxy;
  • Opcje użytkownika;
  • itp.

Powodem, dla którego ja i inni wspólnie unosimy brwi, jest to, że silnik renderujący jest twardy (i jak ktoś zauważył, jego rozwój upłynął wiele lat). Główne silniki renderujące to:

  • Trident: opracowany przez firmę Microsoft dla przeglądarki Internet Explorer;
  • Gecko: używany w przeglądarce Firefox;
  • Webkit: używany w Safari i Chrome 0-27;
  • KHTML: używany w środowisku graficznym KDE. Webkit został rozwidlony z KHTML kilka lat temu;
  • Elektra: używana w Opera 4-6;
  • Presto: używany w Opera 7-12;
  • Blink: używany w Chrome 28+, Opera 15+, widelec webkit;

Trzech najlepszych należy uznać za główne obecnie używane silniki renderujące.

Silniki JavaScript są również trudne. Jest kilka z nich, które są zwykle powiązane z konkretnym silnikiem renderującym:

  • SpiderMonkey: używany w Gecko / Firefox;
  • TraceMonkey: zastąpi SpiderMonkey w Firefoksie 3.1 i wprowadza kompilację JIT (just-in-time);
  • KJS: używany przez Konquerora, powiązany z KHTML;
  • JScript: silnik JavaScript Trident, używany w przeglądarce Internet Explorer;
  • JavascriptCore: używany w Webkit przez przeglądarkę Safari;
  • SquirrelFish: zostanie użyty w Webkit i doda JIT jak TraceMonkey;
  • V8: silnik Javascript firmy Google używany w przeglądarkach Chrome i Opera;
  • Opera (12.X i mniej) również używała własnego.

I oczywiście jest cały interfejs użytkownika: nawigacja między stronami, historia stron, czyszczenie plików tymczasowych, wpisywanie adresu URL, autouzupełnianie adresów URL i tak dalej.

To dużo pracy.

cletus
źródło
* Gecko :) Zgadzam się też. Główne części to renderowanie HTML i silnik JavaScript.
abatishchev
1
Opera stworzyła własne. Presto jest obecnym, a Electra poprzednią.
Tim Sullivan
Świetna, dogłębna odpowiedź - zapomniałem o całościowej analizie JavaScript!
Ross
1
Świat potrzebuje jednak więcej ludzi, którzy mają jaja do tworzenia przeglądarek. Cp eff.org/deeplinks/2016/04/save-firefox .
Pacerier
26

Brzmi jak naprawdę ciekawy projekt, ale będzie wymagał ogromnego wysiłku.

Nie jest to łatwe, ale z akademickiego punktu widzenia można się z tego wiele nauczyć .

Niektóre zasoby, które możesz sprawdzić:

Ale widząc to z realistycznego punktu widzenia, ogromny wysiłek potrzebny do kodowania go od zera przypomniał mi ten komiks:


(źródło: geekherocomic.com )

Powodzenia :-)

Christian C. Salvadó
źródło
Och, czy GHC działało? Chyba zrezygnowałem z subskrypcji, kiedy zaczęli robić to z legowiskiem Rossa.
Ross
@Ross: Tak, wciąż dostarczają komiks, ten nowy facet nazywa się Boris z Rosji i jest "Super Hacker" LOL
Christian C. Salvadó
17

Większość współczesnych przeglądarek internetowych to gigantyczne bestie i prawdopodobnie dość słabo zaprojektowane, ponieważ one (i sama sieć) ewoluowały w dość przypadkowy sposób.

Musisz zacząć od bardzo wyraźnego określenia celów swojego projektu (i tego, co chcesz osiągnąć). Czy robisz to tylko dla przyjemności, czy też oczekujesz, że inni będą używać Twojej przeglądarki? Jeśli spodziewasz się, że inni będą go używać, jaka będzie dla nich zachęta? Nierealistyczne jest oczekiwanie, że opracujesz nową przeglądarkę od podstaw, z której każdy będzie mógł korzystać jako zamiennik dla Chrome, Safari, Firefox, IE, Opera itp. Wszystkie te projekty mają 10-15 lat przewagi. ciebie, a zanim ich dogonisz, będą przed tobą kolejne 10-15 lat. Poza tym mają za sobą znacznie większą siłę roboczą, więc jeśli chcesz, aby Twój projekt zakończył się sukcesem, w pewnym momencie będziesz potrzebować tej siły roboczej.

To jest powód, dla którego Apple i Google, duże firmy z dużymi zasobami, nie zaczęły od zera. Nawet Microsoft nie zaczynał od zera. Oryginalny IE był oparty na Mosaic. Jedynymi znaczącymi przeglądarkami, które istnieją do dziś i zostały uruchomione od podstaw, są Opera , Konqueror i Lynx, które niestety mają niewielki udział w rynku. Zapomnijmy na chwilę o Lynxie, ponieważ jest to przeglądarka tekstowa i prawdopodobnie jedynym powodem, dla którego nadal istnieje, jest to, że obsługuje tę konkretną niszę. Opera jest prawdopodobnie jedną z najlepszych przeglądarek, jakie kiedykolwiek stworzono, a mimo to nigdy nie miała dużego udziału w rynku, więc pamiętaj, że sukces i innowacje to nie to samo. KHTML to silnik Konquerora, który sam nigdy nie odniósł dużego sukcesu, ale jest podstawą WebKit, z którego korzystają zarówno Apple, jak i Google. Myślę, że można z całą pewnością argumentować, że gdyby KHTML nigdy nie został stworzony, nie byłoby ani Safari, ani Chrome. Co ciekawe, zarówno KHTML, jak i Opera zostały w dużej mierze wyprodukowane przez norweskich programistów pracujących w tym samym budynku w Oslo.

Musisz spojrzeć na budowanie przeglądarki internetowej, tak jak na budowanie systemu operacyjnego, ponieważ zasadniczo to jest przeglądarka - jest to system operacyjny do uruchamiania aplikacji internetowych. I podobnie jak system operacyjny, przeglądarka internetowa jest bardzo złożonym oprogramowaniem z wieloma komponentami. Oczywiście ludziom udało się stworzyć od podstaw nowe systemy operacyjne. Przychodzi mi na myśl Linus Torvalds. Stworzył Linuksa, jeden z najbardziej udanych systemów operacyjnych w historii.

Oczywiście stajesz przed dodatkowym wyzwaniem, które sprawia, że ​​zbudowanie nowej, udanej przeglądarki jest trudniejsze niż zbudowanie nowego, udanego systemu operacyjnego. Oczekuje się, że przeglądarki będą bezbłędnie uruchamiać cały starszy kod unoszący się w sieci. Teraz przypuśćmy, że Linusowi Torvaldsowi powiedziano, że jego nowy system operacyjny nie będzie miał znaczenia, jeśli nie będzie całkowicie wstecznie kompatybilny z UNIXem lub jakimś istniejącym systemem operacyjnym. Wątpię, żeby się tym przejmował, a Linux prawdopodobnie nie istniałby dzisiaj. Realistycznie rzecz biorąc, jedynym powodem, dla którego Linux stał się popularny, był fakt, że został dobrze zaprojektowany, a projekt GNU był w stanie stworzyć narzędzia do przenoszenia ogromnych ilości istniejącego kodu do Linuksa. Bez ideologicznego wsparcia GNU dla Linuksa nigdy nie miałby szans.

Zakładając, że naprawdę jesteś wystarczająco ambitny (lub nierozsądny), aby spróbować stworzyć nową odnoszącą sukcesy przeglądarkę, powinieneś się skupić na architekturze i designie . Nie ma praktycznego powodu, aby tworzyć nową przeglądarkę od zera, chyba że masz pewność, że możesz w jakiś sposób ulepszyć projekt istniejących przeglądarek. Oznacza to, że musisz wystarczająco dobrze zapoznać się z kodem WebKit i Gecko , aby zrozumieć podjęte przez nich decyzje projektowe, ale nie powinieneś próbować kopiować ich projektu, ponieważ w przeciwnym razie równie dobrze możesz po prostu użyć ich kodu.

Moje osobiste przemyślenia (bez przeprowadzania wystarczających badań) są takie, że dzisiejsze przeglądarki nie są wystarczająco modułowe. Gdybym miał stworzyć nową przeglądarkę, znalazłbym sposób na ułatwienie wymiany elementów (na przykład zamianę jednego silnika JavaScript na inny) i dałbym użytkownikowi dużo większą kontrolę niż obecnie ma to w istniejących przeglądarkach . Nowoczesne przeglądarki i projektanci stron internetowych odebrały użytkownikowi prawie całą kontrolę. Dlaczego nie mogę, jako użytkownik, powiedzieć przeglądarce internetowej, jak ma renderować zawartość wyświetlaną na moim komputerze? Oryginalny HTML podał jedynie wytyczne dotyczące struktury treści, az biegiem czasu nowsze standardy stały się coraz bardziej dogmatyczne, do tego stopnia, że ​​użytkownik jest teraz zdany na całkowitą łaskę projektanta stron internetowych. Atrakcyjność Linuksa polegała na tym, że przywracał kontrolę użytkownikowi, a to „

Inną rzeczą, którą spędziłbym na badaniu, na twoim miejscu, są zasady projektowania systemu operacyjnego. Zaprojektowanie dobrej przeglądarki powinno przynajmniej w teorii wymagać tych samych zasad, co zaprojektowanie dobrego systemu operacyjnego - zwłaszcza w odniesieniu do współbieżnych procesów, modeli bezpieczeństwa itp.

Wreszcie, po przeprowadzeniu wielu badań, myślę, że od tego należy zacząć kodowanie:

  1. Przeprojektuj Mosaic, ale z własnymi pomysłami projektowymi. To również proponuję, jeśli robisz to tylko dla zabawy lub dla własnej korzyści edukacyjnej. Przeczytaj oryginalne specyfikacje HTML 1.0 i HTML 2.0, a także specyfikacje HTTP 1.1 i aktualne specyfikacje identyfikatora URI i upewnij się, że Twoja przeglądarka jest zgodna ze wszystkimi tymi specyfikacjami. Możesz oczywiście pobrać istniejące oprogramowanie, które już obsługuje protokoły transportu, konwencje URI itp., Ale jeśli poważnie myślisz o zaprojektowaniu własnej przeglądarki, myślę, że dobrym ćwiczeniem jest zrobienie tych rzeczy również od zera, więc otrzymujesz wyczucie, jak wszystkie elementy układanki pasują do siebie. Pod koniec kroku 0 powinieneś mieć przeglądarkę, która jest co najmniej porównywalna z najnowocześniejszą przeglądarką z lat 90-tych. To dobry pierwszy kamień milowy. I faktycznie możesz pobrać oryginalną mozaikę pod adresemftp://ftp.ncsa.uiuc.edu/Mosaic/ i zobacz, jak wypada na tle Twojej przeglądarki. Jest to również dobre ćwiczenie, aby zobaczyć, jak obecne witryny internetowe renderują się w starożytnej przeglądarce, takiej jak Mosaic.

  2. Dodaj obsługę DOM do swojej przeglądarki. Skoncentruj się najpierw na W3C DOM Level 1 i Level 2, ponieważ prawie wszystkie obecne przeglądarki w pełni je obsługują. Następnie spójrz na Poziom 3 i Poziom 4. DOM jest niezwykle fundamentalny dla programowania stron internetowych, więc jeśli zamierzasz faktycznie zbudować nowoczesną przeglądarkę internetową, cały projekt musi wziąć to pod uwagę. Ponieważ piszesz przeglądarkę w języku C #, warto rozważyć, w jaki sposób można wykorzystać istniejący model obiektowy .NET na swoją korzyść.

  3. Przyjrzyj się istniejącym silnikom skryptów i zobacz, czy możesz je przenieść do swojego projektu. Zniechęciłbym Cię do pisania własnego interpretera JavaScript, nie tylko dlatego, że sam w sobie jest to bardzo duży projekt, ale dlatego, że tak dużo pracy zostało już włożone w optymalizację kompilatorów JS (np. V8). Więc jeśli nie jesteś guru w projektowaniu kompilatorów, twój ręcznie zbudowany interpreter JS prawdopodobnie będzie gorszy od tego, co już istnieje, nawet jeśli bezbłędnie spełnia specyfikacje EMCAScript. Ponownie, myślę, że silnik skryptów powinien być czymś, co i tak jest całkowicie oddzielnym modułem od rzeczywistej przeglądarki, więc myślę, że znacznie bardziej przydatne byłoby posiadanie frameworka, który pozwala zastąpić dowolny silnik skryptowy, niż budować silnik skryptów który działa tylko z Twoją przeglądarką.

  4. Zapoznaj się z kodem źródłowym HTML / CSS / JS 10-20 najpopularniejszych witryn w Ameryce Północnej (Google, Facebook, YouTube, Twitter, Wikipedia, Amazon, popularne platformy blogowe itp.) I stwórz przeglądarkę tak, aby dobrze współpracowała z tymi witrynami . Jest to nieco łatwiejszy do rozwiązania problem niż tworzenie przeglądarki, która spełnia wszystkie istniejące standardy (coś, czego obecne przeglądarki wciąż nie robią idealnie), a tym bardziej tworzenie przeglądarki, która poprawnie renderuje wszystkie witryny w sieci (nikt nie może Zrób to). Ludzie będą narzekać, że twoja przeglądarka łamie standardy i tak dalej, ale to nie jest tak duży problem, jak ludzie narzekają, że nie mogą uzyskać dostępu do Google lub Facebooka za pomocą przeglądarki. Nie przychodzi mi do głowy żadna przeglądarka, która poprawnie spełniałaby wszystkie (lub nawet większość) standardów w swoim pierwszym wydaniu, więc mówię, że nawet nie próbujcie.

user2188685
źródło
1
+1 dla większości kodów przeglądarek internetowych jest dziś strasznie do dupy z mnóstwem starych bzdur z lat 90 . Google próbowało rozwiązać ten problem, tworząc Blink, który jest w zasadzie Webkitem z usuniętymi 8,8 milionami linii bzdur, ale mimo to w Blink pozostaje mnóstwo nieusuwalnych, zakorzenionych śmieci.
Pacerier
1
... Gdyby Google zaczął dzisiaj budować przeglądarkę, z pewnością zbudowałoby ją od podstaw , ale teraz zmiana Titanica jest dla nich zbyt droga, ponieważ wszyscy jego pracownicy znają już Blink. Nowy startup z głębokimi umiejętnościami i dobrze finansowany z pieniędzy na stworzenie konkurencyjnego systemu operacyjnego przeglądarki może zdecydowanie mieć przewagę nad Chrome.
Pacerier
15

Masz na myśli pisanie własnego silnika renderującego?

Mogę tylko powiedzieć powodzenia. Wiele lat minęło w obecnej generacji różnych przeglądarek. Jeśli chcesz działać lepiej niż którakolwiek z nich, będziesz potrzebować poważnych umiejętności. Jeśli musisz zapytać, od czego zacząć, prawdopodobnie masz jeszcze więcej niż kilka lat nauki, zanim podjęcie takiego zadania będzie miało sens.

To powiedziawszy, oto kilka (oczywistych) wskazówek:

  1. napisz dużo kodu, który robi małe rzeczy, na przykład rozwiązuje wszystkie problemy projecteuler.net
  2. dowiedz się wszystkiego o swoim zestawie narzędzi i standardach społeczności
  3. pisać dużo więcej kodu
  4. uzyskać naprawdę solidną wiedzę o maszynach skończonych
  5. napisz jeszcze więcej kodu
  6. dowiedz się wszystkiego o stosie tcp / ip i sposobie jego wykorzystania przez http
  7. dowiedz się wszystkiego o http
  8. poznaj standardy (html, xml, sgml, css)
  9. świętuj swoje 150. urodziny.
  10. zacznij pracę nad rzeczywistym projektem przeglądarki.

edytuj poniżej tutaj

Nie chodziło mi o to, żeby to było ani motywujące, ani demotywujące, po prostu próba pokazania, że ​​przeglądarka to naprawdę duży projekt i że naprawdę duże projekty wymagają dużo przemyśleń. Bezczelna szczerość okraszona humorem.

Programuję od ponad dwóch trzecich swojego życia i lubię myśleć, że jestem całkiem przyzwoitym programistą, ale byłoby głupotą z mojej strony, gdybym pomyślał, że miałbym połowę szansy na napisanie porządnej przeglądarki internetowej od zera .

Oczywiście, jeśli tego chcesz, nie pozwól, aby mój komentarz stanął Ci na drodze. Prawdopodobnie możesz zrobić to lepiej niż Internet Explorer.

Kris
źródło
12
Powinienem był wspomnieć: jeśli chcesz stworzyć szarlotkę od podstaw, musisz zacząć od stworzenia wszechświata.
Kris
@ Mk12: rzeczywiście, dzięki. zaktualizowany.
Kris
1
@Kris Jak stworzyć Wszechświat, skoro nie ma z czym go tworzyć?
uSeRnAmEhAhAhAhAhA
1
@ user2645707: Nie wiem, po prostu papuguję kogoś mądrzejszego ode mnie. quotationspage.com/quote/26980.html
Kris,
12
+1 dla „Prawdopodobnie możesz zrobić to lepiej niż Internet Explorer”.
Pulah Nandha,
14

To szalenie ambitny projekt (szczególnie dla jednego programisty), ale coś, co chciałbym kiedyś zrobić - można by się z tego wiele nauczyć.

Nie wiem zbyt wiele o tym, jak działają protokoły (coś, co zdecydowanie musisz zbadać) lub dużo o tym, co dzieje się w przeglądarce, ale świetnym miejscem do rozpoczęcia byłoby źródło przeglądarek open source, głównie Chrome i Firefox. Chrome jest szczególnie dobrym projektem do obejrzenia, ponieważ robią tylko to, od czego oczekiwałbym, że zaczniesz: chrom i zaplecze przeglądarki. Zapomnij na początku o tworzeniu silnika renderującego - użyj Webkit lub Gekko.

Ross
źródło
8

Jak już wszyscy powiedzieli, przeglądarka internetowa to ogromny projekt. Musisz się martwić o tcp / ip i gniazda, renderowanie html, używanie css, tworzenie modelu DOM, wykonywanie javascript, radzenie sobie ze zniekształconymi znacznikami i kodem oraz obsługę wszystkich typów plików, zanim będziesz mógł pomyśleć o wszystkim, czego ludzie oczekują od przeglądarka (tj. zakładki, historia, prywatne przeglądanie, bezpieczeństwo itp.) To ogromny projekt.

Biorąc to pod uwagę, można to zrobić. Proponuję przyjrzeć się źródłu Firefoksa. Wiem, że powiedziałeś, że chcesz zbudować przeglądarkę od podstaw, ale najpierw byłoby bardzo pomocne, gdybyś uczył się od projektu open source.

Pobrałbym źródło Firefoksa i powoli je usunął. Innymi słowy, wziąłbym źródło i usunąłby wszystkie funkcje zakładek. Następnie usunąłbym możliwość obsługi dodatków. Następnie usunąłbym cały kod dotyczący zapisywania plików. Kontynuowałbym ten proces do momentu uzyskania bardzo podstawowej przeglądarki internetowej. Przejrzałbym ten kod.

Wtedy zacząłem budować własne. Skorzystałem z wiedzy zdobytej podczas demontażu Firefoksa i włożyłem ją do stworzenia nowej przeglądarki.

Dużo szczęścia do Ciebie!

stalepretzel
źródło
Czy możesz wskazać, jak zdezintegrować Firefoksa? Chodzi mi o to, że otrzymuję exeplik, po zainstalowaniu którego otrzymuję folder źródłowy z dużą ilością dllplików. Jak zbadać rzeczywisty kod, który to zrobił i logikę, która za tym stoi?
SexyBeast
Ten komentarz jest spóźniony na przyjęcie, ale i tak. Pliki .EXE i .DLL są wynikiem kroku kompilacji i nie można oczekiwać, że będzie to miało sens. Potrzebowałbyś kodu źródłowego (niektóre C ++ i inne języki w różnych plikach), aby nadać sens programowi. Programiści muszą zrozumieć swój własny program, więc mają tendencję do oddzielania i dokumentowania różnych funkcjonalnych części kodu.
Roy Prins,
4

Możesz zacząć od dobrze sformułowanego i poprawnego XHTML, co powinno być łatwiejsze niż zupa tagów, na którą Twoja przeglądarka natrafi w prawdziwym życiu.

Następnie musisz znaleźć sposób, aby dopasować prawdziwy kod HTML z sieci do swoich potrzeb.

Ale nie oszukujmy się: przeglądarka nie jest małym projektem.

smród
źródło
3

... wtedy zacznij się martwić o bezpieczeństwo

(problemy związane z niefunkcjonalnością i przekrojami należy generalnie rozważyć z góry :))

Matt
źródło
1

bardzo ambitny projekt, ale jeden programista nie może tego zrobić sam, potrzebujesz zespołu (kierownik projektu, testerzy ...) i może powinieneś przejrzeć swój wybór języka c # działa tylko na Windows (znam mono na Linuksie, ale to nie jest same) w każdym razie życzę powodzenia i chętnie korzystam z przeglądarki: D

Hannoun Yassir
źródło
0

Naprawdę masz dużo wolnego czasu, prawda? AFAIK, większość przeglądarek została napisana w C ++, nie wszyscy użytkownicy mają zainstalowaną platformę .NET na swoich komputerach, a jeśli to zrobią, może to nie być wersja, której potrzebujesz.

Może to zająć lata, ale w każdym razie istnieje wiele przeglądarek open source, FireFox, Google Chrome ... itd., Możesz zacząć od spojrzenia na kod, powodzenia w tym :)

Waleed Eissa
źródło
1
Chrome nie jest oprogramowaniem typu open source; Ale większość jego kodu źródłowego można znaleźć w projekcie chromium
Anonimowy