14

Comecei a estudar mais a fundo CSS3, e acabei querendo entender melhor como funciona a renderização do HTML no Document Object Model (DOM), e como é feita essa junção das marcações HTML e do estilo CSS (e do JS) no navegador.

Já li bastante coisa, mas aqui no SOpt não achei nada específico, e ainda não consegui entender direito como é feito esse parser pra criar o DOM, e depois a render tree, e o que é importante levar em conta ao criar o HTML e o CSS (e o JS), pra que eles sempre sejam "compatíveis entre si" (tá certo isso? rsrs) e para que esse parser seja sempre o mais eficiente possível.

3
  • 1
    +1 estou procurando um contéudo que possa explanar isto mas so acho o básico do básico... Commented 21/11/2015 às 18:15
  • 1
    pt.stackoverflow.com/q/40852/101
    – Maniero
    Commented 21/11/2015 às 18:55
  • 1
    É realmente um tema abrangente, não pode ser explicado por simples palavras, se possível lê isto, é capaz de ser uma grande ajuda.
    – Edilson
    Commented 21/11/2015 às 21:28

1 Resposta 1

16

Parsing

O parser é um analisador sintático. Sua função é ler uma entrada de dados que possuem certas regras específicas - em geral é um texto reconhecível por humanos - e montar uma estrutura de como é sua composição. Obviamente uma de suas funções é "enxergar" erros cometidos e recusar as entradas que não estejam dentro das regras gramáticas estabelecidas.

Ele é o centro do compilador de todas as linguagens de programação e marcação, como é o caso do HTML, CSS e JS. Neste contexto, ele é o segundo passo para ter um texto traduzido para algo que o computador entenda. Ele usa uma gramática com as regras que devem ser usadas. Podemos dizer que ele procura entender e separar o que é o substantivo, verbo, adjetivo, pronome, conjunção, pontuação, etc. Em geral uma árvore é montada com todos os elementos encontrados. Isso se ele não encontrar uma estrutura incompatível com as regras. Em alguns casos é possível ignorar parte da árvore e usar o que deu certo.

O primeiro passo é a análise léxica que torna a sequência de caracteres em tokens (chamemos de palavras, a grosso modo) que podem ser analisados posteriormente. Palavras irreconhecíveis podem ser descartadas aqui.

Depois costuma vir a análise semântica que é outro nível de verificação se está de acordo com regras que indicam quando cada conjunto faz sentido. Nela são aplicadas regras específicas para cada tipo de elemento encontrado na estrutura montada pela fase de parsing. Ele pode impedir, por exemplo que se coloque uma palavra onde se espera um número. Ela analisa o código de uma forma mais global e tenta identificar onde pode dar algum problema.

Depois disso entramos na fase de geração de código, onde uma saída pode ser gerada ou uma série de comandos podem ser executados conforme o que se encontra na árvore obtida anteriormente. Quais comandos executar dependerão da análise semântica realizada.

Enfim, essa é a forma de um computador "ler" um texto, interpretá-lo e saber o que fazer com aquilo.

Muitas vezes chamamos todas estas fases de parsing, mesmo que estritamente ela seja só uma parte do processo de "tradução".

No fundo a ideia dele é muito simples, é só aplicar a base da computação: entra um texto, processa, sai outro compreensível pelo computador (ou software que sabe o que fazer com aquilo de forma simples). Como a quantidade de regras e todas suas relações são grandes, criar um parser não é tarefa fácil. Por isso existem até os geradores de parser (que possuem vantagens e desvantagens).

Pode saber mais sobre isto nessa pergunta.

De uma maneira geral, o parsing não é aplicado ao DOM que é algo existente na memória. Ele é aplicado nas linguagens discriminadas acima. Eventualmente elas fazem referência a elementos do DOM. E também é possível em algum momento obter uma representação do DOM em forma de texto que pode-se querer parsear, mas é algo muito específico.

DOM

Tanto o HTML quanto o CSS e o JS podem manipular o DOM. E por manipular entenda que eles podem inserir, modificar ou apagar nós existentes nele. Podemos entender o DOM como objetos uns dentro dos outros. Você tem um objeto com propriedades com valores. Os valores dessas propriedades podem ser coisas simples, como um texto, um número, ou outro valor "nativo", ou pode ser outro objeto. E isto pode ir acontecendo recursivamente, formando uma árvore. O navegador olha para essas propriedades para saber o que fazer para renderizar a página. E cada alteração no DOM provoca ações do navegador para adaptar a página.

Obviamente o HTML é a base de construção do DOM. O CSS estabelece certas características e o JS tem bastante liberdade para manipulá-lo de várias formas.

É possível fazer uma página 100% em JS. Afinal ela é uma linguagem que pode fazer qualquer coisa no DOM, inclusive começá-lo (não estou recomendado).

Acho que boa parte disso está respondida em outra pergunta.

Dúvidas específicas sobre o processo devem ser feitas em perguntas mais específicas. O assunto é muito extenso, complexo e cheio de detalhes.

Coloquei no GitHub para referência futura.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .