Pular para o conteúdo principal

Questão de Engenharia de Software — Desenvolvimento de Software — FCC 2026

Engenharia de SoftwareDesenvolvimento de Software
Código
fc077580
Banca
FCC
Órgão
SEFAZ-SP
Ano
2026
Nível
Superior
Cargo
Auditor Fiscal da Receita Estadual - AFRE - Tecnologia da Informação e Comunicação - Conhecimentos Especificos (P3)
Uma Secretaria Fazendária de um estado esta desenvolvendo um novo painel web para que empresas consultem a situação de seus débitos tributários. Durante os testes, auditores notam que, ao carregar a pagina, a tabela que exibe os tributos aparece inicialmente desformatada, exibindo valores sobrepostos e colunas desalinhadas, mas após 1 segundo a aparência se corrige automaticamente. O desenvolvedor explica que esta havendo Flash Of Unstyled Content (FOUC). Para corrigir o problema, garantindo que a tabela sempre apareça formatada desde o inicio, a solução mais adequada é
  1. Aincluir o CSS critico diretamente no <head> da página usando <style>, garantindo que a formatação essencial seja aplicada antes do carregamento completo dos demais estilos.
  2. Bmover todo o CSS para um arquivo carregado via @import dentro de um arquivo CSS principal, para reduzir o tempo de renderização inicial.
  3. Cusar JavaScript para ocultar a tabela até que o evento window.onload seja disparado, exibindo-a somente quando todos os recursos forem carregados.
  4. Dtransformar toda a tabela em elementos ou comdisplay: table, pois esses elementos renderizam mais rápido que tabelas tradicionais.
  5. Edefinir a propriedade visibility: hidden no <body> e torna-lo visível apenas após o carregamento de todas as regras de estilo, incluindo da tabela.
Revelar gabarito e comentário

GabaritoA — incluir o CSS critico diretamente no <head> da página usando <style>, garantindo que a formatação essencial seja aplicada antes do carregamento completo dos demais estilos.

Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.

Otimização de Carregamento CSS – FOUC

Gabarito: letra A. O Flash of Unstyled Content (FOUC) ocorre quando o navegador renderiza o conteúdo antes de aplicar completamente as regras de estilo, causando uma aparência desformatada temporária. A solução mais eficaz e recomendada para evitar esse problema é incorporar o CSS crítico diretamente no <head> da página usando a tag <style>, garantindo que a formatação essencial seja aplicada imediatamente, sem depender do carregamento de arquivos externos. Essa técnica é conhecida como critical CSS e é amplamente adotada em boas práticas de performance web.

  1. 1Identificar CSS crítico
  2. 2Inserir no <head> via <style>
  3. 3Carregar CSS externo após
  4. 4Renderização imediata formatada
LEVEL · soulevel.com.br

Alternativa A — ✅ Correta ⟵ GABARITO

Incluir o CSS crítico diretamente no <head> com <style> faz com que o navegador tenha as regras de estilo mais importantes disponíveis desde o início da renderização. Isso elimina o FOUC porque a formatação essencial (como a estrutura da tabela) é aplicada antes mesmo de o restante do CSS externo ser carregado. É uma abordagem simples, eficiente e não depende de JavaScript ou de atrasos na exibição.

Alternativa B — ❌ Incorreta

Mover todo o CSS para um arquivo carregado via @import dentro de um arquivo CSS principal não reduz o tempo de renderização inicial; na verdade, @import é bloqueante e pode atrasar ainda mais a aplicação dos estilos, agravando o FOUC. O correto é usar <link> no <head> ou o CSS crítico inline.

Alternativa C — ❌ Incorreta

Usar JavaScript para ocultar a tabela até o evento window.onload e então exibi-la é uma solução possível, mas não é a mais adequada porque:

  • Atrasa a exibição do conteúdo até que todos os recursos (imagens, scripts, etc.) sejam carregados, degradando a percepção de velocidade.

  • Pode causar um flash de conteúdo invisível ou uma transição brusca.

  • Depende de JavaScript, o que pode falhar em navegadores com JS desabilitado.

Alternativa D — ❌ Incorreta

Transformar a tabela em elementos com display: table ou similares não resolve o FOUC. O problema não está na semântica HTML, mas sim na falta de CSS aplicado no momento da renderização. A formatação ainda dependerá do carregamento das regras de estilo.

Alternativa E — ❌ Incorreta

Definir visibility: hidden no <body> e torná-lo visível após carregar todos os estilos é uma abordagem semelhante à alternativa C, com os mesmos problemas: atraso na exibição e dependência de JavaScript. Além disso, não é uma prática recomendada por questões de usabilidade e acessibilidade.

Gabarito: letra A.

Link permanente: /questoes/fc077580