Questão de Tecnologia da Informação · FGV TCE-PA 2024 (nº 90)

Para fazer um site se adaptar a diferentes tamanhos de tela de forma eficiente, especialmente em celulares, é melhor não ficar checando o tempo todo o tamanho da janela, mas sim reagir apenas quando certas condições de tela são atingidas.

(A) Incorreta: O evento `DOMContentLoaded` acontece uma única vez quando o HTML da página é carregado. Ele não monitora mudanças no tamanho da janela.
(B) Incorreta: O evento `window.addEventListener('load')` também ocorre uma única vez, quando toda a página (incluindo imagens e outros recursos) é carregada. Não serve para monitorar mudanças.
(C) Correta: O `window.matchMedia` permite que você defina uma "Media Query" (como as do CSS, por exemplo, "se a largura for menor que 768px") e adicione um "listener" (observador) que só é ativado quando essa condição muda (por exemplo, a tela passa de maior para menor que 768px). Isso é muito eficiente porque o navegador otimiza a verificação da Media Query, e seu código JavaScript só roda quando realmente há uma mudança relevante, economizando processamento, crucial para dispositivos móveis.
(D) Incorreta: `window.resize` não é um método padrão para adicionar um listener. Se a intenção era `window.onresize`, ainda assim seria ineficiente, pois dispara continuamente.
(E) Incorreta: Esta é a armadilha. Embora `window.addEventListener('resize')` monitore mudanças no tamanho da janela, ele dispara muitas e muitas vezes enquanto o usuário está redimensionando a janela (arrastando a borda, por exemplo). Em dispositivos móveis, onde o processamento é limitado, executar código repetidamente de forma tão frequente pode causar lentidão e travamentos. Para evitar isso, seria necessário "debounce" ou "throttle" o evento, mas `matchMedia` é uma solução mais intrinsecamente eficiente para o problema específico de reagir a breakpoints de tela.