Nome: Fernando Henrique Oliveira Abreu

Curso: Desenvolvimento em Aplicações Web

Disciplina: Desenvolvimento Web

Internet: os processos por trás de um site

Ao se acessar URL de um site no seu navegador, por exemplo: ​www.google.com​. Seu

browser irá precisar saber onde encontrar esse site, ou seja o endereço IP em que essa
página se encontra (a porta padrão é a 80). Para isso ele irá fazer um DNS (Domain Name
Server) Lookup, onde o browser irá checar se possui o endereço, senão irá fazer uma
chamada para o Sistema Operacional para checar se este possui o endereço. Caso o
endereço não esteja cacheado, ele irá checar com seu provedor de internet se este possui o
endereço cacheado, que caso não tenha, este irá checar com outros servidores DNS.
Uma vez obtido o endereço IP do site o browser usa esse endereço e porta para
estabelecer uma conexão TCP com o servidor que está servindo o site. Com a conexão
estabelecida o browser envia um request HTTP (Hyper Text Transfer Protocol) para obter a
página ​www.google.com​.
Normalmente existe um servidor que escutando HTTP do outro lado (os mais comuns são
Apache e Nginx). Esse servidor irá checar se o cliente tem acesso a rota com esse método,
se sim irá enviar a resposta para o cliente (JSON, HTML, XML), nesse caso um arquivo
HTML.
Falando um pouco do documento HTML, este é um documento documento escrito em
Hyper Text Markup Language (HTML) que é uma linguagem de marcação criada em 1993
pela W3C e W ​ HATWG​. É com o HTML que se define a estrutura de um site através de tags
pré definidas como <div>, <span>, <input>, etc. Além do HTML se utiliza Cascading Style
Sheet (CSS) para dar estilo ao site, isso quer dizer cores, espaçamentos, e bordas, etc.
Existem várias técnicas para se dar estilo ao HTML, desde colocar o estilo dentro de cada
elemento (inline css) como também dar classes aos elementos e então definir propriedades
relacionadas a essa classe em uma parte separada dentro do próprio HTML ou em outro
documento separado que será posteriormente importado ao se renderizar a página.
Um último elemento muito importante além do HTML e CSS é o Javascript que permite
adicionar dinamicidade ao site. Javascript(JS) é uma linguagem imperativa, funcional
orientada a eventos que está em constante evolução, e com ela podemos por exemplo
mudar a estrutura de um página dado um evento de click de um usuário.

O browser ao receber o arquivo HTML ele irá fazer outras chamadas HTTP para os outros
assets, sejam arquivos CSS e JS externos, imagens, entre outros. Após isso ele irá parsear
os arquivos HTML, CSS e JS.
Quando o browser faz o parsing do HTML ele constrói uma árvore de markup HTML e com
isso ele constrói o Document Object Model (DOM) que é a representação do documento
HTML para elementos externos como o Javascript.
Da mesma forma o CSS também é parseado para um Stylesheet Object, em que cada
objeto contém regras CSS com seletores correspondentes a gramática CSS.
Após a fase de parsing, o browser faz a renderização passando pelos nós do DOM e
calculando o estilo CSS para cada nó, esse processo é chamado de painting.
Toda vez que alguma mudança acontece seja mudando o estilo ou posição de um
componente acontecerá um repaint daquele elemento e de seus descendentes (dependo do
tipo de mudança), já acionar um novo elemento no DOM irá gerar um novo processo de
layout e repaint desse nó. Mudanças maiores, podem gerar um relayout e repaint da página
inteira.

A maioria dos browsers funciona com uma única thread tanto para executar o código
javascript da página como para e evento de layout e paint. Essa thread é chamada de Event
Loop, ela fica rodando infinitamente executando esperando e executando esses eventos. Já
operações de I/O, setTimeout, são feitas através de outras threads webAPIs.

Sites dinâmicos usam Javascript e bibliotecas escritas na mesma: JQuery, React, Angular,
etc, para ir mudando dinamicamente o conteúdo de uma página. Normalmente páginas
webs que não sejam estáticas fazem requests para servidores externos usando Ajax, Fetch
ou alguma outra biblioteca que permita a página fazer HTTP requests (como explicado
acima) e quando este obtiver a resposta ele pode ter uma callback para alterar o conteúdo
da página com o resultado do request. Além disso é possível mandar dados para o servidor
gravar, por exemplo através de um POST, ou fazer um update através de um PUT, embora
POST também possa ser usado para fazer updates.