¿Cómo empezar a construir un navegador web? [cerrado]


88

Decidí esforzarme en construir un navegador web desde cero. ¿Cuáles son las funciones, arquitecturas y características comunes de los navegadores web modernos que debería conocer antes de comenzar?

¡Cualquier recomendación es muy apreciada!


9
Sí, es un proyecto loco, pero no es necesario que llevemos el Mickey aquí; creo que es un gran punto de discusión sobre cómo solucionaría esto :)
Ross

8
Recuerdo un artículo de hace algún tiempo en el que alguien lamentó el hecho de que ya nadie tiene las agallas para construir nuevos motores de renderizado. Se necesitan nuevos navegadores, dijo, porque las computadoras de hoy son diferentes. Varios núcleos. El primer paso es Chrome con 1 proceso por pestaña. Veamos qué viene a continuación.
stesch

35
Cultiva algunas bolas y haz lo que quieras. Si funciona, genial. Si no es así, sigue intentándolo, de lo contrario terminarás como la otra mitad de la sociedad que dice "No crees nada nuevo, solo usa la mierda rota que ya tenemos".
uSeRnAmEhAhAhAhAhA

7
Necesitas una de esas pastillas que Bradley Cooper toma en Limitless . ;)
Ali Gajani

3
Darle una oportunidad. Apuesto a que es mucho más fácil de lo que dice la gente aquí, especialmente si conecta muchos componentes existentes. ¿Qué tan difícil puede ser analizar un poco de texto y generar algunos cuadros de colores con texto dentro de ellos?
Ian Warburton

Respuestas:


125

Bueno, rómpelo en pedazos. ¿Que es un navegador web? ¿Qué hace? Eso:

  • Obtiene contenido externo. Por lo tanto, necesita una biblioteca HTTP o (no recomendado) escribir esto usted mismo. Hay mucha complejidad / sutileza en el protocolo HTTP, por ejemplo, el manejo de encabezados expira, diferentes versiones (aunque en su mayoría es 1.1 en estos días), etc.
  • Maneja diferentes tipos de contenido. Hay un registro de Windos para este tipo de cosas que puede llevar a cuestas. Estoy hablando de interpretar contenido basado en el tipo MIME aquí;
  • Analiza HTML y XML : para crear un DOM (Modelo de objeto de documento);
  • Analiza y aplica CSS : esto implica comprender todas las propiedades, todas las unidades de medida y todas las formas en que se pueden especificar los valores (por ejemplo, "borde: 1px negro sólido" frente a las propiedades separadas del ancho del borde, etc.);
  • Implementa el modelo visual W3C (y este es el verdadero truco); y
  • Tiene un motor Javascript .

Y eso es básicamente un navegador web en pocas palabras. Ahora bien, algunas de estas tareas son increíblemente complejas. Incluso los que suenan fáciles pueden ser difíciles. Toma la búsqueda de contenido externo. Necesita lidiar con casos de uso como:

  • ¿Cuántas conexiones simultáneas usar?
  • Informe de error al usuario;
  • Proxies;
  • Opciones de usuario;
  • etc.

La razón por la que otros y yo estamos levantando nuestras cejas colectivamente es que el motor de renderizado es difícil (y, como alguien señaló, han pasado años en su desarrollo). Los principales motores de renderización son:

  • Trident: desarrollado por Microsoft para Internet Explorer;
  • Gecko: utilizado en Firefox;
  • Webkit: utilizado en Safari y Chrome 0-27;
  • KHTML: utilizado en el entorno de escritorio KDE. Webkit bifurcado de KHTML hace algunos años;
  • Elektra: utilizado en Opera 4-6;
  • Presto: utilizado en Opera 7-12;
  • Blink: utilizado en Chrome 28+, Opera 15+, webkit fork;

Los tres primeros deben considerarse los principales motores de renderizado que se utilizan en la actualidad.

Los motores de JavaScript también son difíciles. Hay varios de estos que tienden a estar vinculados al motor de renderizado en particular:

  • SpiderMonkey: utilizado en Gecko / Firefox;
  • TraceMonkey: reemplazará a SpiderMonkey en Firefox 3.1 e introduce la compilación JIT (just-in-time);
  • KJS: utilizado por Konqueror, vinculado a KHTML;
  • JScript: el motor Javascript de Trident, utilizado en Internet Explorer;
  • JavascriptCore: utilizado en Webkit por el navegador Safari;
  • SquirrelFish: se usará en Webkit y agrega JIT como TraceMonkey;
  • V8: motor Javascript de Google utilizado en Chrome y Opera;
  • Opera (12.X y menos) también usó el suyo.

Y, por supuesto, está todo el material de la interfaz de usuario: navegación entre páginas, historial de páginas, borrar archivos temporales, escribir una URL, completar automáticamente las URL, etc.

Eso es mucho trabajo.


* Gecko :) También de acuerdo. Las partes principales son el renderizador HTML y el motor JavaScript.
abatishchev

1
Opera creó el suyo propio. Presto es el actual y Electra fue el anterior.
Tim Sullivan

Excelente respuesta en profundidad: ¡me olvidé del análisis de JavaScript todos juntos!
Ross

1
Sin embargo, el mundo necesita más personas que tengan huevos para construir navegadores. Cp eff.org/deeplinks/2016/04/save-firefox .
Pacerier

26

Suena como un proyecto realmente interesante, pero requerirá que inviertas un esfuerzo enorme.

No es fácil, pero desde un punto de vista académico, podrías aprender mucho de él.

Algunos recursos que podrías consultar:

Pero viéndolo desde un punto de vista realista , el enorme esfuerzo necesario para codificarlo desde cero me recordó este cómic:


(fuente: geekherocomic.com )

Buena suerte :-)


Oh, ¿GHC continuó? Creo que me di de baja cuando empezaron a hacer lo de la guarida de Ross.
Ross

@Ross: Sí, todavía entregan el cómic, ese chico nuevo se llama Boris de Rusia, y es un "Super Hacker" LOL
Christian C. Salvadó

17

La mayoría de los navegadores web modernos son bestias gigantes, y probablemente estén bastante mal diseñados porque ellos (y la propia web) evolucionaron de una manera bastante desordenada.

Primero debe comenzar haciendo muy explícitos los objetivos de su proyecto (y lo que espera lograr). ¿Es esto algo que solo hace por diversión o espera que otras personas usen su navegador? Si espera que otros lo usen, ¿cuál será el incentivo para ellos? No es realista esperar que desarrolle un nuevo navegador desde cero que todos puedan usar como reemplazo de Chrome, Safari, Firefox, IE, Opera, etc. Todos esos proyectos tienen una ventaja de 10 a 15 años. usted, y para cuando los alcance, estarán otros 10-15 años por delante de usted. Además, tienen mucha más mano de obra detrás de ellos, por lo que si desea que su proyecto tenga éxito, necesitará esa mano de obra en algún momento.

Ésta es la razón por la que Apple y Google, grandes empresas con muchos recursos, no partieron de cero. Ni siquiera Microsoft empezó de cero. El IE original se basó en Mosaic. Los únicos navegadores importantes que aún existen hoy en día y que comenzaron desde cero son Opera , Konqueror y Lynx., que lamentablemente todos tienen una participación de mercado minúscula. Olvidémonos de Lynx por el momento, ya que es un navegador de solo texto y presumiblemente la única razón por la que todavía está disponible es porque sirve para ese nicho específico. Opera es posiblemente uno de los mejores navegadores jamás creados y, sin embargo, nunca ha tenido una gran cuota de mercado, así que recuerda que el éxito y la innovación no son lo mismo. KHTML es el motor detrás de Konqueror, que nunca tuvo mucho éxito, pero es la base de WebKit que utilizan tanto Apple como Google. Creo que definitivamente se podría argumentar que si KHTML nunca se hubiera creado, ni Safari ni Chrome existirían. Curiosamente, tanto KHTML como Opera fueron producidos en gran parte por programadores noruegos que trabajaban en el mismo edificio en Oslo.

Debe considerar la construcción de un navegador web como construir un sistema operativo, porque eso es esencialmente lo que es un navegador: es un sistema operativo para ejecutar aplicaciones web. Y al igual que un sistema operativo, un navegador web es una pieza de software muy compleja con muchos componentes. Por supuesto, la gente ha tenido éxito en la creación de nuevos sistemas operativos desde cero. Me viene a la mente Linus Torvalds. Hizo Linux, uno de los sistemas operativos más exitosos de la historia.

Por supuesto, se enfrenta a un desafío adicional, que hace que construir un nuevo navegador exitoso sea más difícil que crear un nuevo SO exitoso . Se espera que los navegadores ejecuten sin problemas todo el código heredado que flota en la web. Ahora suponga que a Linus Torvalds se le ha dicho que su nuevo sistema operativo no importaría a menos que fuera perfectamente compatible con UNIX o algún sistema operativo existente. Dudo que se hubiera molestado, y probablemente Linux no existiría hoy. De manera realista, por supuesto, la única razón por la que Linux se hizo popular fue porque estaba bien diseñado y el proyecto GNU era capaz de crear herramientas para portar grandes cantidades de código existente a Linux. Sin el apoyo ideológico de GNU para Linux, nunca habría tenido la oportunidad.

Entonces, asumiendo que realmente eres lo suficientemente ambicioso (o temerario) como para intentar hacer un nuevo navegador exitoso, en lo que deberías centrarte es en la arquitectura y el diseño . No hay ninguna razón práctica para crear un nuevo navegador desde cero a menos que esté seguro de que puede mejorar el diseño de los navegadores existentes de alguna manera. Eso significa que debe familiarizarse lo suficiente con el código de WebKit y Gecko para comprender las decisiones de diseño que tomaron, pero no debería intentar copiar su diseño porque, de lo contrario, también podría usar su código.

Mi opinión personal (sin haber investigado lo suficiente) es que los navegadores actuales no son lo suficientemente modulares. Si fuera a hacer un nuevo navegador, encontraría una manera de facilitar el intercambio de cosas (como reemplazar un motor de JavaScript por otro) y darle al usuario mucho más control del que tiene actualmente con los navegadores existentes. . Los navegadores y diseñadores web modernos le han quitado casi todo el control al usuario. ¿Por qué yo, el usuario, no puedo decirle al navegador web cómo quiero que represente el contenido que se muestra en mi máquina? El HTML original solo daba pautas sobre cómo estructurar el contenido y, con el tiempo, los estándares más nuevos se han vuelto cada vez más dogmáticos, hasta el punto en que el usuario está ahora a merced total del diseñador web. El atractivo de Linux fue que devolvió el control al usuario, y que '

La otra cosa en la que dedicaría tiempo a investigar, si fuera usted, son los principios de diseño del sistema operativo. Diseñar un buen navegador, al menos en teoría, debería requerir los mismos principios que diseñar un buen sistema operativo, especialmente en lo que respecta a procesos concurrentes, modelos de seguridad, etc.

Finalmente, después de haber investigado mucho, aquí es donde deberías comenzar a codificar, creo:

  1. Mosaico de reingeniería, pero con tus propias ideas de diseño. Esto también es lo que sugeriría si lo hace por diversión o para su propio beneficio educativo. Lea las especificaciones originales de HTML 1.0 y HTML 2.0, así como las especificaciones HTTP 1.1 y las especificaciones URI actuales, y asegúrese de que su navegador cumpla con todas esas especificaciones. Por supuesto, puede descargar software existente que ya maneja los protocolos de transporte, las convenciones URI, etc., pero si se toma en serio el diseño de su propio navegador, creo que es un buen ejercicio hacer estas cosas también desde cero, para que obtenga un buen sentido de cómo encajan todas las piezas del rompecabezas. Al final del paso 0, debería tener un navegador que sea al menos comparable a lo que era el estado de la técnica en los años 90. Este es un buen primer hito. Y puedes descargar el mosaico original enftp://ftp.ncsa.uiuc.edu/Mosaic/ y vea cómo se compara con su navegador. También es un buen ejercicio para ver cómo se procesan los sitios web actuales en un navegador antiguo como Mosaic.

  2. Agregue soporte para DOM a su navegador. En primer lugar, céntrese en el nivel 1 y el nivel 2 del DOM del W3C, ya que prácticamente todos los navegadores actuales los admiten por completo. Luego, mire el Nivel 3 y el Nivel 4. El DOM es extremadamente fundamental para la programación web, por lo que si realmente va a construir un navegador web moderno, todo el diseño debe tener esto en cuenta. Dado que está escribiendo el navegador en C #, es posible que desee tener en cuenta cómo podría aprovechar el modelo de objetos .NET existente para su beneficio.

  3. Mire los motores de secuencias de comandos existentes y vea si puede portarlos a su proyecto. Le desaconsejaría escribir su propio intérprete de JavaScript, no solo porque es un proyecto muy grande en sí mismo, sino porque ya se ha trabajado mucho para optimizar los compiladores JS (por ejemplo, V8). Entonces, a menos que sea un gurú en el diseño de compiladores, su intérprete JS construido a mano probablemente será inferior a lo que ya existe, incluso si sigue las especificaciones de EMCAScript a la perfección. Nuevamente, creo que el motor de secuencias de comandos debería ser algo que sea un módulo completamente separado del navegador real de todos modos, por lo que creo que sería mucho más útil tener un marco que le permita sustituir cualquier motor de secuencias de comandos, en lugar de construir un motor de secuencias de comandos. que solo funciona con su navegador.

  4. Mire el código fuente HTML / CSS / JS de los 10-20 sitios web principales en América del Norte (Google, Facebook, YouTube, Twitter, Wikipedia, Amazon, plataformas de blogs populares, etc.) y diseñe su navegador para que funcione bien con estos sitios. . Este es un problema algo más manejable de resolver que hacer un navegador que se adhiera a todos los estándares existentes (algo que los navegadores actuales todavía no hacen perfectamente) y mucho menos hacer un navegador que muestre correctamente todos los sitios web en la web (nadie puede Haz eso). La gente se quejará de que su navegador rompe los estándares y demás, pero eso no es un problema tan grande como las personas que se quejan de que no pueden acceder a Google o Facebook con su navegador. No puedo pensar en ningún navegador que haya seguido correctamente todos (o incluso la mayoría) de los estándares en su primera versión, así que digo que ni siquiera se moleste en intentarlo.


1
El +1 para la mayoría de los códigos de los navegadores web de hoy apesta horriblemente con un montón de basura heredada desde la década de 1990 . Google trató de resolver esto creando Blink, que es básicamente Webkit con 8.8 millones de líneas de basura eliminadas, pero aún así, quedan un montón de basura arraigada e inamovible atrapada en Blink.
Pacerier

1
... Si Google hubiera comenzado a construir un navegador hoy, definitivamente lo construiría desde cero , pero ahora es demasiado caro para ellos convertir el Titanic porque todos sus empleados ya conocen Blink. Una nueva startup con habilidades profundas y bien financiada con dinero para crear un sistema operativo de navegador competidor definitivamente puede tener una ventaja sobre Chrome.
Pacerier

15

¿Te refieres a escribir tu propio motor de renderizado?

Solo puedo decir buena suerte. Han pasado muchos años en la generación actual de los distintos navegadores. Si quiere hacerlo mejor que cualquiera de ellos, necesitará algunas habilidades serias. Si tiene que preguntar por dónde empezar, probablemente tenga más de unos pocos años de estudio antes de que tenga sentido intentar tal tarea.

Dicho esto, aquí hay algunos consejos (obvios):

  1. escribir mucho código que haga cosas pequeñas, como resolver todos los problemas de projecteuler.net
  2. aprenda todo lo que pueda sobre su kit de herramientas y sus estándares comunitarios
  3. escribir mucho más código
  4. obtener una comprensión sólida de las máquinas de estados finitos
  5. escribir aún más código
  6. aprenda todo sobre la pila tcp / ip y cómo se usa para http
  7. aprende todo lo que puedas sobre http
  8. aprender los estándares (html, xml, sgml, css)
  9. Celebre su 150 cumpleaños.
  10. comience con el proyecto del navegador real.

editar aquí abajo

No quise que fuera motivador o desmotivador, solo un intento de mostrarle que un navegador es un proyecto realmente grande y que los proyectos realmente grandes requieren mucho pensamiento. Franca honestidad salpicada de humor.

He programado más de dos tercios de mi vida y me gusta pensar que soy un programador bastante decente, pero sería una tontería pensar que tendría la mitad de la oportunidad de escribir un navegador web decente desde cero. .

Por supuesto, si esto es lo que quieres hacer, no dejes que mi comentario se interponga en tu camino. Probablemente pueda hacerlo mejor que Internet Explorer.


12
Debería haber mencionado: si quieres crear un pastel de manzana desde cero, debes comenzar creando un universo.
Kris

@ Mk12: de hecho, gracias. actualizado.
Kris

1
@Kris ¿Cómo se crea un Universo cuando no hay nada con qué crearlo?
uSeRnAmEhAhAhAhAhA

1
@ user2645707: No lo sabría, solo estoy repitiendo a alguien más inteligente que yo. quotationspage.com/quote/26980.html
Kris

12
+1 para "Probablemente puedas hacerlo mejor que Internet Explorer".
Pulah Nandha

14

Es un proyecto increíblemente ambicioso (especialmente para un solo desarrollador), pero algo que me encantaría hacer algún día, podrías aprender mucho de él.

No sé mucho sobre cómo funcionan los protocolos (algo que definitivamente necesitas investigar) o mucho sobre lo que sucede en un navegador, pero un buen lugar para comenzar sería la fuente de los navegadores de código abierto, principalmente Chrome y Firefox. Chrome es un proyecto especialmente bueno para mirar, ya que solo hacen lo que espero que comiences con: Chrome y el backend del navegador. Olvídese de crear un motor de renderizado al principio: use Webkit o Gekko.


8

Como ya han dicho todos los demás, un navegador web es un proyecto enorme. Tienes que preocuparte por tcp / ip & sockets, renderizar html, usar css, crear un modelo DOM, ejecutar javascript, lidiar con marcado y código mal formados y manejar todo tipo de archivos antes de que puedas pensar en todas las cosas que la gente espera de un navegador (es decir, marcadores, historial, navegación privada, seguridad, etc.) es un proyecto enorme.

Dicho esto, se puede hacer. Mi sugerencia sería buscar la fuente de Firefox. Sé que dijiste que querías construir un navegador desde cero, pero sería muy útil aprender primero de un proyecto de código abierto.

Descargaría la fuente de Firefox y la eliminaría lentamente. En otras palabras, tomaría la fuente y eliminaría todas las funciones de marcadores. Luego, eliminaría la capacidad de manejar complementos. Luego, eliminaría todo el código relacionado con guardar archivos. Continuaría con este proceso hasta obtener un navegador web muy básico. Revisaría ese código.

Entonces, empezaría a construir el mío. Tomaría el conocimiento que había adquirido al desarmar Firefox y lo pondría en la construcción de un nuevo navegador.

¡ Mucha suerte para ti!


¿Puede proporcionarnos algún indicio sobre cómo desintegrar Firefox? Quiero decir, obtengo un exearchivo, al instalarlo, obtengo una carpeta de origen con muchos dllarchivos. ¿Cómo estudio el código real que hizo esto y la lógica que está detrás de esto?
SexyBeast

Este comentario llega tarde a la fiesta, pero de todos modos. Los archivos .EXE y .DLL son el resultado de un paso de compilación y no puede esperar que tengan mucho sentido. Necesitaría el código fuente (algunos C ++ y otros lenguajes en archivos diferentes) para entender el programa. Los programadores necesitan darle sentido a su propio programa, por lo que tienden a separar y documentar las diversas partes funcionales del código.
Roy Prins


4

Puede comenzar con XHTML válido y bien formado, que debería ser más fácil que la sopa de etiquetas que su navegador encontrará en la "vida" real.

Luego, debe encontrar una manera de adaptar el HTML real de la web a sus necesidades.

Pero no se engañe: un navegador no es un proyecto pequeño.


3

... entonces empieza a preocuparte por la seguridad

(Sin embargo, las preocupaciones transversales y no funcionales deben considerarse desde el principio :))


1

proyecto muy ambicioso, pero un desarrollador no puede hacer esto solo, necesita un equipo (gerente de proyecto, probadores ...) y tal vez debería revisar su elección de lenguaje c # funciona solo en Windows (sé mono en Linux pero no es el mismo) de todos modos le deseo buena suerte y estaré feliz de usar su navegador: D


0

Realmente tienes mucho tiempo libre en tu mano, ¿no es así? AFAIK, la mayoría de los navegadores fueron escritos en C ++, no todos los usuarios tienen el marco .NET instalado en sus computadoras y, si lo tienen, puede que no sea la versión que necesita.

Esto podría llevarte años, pero de todos modos, hay muchos navegadores de código abierto, FireFox, Google Chrome, etc., podrías comenzar por echar un vistazo al código, buena suerte con eso :)


1
Chrome no es de código abierto; Pero la mayor parte de su código fuente se puede encontrar en el proyecto de cromo
Anónimo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.