Perguntas da entrevista do desenvolvedor front-end 2026: HTML, CSS, desempenho

⏱️5 min read · 1,013 words

As perguntas da entrevista do desenvolvedor front-end em 2026 cobrem semântica HTML, layout CSS, desempenho JavaScript, padrões React, acessibilidade e otimização de desempenho web. Este guia aborda as perguntas mais frequentes para funções de desenvolvedor de front-end e UI.

Perguntas sobre HTML/CSS

1. Qual é a diferença entre elementos inline, block e inline-block?

<!-- Block elements: take full width, start on new line -->
<!-- Examples: div, p, h1-h6, ul, ol, li, section, article -->
<p>This paragraph takes full width</p>

<!-- Inline elements: only take needed width, don't break flow -->
<!-- Examples: span, a, strong, em, img, button -->
<p>Click <a href="#">this link</a> here</p>

<!-- Inline-block: inline positioning but block-like box model -->
<span style="display:inline-block; width:100px; height:40px">
  Has dimensions like a block but flows inline
</span>

2. Explique a especificidade do CSS e a cascata

/* Specificity (higher wins): */
/* [inline styles], [IDs], [classes/attrs/pseudo-classes], [elements/pseudo-elements] */

/* 0,0,0,1 — element selector */
p { color: black; }

/* 0,0,1,0 — class selector */
.paragraph { color: blue; }

/* 0,0,1,1 — class + element */
p.paragraph { color: green; }

/* 0,1,0,0 — ID selector */
#main { color: red; }

/* 1,0,0,0 — inline style */
/* <p style="color: purple"> */

/* !important overrides everything (avoid!) */
p { color: orange !important; }

/* Same specificity: LAST declaration wins (cascade) */
.btn { color: blue; }
.btn { color: red; }  /* red wins — defined later */

3. Como o dimensionamento da caixa afeta o layout?

/* content-box (default): width = content only */
/* Total width = width + padding + border */
.element {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* Actual width: 244px (200 + 40 + 4) */
}

/* border-box: width INCLUDES padding and border */
.element {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* Actual width: 200px (as specified) */
}

/* Best practice: apply globally */
*, *::before, *::after {
  box-sizing: border-box;  /* almost every project should do this */
}

Perguntas sobre desempenho de JavaScript

4. O que causa problemas de layout e como evitá-los?

// Layout thrashing: alternating reads and writes to the DOM
// Each read after a write forces browser to recalculate layout

// BAD: reads and writes interleaved
for (const element of elements) {
  const height = element.offsetHeight;  // READ — forces layout
  element.style.height = height * 2 + 'px';  // WRITE
  // Next iteration reads cause recalculation! 60x per 60fps frame = jank
}

// GOOD: batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight);  // all reads
elements.forEach((el, i) => {
  el.style.height = heights[i] * 2 + 'px';  // all writes
});

// Even better: avoid layout properties in animation
// Use transform instead of top/left/width/height
element.style.transform = 'translateX(100px)';  // compositor only, no layout

// requestAnimationFrame for animations
function animate() {
  // All reads and writes here are batched by browser
  requestAnimationFrame(animate);
}

5. Explique a otimização crítica do caminho de renderização

<!-- Block rendering: CSS in <head> (sync), render-blocking JS -->
<head>
  <!-- CSS blocks rendering — must be in head, must be small/inlined for critical CSS -->
  <link rel="stylesheet" href="critical.css" />
  <!-- Non-critical CSS: load async -->
  <link rel="preload" href="non-critical.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
</head>

<!-- Defer/async JS to not block HTML parsing -->
<script defer src="app.js"></script>    <!-- executes after HTML parsed -->
<script async src="analytics.js"></script>  <!-- executes ASAP, non-blocking -->

<!-- Preload important resources -->
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://api.example.com">

<!-- Priority hints for images -->
<img src="hero.jpg" fetchpriority="high" loading="eager" />  <!-- LCP image -->
<img src="below-fold.jpg" loading="lazy" />                   <!-- others -->

6. Qual é a diferença entre localStorage, sessionStorage e cookies?

Recurso	armazenamento local	sessãoArmazenamento	Biscoitos
Persistência	Até ser limpo manualmente	Até a guia fechar	Até expirar/limpar
Tamanho de armazenamento	5-10 MB	5MB	4 KB
Enviado para o servidor	No	No	Sim, com cada solicitação
Acesso	Somente JS do lado do cliente	Somente JS do lado do cliente	Cliente + servidor
Usar para	Tema, preferências	Dados da sessão temporária	Tokens de autenticação (apenas HTTP!)

7. O que são Core Web Vitals e como você os otimiza?

LCP (Maior pintura com conteúdo)<2,5s: Otimize a imagem principal (pré-carregamento, WebP, dimensionamento adequado)
INP (Interação com a próxima pintura)<200ms: Minimize JS no thread principal, use a API do agendador
CLS (mudança cumulativa de layout)<0.1: Defina largura/altura explícita nas imagens, evite injeção de conteúdo dinâmico acima da dobra

<!-- LCP optimization: preload hero image -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="Hero">

<!-- CLS fix: always set image dimensions -->
<img src="photo.jpg" width="400" height="300" alt="Photo">
<!-- Or use aspect-ratio CSS -->
.image-container {
  aspect-ratio: 4 / 3;
}

8. O que é divisão de código e por que isso é importante?

// Without code splitting: one huge bundle = slow initial load

// With dynamic imports (Webpack/Vite auto-split):
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />  // only loaded when rendered!
    </Suspense>
  );
}

// Route-based splitting in Next.js (automatic)
// Each page is automatically split into its own chunk
// Only the current page's code loads

As entrevistas de front-end testam a amplitude (HTML, CSS, JS, desempenho, acessibilidade) e profundidade do React. Conheça bem a especificidade do CSS e as propriedades de layout, explique claramente o loop de eventos, demonstre conhecimento de otimização de desempenho (CRP, Core Web Vitals, divisão de código) e mostre consciência de acessibilidade. Construa projetos reais que demonstrem essas habilidades – o conhecimento teórico por si só não lhe dará o emprego.

🔗 Share this article

X / Twitter Facebook WhatsApp LinkedIn Telegram