Revisão de Performance de Frontend Fluig
Esta skill revisa a performance de código frontend Fluig e emite achados por severidade; ela não duplica convenções — o arquivo de context/ é a fonte de verdade, referenciada abaixo. A skill não reescreve o código.
Objetivo
Revisar, com responsabilidade única, a performance de código frontend Fluig — DOM, eventos, requisições e carga de dados — identificando gargalos e produzindo um relatório de achados classificados por severidade, cada um vinculado à regra correspondente do arquivo de contexto. Para aplicar as correções, use a skill fluig-optimize-performance.
Quando Usar
- Antes de um merge, para uma revisão focada em performance de um widget ou Custom Element.
- Quando há sintomas de lentidão, travamento, reflow/repaint excessivo ou muitas requisições.
- Quando o código tem muitos listeners ou eventos de alta frequência (scroll, resize, input) sem controle.
- Para diagnosticar gargalos sem ainda alterar o código.
Entradas Esperadas
| Entrada |
Descrição |
Obrigatória |
| Código alvo |
Trecho ou arquivo frontend a revisar (widget ou Custom Element) |
sim |
| Sintoma observado |
O que foi notado (ex.: lentidão ao renderizar lista, travamento no scroll, muitas chamadas REST) |
não |
| Contexto do artefato |
Tipo do artefato e onde o gargalo aparece |
não |
Contexto de Referência (Fonte de Verdade)
Leia antes de executar — não reproduza o conteúdo aqui:
- conventions.md — manipulação de DOM, ES6+ e
async/await, REST a endpoints internos via WCMAPI/FLUIGC.ajax, bindings de widget e carga de dados sob demanda.
Regras Aplicáveis (Resumo Executivo)
Somente o mínimo para orientar a revisão; o detalhe está no contexto. Cada achado deve citar a regra de origem.
- Agrupar alterações de DOM (ex.:
DocumentFragment) em vez de inserir item a item em laço → ver conventions.md.
- Minimizar reflow/repaint: não intercalar leitura e escrita de layout dentro de laços.
- Cachear seletores: evitar reconsultar o DOM repetidamente.
- Event delegation: um listener no container em vez de muitos listeners individuais → ver
conventions.md.
- Debounce/throttle em eventos de alta frequência (scroll, resize, input/keyup).
- Carregar dados sob demanda (paginação/lazy load); tratar assíncrono com
async/await em try/catch → ver conventions.md.
- REST a endpoints internos via
WCMAPI/FLUIGC.ajax (nunca fetch/$.ajax direto); evitar requisições redundantes → ver conventions.md.
- Liberar recursos: remover listeners/timers ao destruir o widget (evitar vazamentos).
Escala de Severidade
Classifique cada achado em um destes níveis:
| Severidade |
Critério |
Exemplos típicos |
| Crítico |
Gargalo que trava a UI ou degrada gravemente sob uso normal |
Reflow em laço sobre listas grandes; loop síncrono bloqueando a thread; vazamento de listeners acumulando a cada render |
| Alto |
Custo significativo de renderização ou rede com impacto perceptível |
Muitas requisições redundantes; carregar todo o conjunto de dados de uma vez sem paginação |
| Médio |
Ineficiência que afeta escala/manutenção sem trava imediata |
Seletores repetidos não cacheados; evento de alta frequência sem debounce/throttle |
| Baixo |
Otimização menor de baixo impacto |
Microajuste em concatenação; oportunidade pontual de delegação de evento |
Procedimento
- Identificar o tipo de artefato e, a partir do sintoma, os pontos suspeitos no código.
- Percorrer os eixos de performance: DOM em laço, reflow/repaint, seletores repetidos, listeners/eventos de alta frequência, requisições redundantes, carga de dados, liberação de recursos.
- Para cada gargalo, registrar um achado com localização, descrição, severidade e a regra de contexto correspondente (
conventions.md, com a seção).
- Recomendar a correção objetiva, apontando a skill
fluig-optimize-performance para aplicação.
- Consolidar os achados ordenados do mais grave ao menos grave.
- Validar a revisão com o checklist abaixo antes de entregar.
Saída Esperada
Um relatório de revisão de performance contendo:
- Resumo com a contagem de achados por severidade e a avaliação geral.
- Achados agrupados por severidade (crítico → baixo); cada um com localização, descrição, severidade e a regra de contexto referenciada.
- Recomendações acionáveis por achado, indicando a skill
fluig-optimize-performance para aplicar a correção.
A skill não altera o código — apenas diagnostica e recomenda.
Exemplo de Uso
Trecho revisado e achado correspondente.
// Código revisado (trecho)
items.forEach((item) => {
list.insertAdjacentHTML('beforeend', `<li>${item.name}</li>`); // insere no DOM dentro do laço
});
## Achados
### 🔴 Crítico
- **DOM em laço — linhas 1-3:** inserção no DOM a cada iteração causa reflow repetido em listas grandes.
- Regra: `conventions.md` › CSS/DOM e manipulação eficiente.
- Recomendação: montar os nós em um `DocumentFragment` e inserir uma única vez. Ver skill `fluig-optimize-performance`.
Checklist de Validação
1---2name: fluig-review-performance3description: Revisa a performance de código frontend Fluig (manipulação de DOM, eventos de alta frequência, requisições REST e carga de dados) e produz achados classificados por severidade, cada um referenciando a regra correspondente do arquivo de contexto. Use quando o desenvolvedor pedir uma revisão focada em performance de um widget/Custom Element antes de merge, sem reescrever o código.4---56# Revisão de Performance de Frontend Fluig78Esta skill revisa a performance de código frontend Fluig e emite achados por severidade; ela **não duplica** convenções — o arquivo de `context/` é a fonte de verdade, referenciada abaixo. A skill **não reescreve** o código.910## Objetivo1112Revisar, com responsabilidade única, a **performance de código frontend Fluig** — DOM, eventos, requisições e carga de dados — identificando gargalos e produzindo um **relatório de achados classificados por severidade**, cada um vinculado à regra correspondente do arquivo de contexto. Para aplicar as correções, use a skill `fluig-optimize-performance`.1314## Quando Usar1516- Antes de um merge, para uma revisão focada em performance de um widget ou Custom Element.17- Quando há sintomas de lentidão, travamento, reflow/repaint excessivo ou muitas requisições.18- Quando o código tem muitos listeners ou eventos de alta frequência (scroll, resize, input) sem controle.19- Para diagnosticar gargalos sem ainda alterar o código.2021## Entradas Esperadas2223| Entrada | Descrição | Obrigatória |24|---------|-----------|-------------|25| Código alvo | Trecho ou arquivo frontend a revisar (widget ou Custom Element) | sim |26| Sintoma observado | O que foi notado (ex.: lentidão ao renderizar lista, travamento no scroll, muitas chamadas REST) | não |27| Contexto do artefato | Tipo do artefato e onde o gargalo aparece | não |2829## Contexto de Referência (Fonte de Verdade)3031Leia antes de executar — não reproduza o conteúdo aqui:3233- [conventions.md](../../context/conventions.md) — manipulação de DOM, ES6+ e `async/await`, REST a endpoints internos via `WCMAPI`/`FLUIGC.ajax`, bindings de widget e carga de dados sob demanda.3435## Regras Aplicáveis (Resumo Executivo)3637Somente o mínimo para orientar a revisão; o detalhe está no contexto. Cada achado deve citar a regra de origem.3839- **Agrupar alterações de DOM** (ex.: `DocumentFragment`) em vez de inserir item a item em laço → ver `conventions.md`.40- **Minimizar reflow/repaint:** não intercalar leitura e escrita de layout dentro de laços.41- **Cachear seletores:** evitar reconsultar o DOM repetidamente.42- **Event delegation:** um listener no container em vez de muitos listeners individuais → ver `conventions.md`.43- **Debounce/throttle** em eventos de alta frequência (scroll, resize, input/keyup).44- **Carregar dados sob demanda** (paginação/lazy load); tratar assíncrono com `async/await` em `try/catch` → ver `conventions.md`.45- **REST a endpoints internos** via `WCMAPI`/`FLUIGC.ajax` (nunca `fetch`/`$.ajax` direto); evitar requisições redundantes → ver `conventions.md`.46- **Liberar recursos:** remover listeners/timers ao destruir o widget (evitar vazamentos).4748## Escala de Severidade4950Classifique **cada achado** em um destes níveis:5152| Severidade | Critério | Exemplos típicos |53|------------|----------|------------------|54| **Crítico** | Gargalo que trava a UI ou degrada gravemente sob uso normal | Reflow em laço sobre listas grandes; loop síncrono bloqueando a thread; vazamento de listeners acumulando a cada render |55| **Alto** | Custo significativo de renderização ou rede com impacto perceptível | Muitas requisições redundantes; carregar todo o conjunto de dados de uma vez sem paginação |56| **Médio** | Ineficiência que afeta escala/manutenção sem trava imediata | Seletores repetidos não cacheados; evento de alta frequência sem debounce/throttle |57| **Baixo** | Otimização menor de baixo impacto | Microajuste em concatenação; oportunidade pontual de delegação de evento |5859## Procedimento60611. Identificar o tipo de artefato e, a partir do sintoma, os pontos suspeitos no código.622. Percorrer os eixos de performance: DOM em laço, reflow/repaint, seletores repetidos, listeners/eventos de alta frequência, requisições redundantes, carga de dados, liberação de recursos.633. Para cada gargalo, registrar um achado com localização, descrição, **severidade** e a **regra de contexto** correspondente (`conventions.md`, com a seção).644. Recomendar a correção objetiva, apontando a skill `fluig-optimize-performance` para aplicação.655. Consolidar os achados ordenados do mais grave ao menos grave.666. Validar a revisão com o checklist abaixo antes de entregar.6768## Saída Esperada6970Um **relatório de revisão de performance** contendo:7172- **Resumo** com a contagem de achados por severidade e a avaliação geral.73- **Achados** agrupados por severidade (crítico → baixo); cada um com localização, descrição, severidade e a **regra de contexto referenciada**.74- **Recomendações** acionáveis por achado, indicando a skill `fluig-optimize-performance` para aplicar a correção.7576A skill **não altera** o código — apenas diagnostica e recomenda.7778## Exemplo de Uso7980Trecho revisado e achado correspondente.8182```javascript83// Código revisado (trecho)84items.forEach((item) => {85 list.insertAdjacentHTML('beforeend', `<li>${item.name}</li>`); // insere no DOM dentro do laço86});87```8889```markdown90## Achados9192### 🔴 Crítico93- **DOM em laço — linhas 1-3:** inserção no DOM a cada iteração causa reflow repetido em listas grandes.94 - Regra: `conventions.md` › CSS/DOM e manipulação eficiente.95 - Recomendação: montar os nós em um `DocumentFragment` e inserir uma única vez. Ver skill `fluig-optimize-performance`.96```9798## Checklist de Validação99100- [ ] Os eixos de performance foram percorridos (DOM, reflow, seletores, eventos, rede, carga de dados, recursos).101- [ ] Cada achado tem **severidade** atribuída conforme a escala (crítico/alto/médio/baixo).102- [ ] Cada achado **referencia a regra** do `conventions.md` (com a seção).103- [ ] O relatório está ordenado do mais grave ao menos grave.104- [ ] As recomendações são acionáveis e apontam a skill `fluig-optimize-performance`.105- [ ] A revisão não alterou o código — apenas diagnosticou e recomendou.
totvs