Prompt completo
"Considerando a complexidade e a variedade de dispositivos e redes, e a crescente expectativa dos usuários por interfaces rápidas, gere um guia detalhado sobre como arquitetar um sistema de componentes de interface (Design System) otimizado para performance de frontend. O guia deve abordar os seguintes pontos, com exemplos práticos e justificativas técnicas para cada um: 1. **Estratégias de Carregamento:** Explique como padrões como 'Lazy Loading' (para imagens, vídeos, componentes fora da viewport inicial), 'Preloading' (para recursos críticos) e 'Prefetching' (para navegações futuras prováveis) podem ser integrados nativamente na concepção dos componentes. Inclua a diferenciação entre eles e cenários ideais de aplicação dentro de um Design System. 2. **Otimização de Renderização:** Discuta como o padrão 'Virtualization' (para listas longas) e 'Throttling/Debouncing' (para eventos de UI intensivos como redimensionamento ou scroll) podem ser encapsulados e oferecidos como funcionalidades padrão dentro dos componentes do sistema, garantindo que o desenvolvedor não precise implementá-los manualmente a cada uso. Apresente exemplos de APIs de componentes que abstraiam essa complexidade. 3. **Gerenciamento de Estado e Re-renderização:** Aborde como o Design System pode promover padrões que minimizem re-renderizações desnecessárias, como o uso de 'Memoization' em componentes React ou mecanismos equivalentes em outras frameworks. Detalhe como a estrutura do Design System pode incentivar a passagem de propriedades otimizadas e a segregação de estado. 4. **Otimização de CSS e Assets:** Explique como o Design System pode padronizar o uso de 'CSS-in-JS' ou metodologias CSS como BEM/Atomic CSS de forma a garantir que apenas o CSS necessário para os componentes visíveis seja carregado. Inclua a discussão sobre otimização de imagens (WebP/AVIF, srcset) e ícones (SVGs otimizados, sprites) como parte da arquitetura dos componentes. 5. **Testes de Performance Automatizados:** Descreva como o Design System pode incorporar e promover a automação de testes de performance (ex: Lighthouse, WebPageTest) para cada componente individualmente e para fluxos de componentes combinados, garantindo
Tags relacionadas
Performance de Frontend
Padrões de design em Performance de Frontend
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de Performance de Frontend
ChatGPT
Melhores práticas de padrões de design em performance de frontend para Performance de Frontend
Prompt gerado automaticamente para Padrões de design em Performance de Frontend em Performance de Frontend
2 usos
ChatGPT
Guia para troubleshooting em performance de frontend em Performance de Frontend
Prompt gerado automaticamente para Troubleshooting em Performance de Frontend em Performance de Frontend
4 usos
ChatGPT
Melhores práticas de ferramentas para performance de frontend para Performance de Frontend
Prompt gerado automaticamente para Ferramentas para Performance de Frontend em Performance de Frontend
2 usos