Estratégias de padrões de design em performance de frontend em Performance de Frontend

"Atuando como um especialista em Performance de Frontend com foco em Padrões de Design, gere um guia prático e detalhado para desenvolvedores. O guia deve abordar como a implementação estratégica de 'Lazy Loading' e 'Virtual Scrolling' pode otimizar a percepção de performance e a experiência do usuário em aplicações web com grandes volumes de dados (listas infinitas, feeds de notícias, dashboards complexos). Inclua:

1.  **Explicação dos conceitos:** Definições claras de Lazy Loading (para imagens, vídeos, componentes) e Virtual Scrolling (para listas).
2.  **Benefícios tangíveis:** Como cada padrão impacta métricas Core Web Vitals (LCP, FID, CLS) e a sensação de fluidez.
3.  **Casos de uso ideais e contraindicações:** Cenários onde cada padrão é mais eficaz e situações onde pode ser prejudicial.
4.  **Exemplos de implementação (pseudocódigo ou conceitos de frameworks populares como React/Angular/Vue):**
    *   Lazy Loading: Demonstre a aplicação com `Intersection Observer` para imagens e um exemplo de carregamento de componentes/módulos sob demanda.
    *   Virtual Scrolling: Ilustre a lógica de renderização apenas dos itens visíveis com base na posição do scroll.
5.  **Desafios e Soluções:** Problemas comuns (ex: SEO com Lazy Loading, cálculos de altura em Virtual Scrolling) e estratégias para mitigá-los.
6.  **Ferramentas e Bibliotecas:** Mencione bibliotecas populares ou APIs nativas que facilitam a implementação.
7.  **Melhores Práticas:** Dicas para garantir uma implementação performática e acessível (ex: placeholders, fallback content).

O tom deve ser técnico, mas acessível, com foco em resultados práticos e exemplos aplicáveis."