AULA 17 MÓDULO 1 fundamentos web ⏱ 50 min

Como a Web Funciona

O que acontece entre digitar google.com e ver a página. DNS, TCP, TLS, HTTP. Browser vs Servidor. CDN e cache.

DNSTCPTLSHTTPbrowserservidorCDN

Da URL ao HTML: o caminho completo

Quando você digita google.com e pressiona Enter, acontecem mais de 10 etapas técnicas em milissegundos antes do browser renderizar a página. Entender esse caminho é entender a base de toda a web.

1
DNS Lookup
Browser pergunta ao DNS: qual o IP de google.com? Resposta: 142.250.x.x
2
TCP Handshake
Browser abre conexão com o servidor: SYN → SYN-ACK → ACK
3
TLS Handshake
Negociam criptografia para HTTPS. Troca de certificados.
4
HTTP Request
Browser envia GET / HTTP/1.1 com headers
5
Server processa
Servidor recebe, processa (banco, lógica), gera resposta
6
HTTP Response
Servidor devolve 200 OK + headers + HTML
7
Browser render
Parser lê HTML, baixa CSS/JS, renderiza na tela

Browser vs Servidor

O browser e o servidor têm papéis opostos e complementares. Entender a fronteira entre eles é essencial para qualquer desenvolvedor web.

🌐 Browser (Cliente)
Renderiza HTML/CSS
Executa JavaScript
Gerencia cookies e storage
Faz requisições HTTP
Tem acesso à câmera, GPS...
⚙️ Servidor
Recebe e processa requisições
Acessa banco de dados
Autentica usuários
Protege dados sensíveis
Orquestra serviços externos

DNS, CDN e Cache

Para acelerar esse processo, a web usa camadas de cache em cada passo — browser cache, CDN, cache de DNS. Na prática, a maioria das requisições nunca chega ao servidor de origem.

CDN — Content Delivery Network
Uma CDN replica seus arquivos estáticos (HTML, CSS, JS, imagens) em dezenas de servidores pelo mundo. Quando um usuário acessa, o arquivo vem do servidor mais próximo geograficamente. Cloudflare, Fastly, AWS CloudFront.
javascript
// Simular o caminho de uma requisição no Node.js
const dns  = require('dns')
const http = require('http')

// 1. Resolver DNS
dns.resolve4('example.com', (err, addresses) => {
  console.log('IP:', addresses[0])

  // 2. Fazer requisição HTTP
  const req = http.get('http://example.com', (res) => {
    console.log('Status:', res.statusCode)
    console.log('Headers:', res.headers)

    let body = ''
    res.on('data', chunk => body += chunk)
    res.on('end', () => {
      console.log('Tamanho da resposta:', body.length, 'bytes')
    })
  })
})
quiz · aula 17
Teste seus conhecimentos
0/3 respondidas
QUESTÃO 01
Qual é o papel do DNS no carregamento de uma página web?
QUESTÃO 02
Qual é a vantagem principal de uma CDN?
QUESTÃO 03
O que acontece no TCP Handshake?
0/3