Passei 8 semanas criando um pequeno navegador.
(github.com/beginner-jhj)Olá! Sou um estudante do 3º ano do ensino médio prestes a entrar no curso de Ciência da Computação.
Durante 8 semanas, criei do zero um pequeno motor de navegador usando C++ e Qt.
Como foi a minha primeira vez tendo contato com C++, passei por inúmeros erros e tentativas, mas aprendi muito ao implementar em código os principais elementos do pipeline de renderização.
Implementei todo o pipeline de renderização dividindo-o em 5 etapas:
-
Análise da string HTML para gerar a árvore DOM (incluindo correção de erros)
-
Parsing das regras CSS e cálculo do Computed Style por meio do Cascade
-
Cálculo da posição e do tamanho das caixas com base no modelo block/inline
-
Cache e carregamento de imagens, seguido do recálculo de layout (Reflow)
-
Painting final usando o Qt Graphics View Framework
Como o código foi escrito em C++ que estou aprendendo agora, ele provavelmente tem muitas limitações.
Ficarei muito grato se puderem me dar feedback sobre a estrutura do código ou direções de melhoria!
Mais detalhes podem ser vistos em https://github.com/beginner-jhj/mini_browser/blob/main/README.ko.md .
14 comentários
Antes de tudo, meus parabéns pelo esforço.
Só de pensar em fazer um navegador web...
Agora que você já teve uma boa experiência...
acho que também seria legal baixar o código do Chromium...
fazer o build
e ter a experiência de analisá-lo.
A criação é a mãe da imitação.
Que trabalho interessante vocês fizeram. Fico pensando se não daria para aprender ainda mais fazendo diretamente, sem usar o Claude, mas como o uso de IA é a tendência, acho que isso também parece ter sido uma boa experiência.
Se eu puder dar uma ideia, com base nessa experiência, que tal criar um parser de tags
og?As tags
ogsão informações simples definidas em páginas web, como a imagem de miniatura representativa, e buscar isso é uma tarefa simples se você usar um parser de DOM, mas existe a questão de que parsers de DOM são pesados.Então, se você implementar um parser pequeno e eficiente que, sem usar outro parser de DOM e sem fazer o parsing de todo o DOM, apenas obtenha informações de tags específicas, isso pode virar uma biblioteca bem útil.
Sinto falta especialmente de uma biblioteca assim em apps mobile. Se for feito para mobile usando as linguagens javascript/kotlin/swift, pode se tornar uma biblioteca open source popular.
Só lembro de ter aproveitado muito depois do fim do vestibular até entrar na faculdade... Lendo o README, parece que você entendeu muito bem os pontos principais. Eu também li esse livro e cheguei a implementar em Swift. haha
Nossa, por acaso é sobre qual livro? Dei uma olhada no README, mas acho que não vi nenhuma menção a livro...!
Não tem esse conteúdo no README. Como o conteúdo é parecido com o do livro, eu me confundi... desculpe;;;
É o livro Começando um navegador web do zero. Os exemplos do livro são implementados em Python.
Muito obrigado por avisar :D Vou dar uma olhada de leve na Kyobo Bookstore..!
Quando eu estava no 3º ano do ensino médio, só porque sabia instalar Linux APM, eu ficava me achando nas comunidades de desenvolvimento
Nossa, caramba
Gostei bastante de ler!
Acho que só o fato de ter se esforçado e tentado fazer já é coisa de primeira linha. O README parecia quase um relatório, então foi ainda mais interessante.
Fico curioso para ver o que vem na próxima haha
Você é realmente excelente.
Dei uma olhada por alto, mas quando eu estava no último ano do ensino médio nem ousava pensar em algo assim. Espero que você estude bem ciência da computação e se torne um engenheiro incrível.
Obrigado! Vou me esforçar bastante para me tornar um excelente engenheiro!
Li com muito prazer, foi ótimo! Tenho uma pergunta pessoal: por acaso existe alguma forma de entrar em contato com você?
Muito obrigado por ler um texto tão longo! Você pode entrar em contato comigo em hj5014221@gmail.com.
O link está quebrado mesmo :(
Ops, vou deixar o link do repositório principal! https://github.com/beginner-jhj/mini_browser