Hice un pequeño navegador durante 8 semanas.
(github.com/beginner-jhj)¡Hola! Soy un estudiante de último año de preparatoria que está por entrar a la carrera de Ingeniería en Computación.
Durante 8 semanas hice desde cero un pequeño motor de navegador usando C++ y Qt.
Como fue mi primera vez usando C++, tuve muchísimos ensayos y errores, pero aprendí mucho al llevar directamente a código los elementos clave del pipeline de renderizado.
Implementé todo el pipeline de renderizado dividiéndolo en 5 etapas:
-
Análisis de la cadena HTML y creación del árbol DOM (incluyendo corrección de errores)
-
Parseo de reglas CSS y cálculo de
Computed Stylemediante Cascade -
Cálculo de posición y tamaño de cajas basado en el modelo block/inline
-
Caché y carga de imágenes, y procesamiento del recálculo de layout (
Reflow) -
Painting final usando Qt Graphics View Framework
Como es código escrito en C++ que apenas estoy aprendiendo, seguramente tiene muchas carencias.
¡Si me pudieran dar feedback sobre la estructura del código o sobre cómo mejorarlo, lo agradecería mucho!
Pueden ver más detalles en https://github.com/beginner-jhj/mini_browser/blob/main/README.ko.md
14 comentarios
Antes que nada, mis felicitaciones.
Pensar en crear un navegador web...
Ahora que ya tuviste una buena experiencia...
podrías descargar el código de Chromium...
probar compilarlo
y también sería bueno pasar por la experiencia de analizarlo.
Porque la creación es la madre de la imitación.
Qué trabajo tan interesante hicieron. Creo que habrían podido aprender aún más si lo hubieran hecho directamente sin usar Claude, pero como aprovechar la IA es la tendencia, también me parece que fue una buena experiencia.
Por darles una idea, ¿qué tal si, a partir de esta experiencia, crean un parser de etiquetas
og?Las etiquetas
ogson información simple, como la imagen miniatura principal configurada en una página web; traer eso es una tarea sencilla si se usa un parser de DOM, pero existe el problema de que un parser de DOM es pesado.Así que, en lugar de usar otro parser de DOM y sin parsear todo el DOM completo, si implementan un parser pequeño y eficiente que simplemente obtenga la información de ciertas etiquetas específicas, podría convertirse en una librería muy útil.
Sobre todo en apps móviles he sentido la falta de una librería así. Si la hicieran para mobile usando JavaScript/Kotlin/Swift, podría convertirse en una librería open source muy popular.
Solo recuerdo haberme divertido muchísimo desde que terminó el CSAT hasta que entré a la universidad... Pero al leer el README, parece que entendiste muy bien los puntos clave. Yo también leí este libro y hasta lo implementé en
swift. Jaja.Uy, ¿de qué libro será, por casualidad? Leí el README una vez, pero no parece que mencione ningún libro...!
No estaba en el README. Como el contenido se parecía al del libro, me confundí... perdón;;;
Es un libro llamado 'Desde cero: navegador web'. Los ejemplos del libro están implementados en Python.
Muchísimas gracias por avisar :D ¡Tendré que echarle un vistazo rapidito en Kyobo Book Centre..!
Cuando estaba en el último año de prepa, como sabía más o menos instalar Linux APM, andaba de fanfarrón en comunidades de desarrollo.
Uf, no manches.
¡Lo leí y me gustó mucho!
Creo que desde el hecho de haber puesto esfuerzo e intentado hacerlo ya es de primer nivel. El README parecía casi un informe, así que fue todavía más interesante.
Me da curiosidad ver qué será lo próximo jaja
Eres realmente impresionante.
Lo revisé por encima, pero cuando yo estaba en mi último año de preparatoria ni siquiera me habría atrevido a imaginar algo así. Espero que estudies bien CS y te conviertas en un gran ingeniero.
¡Gracias! ¡Me esforzaré mucho para crecer y convertirme en un excelente ingeniero!
¡Lo leí muy entretenido y me gustó mucho! Personalmente quería preguntarte algo: ¿habrá alguna forma de contactarte?
¡Muchísimas gracias por leer este texto tan largo! Pueden contactarme en hj5014221@gmail.com.
Parece que el enlace está roto :(
¡Ah, les comparto el enlace del repo principal! https://github.com/beginner-jhj/mini_browser