Como funciona os bastidores dos navegadores modernos

HTML5rocks

 

Você sabe o que o seu navegador faz quando desde quando você digita a url até o momento em que o conteúdo do site aparece em sua tela? Não?  Acha que é uma magia negra que acontece?
Pois bem, veja esse artigo que explica tudo o que acontece em um navegador.

Segue o sumário do artigo.

Sumário

  1. Introdução
    1. Os navegadores sobre os quais falaremos
    2. A principal funcionalidade do navegador
    3. A estrutura de nível superior do navegador
  2. O mecanismo de renderização
    1. Mecanismos de renderização
    2. O fluxo principal
    3. Exemplos de fluxo principal
  3. Análise e construção da árvore DOM
    1. Análise – geral
      1. Gramáticas
      2. Combinação Analisador – Analisador léxico
      3. Tradução
      4. Exemplo de análise
      5. Definições formais para vocabulário e sintaxe
      6. Tipos de analisador
      7. Geração automática de analisadores
    2. Analisador HTML
      1. Definição da gramática HTML
      2. Não é uma gramática livre de contexto
      3. HTML DTD
      4. DOM
      5. O algoritmo de análise
      6. O algoritmo de geração de tokens
      7. O algoritmo de construção de árvore
      8. Ações quando a análise é encerrada
      9. Tolerância a erros do navegador
    3. Análise CSS
      1. Analisador Webkit CSS
    4. Ordem de processamento de scripts e folhas de estilo
      1. Scripts
      2. Análise especulativa
      3. Folhas de estilo
  4. Construção da árvore de renderização
    1. Relação entre árvore de renderização e a árvore DOM
    2. O fluxo de construção da árvore
    3. Computação de estilo
      1. Compartilhamento de dados de estilo
      2. Árvore de regras do Firefox
        1. Divisão em estruturas
        2. Computação de contextos de estilo por meio da árvore de regras
      3. Manipulação de regras para obter uma fácil correspondência
      4. Aplicação de regras na ordem em cascata correta
        1. Ordem em cascata da folha de estilo
        2. Especificidade
        3. Classificação das regras
    4. Processo gradual
  5. Layout
    1. Sistema de bits incorretos
    2. Layout global e incremental
    3. Layout assíncrono e síncrono
    4. Otimizações
    5. O processo de layout
    6. Cálculo da largura
    7. Quebra de linhas
  6. Pintura
    1. Global e incremental
    2. Ordem de pintura
    3. Lista de exibição do Firefox
    4. Armazenamento em retângulo do Webkit
  7. Mudanças dinâmicas
  8. Sequências do mecanismo de renderização
    1. Loop de eventos
  9. Modelo visual CSS2
    1. O canvas
    2. Modelo de box CSS
    3. Esquema de posicionamento
    4. Tipos de box
    5. Posicionamento
      1. Relativo
      2. Floats
      3. Absoluto e fixo
    6. Representação em camadas
  10. Recursos

fonte: HTML5rocks

Autor: Maiochi

Desde pequeno é um nerd "antenadinho", um geek talvez, obcecado pelo numero 9999, jura que vai fazer um programa e mudar o mundo. Ele não tem vergonha do que é: feio, pobre e nerd. Dono de uma mente brilhante, porém não menos maléfica. Atualmente trabalha como programador.

Compartilhe este post no

Enviar Comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *