Rendimiento

Elige el componente de colección adecuado

• Utiliza Data View para una colección pequeña con una plantilla de elemento personalizada. Utiliza Virtual List para una colección larga dentro de un área de desplazamiento acotada.
• Mantén estables los identificadores al ordenar, filtrar o cargar más datos. El identificador describe el elemento; no debe cambiar solo porque cambie su posición.

Data View · Virtual List

Ejemplo: una lista virtual con búsqueda

Coloca esta pantalla dentro del tema raíz y del proveedor de área segura existentes. Los datos se crean una vez y computed deriva la colección filtrada cuando cambia la búsqueda. Al seleccionar un elemento se conserva su identificador original.

import { Component, computed, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuVirtualListComponent } from '@neural-ui/native/virtual-list';
import type { NeuOption } from '@neural-ui/native/foundation';

@Component({
  selector: 'app-contact-list',
  imports: [Text, View, NeuInputComponent, NeuVirtualListComponent],
  template: `
    <view class="content">
      <neu-input label="Search contacts" [(value)]="query" />
      <neu-virtual-list
        [items]="filtered()"
        [height]="360"
        [estimatedItemHeight]="84"
        (selected)="selected.set($event)"
      />
      <text>Selected: {{ selected() }}</text>
    </view>
  `,
  styles: `.content { padding: 16px; gap: 12px; }`,
})
export class ContactListComponent {
  readonly query = signal('');
  readonly selected = signal('');
  readonly items: readonly NeuOption[] = Array.from({ length: 500 }, (_, index) => ({
    id: 'contact-' + index,
    label: 'Contact ' + (index + 1),
    description: 'Product team',
  }));
  readonly filtered = computed(() => {
    const query = this.query().trim().toLowerCase();
    return query ? this.items.filter(item => item.label.toLowerCase().includes(query)) : this.items;
  });
}

height acota el área de desplazamiento. estimatedItemHeight es una estimación para la lista virtual, no una altura fija de fila: ajústala al contenido y a la tipografía que renderizas. Comprueba también el texto ampliado. Los 500 elementos generados ilustran el patrón; no son una medición de rendimiento.

Evita imágenes sobredimensionadas

• Proporciona recursos de imagen adecuados a su tamaño de presentación. Una miniatura pequeña de galería no debería necesitar el original a resolución completa.
• Limita los datos de la colección a identificadores, etiquetas y URI de imagen. Evita duplicar grandes contenidos base64 en cada elemento o recrear toda la colección durante cada edición.
• Prueba una carga lenta de imágenes y la mayor colección realista. Comprueba que el contenido permanece dentro de la pantalla al aparecer las imágenes.

Gallery · Image Viewer

Concentra las actualizaciones de estado

Importa los componentes desde sus puntos de entrada públicos. Crea los datos fuera de la plantilla y deriva los valores filtrados u ordenados con computed, como en el ejemplo. Limita cada plantilla al contenido visible y prepara fuera de las filas los datos que requieren trabajo costoso.

Al investigar una interacción lenta, distingue la preparación de datos, la carga de imágenes y los cambios de layout. Cambiar un color o la duración de una animación no resuelve esos tres costes.

Comprueba las transiciones y el movimiento reducido

El tema expone el token duration para las transiciones de los componentes. Mantén una duración que preserve la respuesta de la interfaz y comprueba la preferencia de movimiento reducido del sistema. Abre y cierra menús o diálogos varias veces y sal de la pantalla durante una animación.

Configura el tema · Accesibilidad

Una comprobación reproducible de tu aplicación

1. Utiliza el mismo dispositivo, compilación y datos en cada comparación. Evalúa la experiencia final con una compilación de distribución.
2. Comprueba la primera carga, desplaza una lista larga, fíltrala y abre un overlay. Incluye imágenes lentas y texto ampliado.
3. Identifica qué acción es lenta y compara un cambio cada vez. Conserva una reproducción pequeña con el componente y datos realistas.
4. Repite la comprobación en la otra plataforma y en un dispositivo representativo de menor potencia. Los tests unitarios y los marcos del navegador no miden los fotogramas nativos por segundo.

Entornos de aplicación · Pruebas de interacción