Sei que existe a arvore DOM, mas desconheço como funciona a renderização. Sei que aprender isso é importante.
1 Resposta
Não existe algo especifico, isso não ocorre no front-end de fato, ou é dependente de javascript ou algo assim, a questão é que internamente um navegador tem um "motor" (mais de um) baseado em "interfaces" que renderizam seguindo a resposta do seus HTML e CSS.
Então é como se o HTML e CSS fossem instruções para que este motor criasse a composição da página, alterando conforme você manipula o DOM via javascript.
Por exemplo você requisita uma página, o navegador baixa o conteúdo dela podendo ser parcial ou não e começa a processa-la enviando o que já foi baixado para o motor começar a desenhar conforme as instruções e gerar itens como botões e outras coisas.
Na verdade quando você manipula usando JavaScript ou injeta um CSS as instruções e o motor detecta estas "atualizações" e modifica conforme essas novas instruções renderizando novamente.
Não há uma necessidade em aprender a criar algo assim, isto eu digo se você pretende desenvolver páginas web apenas.
Existe algumas respostas minhas que pode lhe interessar sobre o assunto:
- Existe um modo de ver o código nativo de funções do JavaScript?
- É correto omitir a start tag html no HTML5?
- Qual o código e linguagem fazem a tag input fazer o que faz?
Os motores mais populares:
Blink
O Blink é o motor usado pelos navegadores Chrome, Opera e Vivaldi (existem mais), ele é uma fork do motor Webkit. O Blink veem em conjunto com o Chromium que é projeto open-source da Google usada no Chrome e que você pode usar para criar o seu próprio navegador, o Chromium vai bem além do motor de renderização, ele traz consigo varias funcionalidades.
Ele é escrito em C++
Webkit
Motor usado por muitos navegadores, até mesmo nas primeiras versões do Google Chrome, é usado principalmente no Safari para Mac e iOS e em muitos navegadores mobile como o navegador padrão do Android e até mesmo em BlackBerrys, este motor foi baseado em um motor chamado KHTML, irei falar dele posteriormente.
Ele é escrito em C++
Gecko
Motor do navegador Firefox que também é usado em outros produtos da mesma empresa, como o Thunderbird (cliente de email), ele também é open-source.
Ele é escrito em C++
EdgeHTML
É o motor usado no navegador Microsoft Edge, sucessor do Internet Explorer, ele não é open-source (ou seja é proprietário).
Provavelmente escrito em C++
Trident
Motor usado no Internet Explorer, também é proprietário, provavelmente também escrito em C++
KHTML
Este é o motor que deu origem ao Webkit, a Apple anos atrás não possuía navegador próprio, tanto que até a Microsoft desenvolveu uma versão do do Internet Explorer para Mac (não usava o Trident e sim um motor chamado Tasman), a Apple fez uma fork para criar a primeira e a segunda versão do Safari e tornando esta fork no conhecido Webkit.
Este motor é usado pelo KDE no seu navegador chamado Konqueror e talvez para outras funcionalidades.
Ele é escrito em C++
Ainda existem muitos motores de renderização, mas não tão populares ou que estão simplesmente em desuso.
Cada motor tem o seu próprio "sistema", ou seja cada uma funciona a sua maneira e internamente provavelmente todos são diferentes, o que eles devem seguir são os padrões web para definir como tal instrução deve ser "entregue", não quer dizer que ele teve que seguir o mesmo caminho que outro motor, mas o resultado final precisa ser igual.
Motores de renderização geralmente suportam:
- HTML
- CSS
- SVG
Muitos elementos na página podem usar recursos do sistema operacional como botões e scrollbars e codecs de áudio e vídeo, claro que isso é bem relativo, antes os navegadores usavam plugins ou activex para processar audio e video, hoje os navegadores tem players próprios, alguns ainda sim usam os codecs do sistema operacional (isso devido as LICENÇAS que cada codec tem, o que poderia implicar em muitos problemas legais), outros tem suporte a alguns codecs nativamente.
-
-
-
2@gato total, eles recebem as instruções e geram os elementos visuais, podendo usar ou não componentes do sistema operacional, o DOM seria uma interface que serve como instrução para o MOTOR para ele saber aonde vão as coisas. Amanhã prometo dar uma detalhada melhor, não tem muito como definir porque cada motor faz a sua maneira as coisas.– Syzoth ♦Commented 6/03/2017 às 2:45