Cliente web e desempenho

HTML, CSS e JavaScript

HTML fornece estrutura e significado; CSS define apresentação; JavaScript responde a eventos e altera DOM. Usa controlos nativos e textContent para inserir texto.

Cascata considera origem, importância, especificidade e ordem, entre outras regras. box-sizing: border-box inclui padding e border na largura declarada, sem incluir margin. Em tabelas, th é cabeçalho de célula, td dados e caption identifica a tabela.

Âmbito e modo estrito

• var tem âmbito da função, conhecida antes da inicialização como undefined.
• let e const têm âmbito de bloco e não podem ser usadas antes da inicialização.
• const impede reatribuir a ligação, sem congelar o objeto.
• Atribuir a um nome não declarado falha em modo estrito. Módulos já são estritos; scripts clássicos antigos podem criar globais implícitas.

"use strict";
function exemplo() {
if (true) { var a = 2; let b = 5; }
console.log(a, typeof b);
const valores = [1];
valores.push(2);
console.log(valores.join(','));
}
exemplo();

Saída: 2 undefined e 1,2. Ler b diretamente fora do bloco daria ReferenceError; aqui typeof recebe um nome sem ligação.

Pedidos assíncronos

AJAX atualiza partes da página sem navegação completa; pode receber JSON, HTML ou outro formato. Escolhe json() ou text() pelo contrato. fetch não rejeita automaticamente 404 ou 500: verifica ok ou status antes de ler o corpo. Rede e análise do corpo têm falhas próprias.

Representa carregamento, sucesso, vazio e falha. A resposta de uma pesquisa antiga pode chegar depois da atual: usa AbortController ou identificador crescente e só aplica a resposta atual. Debounce sozinho não garante isso.

Disponibilidade apresentada pode mudar antes da compra; autorização e transação continuam no servidor.

Medição e intervenção

Num modelo sequencial: aplicação 20 ms + SQL 80 ms + rede 50 ms + apresentação 30 ms = 180 ms. Reduzir SQL para 20 ms dá 120 ms, ganho total de 1,5 vezes, apesar de SQL melhorar quatro vezes.

Latência mede demora por operação; throughput mede operações por unidade de tempo. Concorrência pode saturar um recurso e aumentar latência. Mede primeiro byte, transferência, apresentação e interação, com carga e ambiente definidos.

No nearest-rank, ordena n medidas e usa posição ceil(0,95 × n) para p95. Dez de 50 ms, nove de 100 ms e uma de 500 ms dão média 95 ms, p95 100 ms e máximo 500 ms.

Evita alternar leituras e escritas de geometria que forçam layout síncrono. Lazy loading do conteúdo principal pode atrasá-lo; cache pública de dados privados pode expô-los.

Percentis e diagnóstico.