Planteamiento y contexto
Esta pregunta de frontend evalúa el estado de interacción en listas largas, los límites de red y la accesibilidad. El desafío no es conectar un observador a un centinela; es definir un contrato completo para la carga, cancelación, fallo, reintento, restauración de posición y navegación alternativa.
Qué evalúa el entrevistador
- Si puede activar la carga con Intersection Observer o un mecanismo equivalente y ajustar la distancia de precarga (prefetch).
- Si el estado del cursor, la deduplicación de solicitudes y el ordenamiento evitan páginas duplicadas, páginas desordenadas y reintentos infinitos.
- Si los usuarios de teclado, lectores de pantalla, zoom y conexiones lentas obtienen estados visibles y operables.
- Si reconoce cuándo el scroll infinito necesita paginación, una ruta para saltar al contenido o restauración de posición.
Preguntas de clarificación que debe hacer
Confirme si la lista es un timeline, un resultado de búsqueda o una cuadrícula; si el ordenamiento es estable; si el servidor puede emitir cursores; y el tamaño de página junto con el objetivo de primer contenido. Pregunte sobre enlaces profundos (deep links), restauración de navegación hacia atrás, alturas de contenido cambiantes y restricciones de datos móviles.
Marco de respuesta de 30 segundos
Utilizaría una paginación por cursor estable y un centinela de carga removible. Cargaría solo cuando no haya ninguna solicitud activa, exista otro cursor y el centinela entre en una ventana de precarga; deduplicaría por cursor e id de elemento manteniendo el orden. Los estados de carga, fallo, reintento y fin de lista son enfocables y visibles. También ofrecería una ruta clara de paginación o “Cargar más”, salto al contenido y restauración de posición para que el scroll no sea el único método de navegación.
Análisis detallado paso a paso
1. Definir el contrato de datos y posición
Prefiera un cursor que no se desplace con nuevos registros. Devuelva el siguiente cursor e ids de elementos estables. Mantenga los cursores conocidos, los ids vistos y el estado de las solicitudes en el cliente para que los números de página no dupliquen ni omitan elementos tras una inserción. Al salir de la navegación, registre la ruta, el cursor y el desplazamiento del ancla; restaure el elemento visible cuando los datos estén listos.
2. Diseñar el disparador y el control de concurrencia
Intersection Observer emite una señal de “cerca del final”; no autoriza una obtención ilimitada. Antes de cargar, verifique hasNext, loading, el presupuesto de reintentos y el estado de la red. Permita una solicitud por cursor. Ajuste el umbral de precarga usando la altura de los elementos y la latencia, y mantenga un botón explícito para el desplazamiento rápido de modo que las devoluciones de llamada repetidas del observador no puedan generar una ráfaga.
3. Manejar respuestas, cancelación y fallos
Valide que una respuesta pertenezca al cursor esperado. Descarte o fusione las respuestas tardías en el conjunto conocido en lugar de anexarlas a ciegas. Salir de la página puede cancelar una solicitud activa sin borrar los datos renderizados. Un estado de fallo explica el problema, expone un botón de reintento y muestra el recuento de elementos cargados. Los reintentos automáticos utilizan un retroceso exponencial acotado para evitar una tormenta de solicitudes durante una caída del servicio.
4. Proporcionar rutas alternativas accesibles
El centinela no debe ser el único control. Proporcione un “Cargar más” enfocable, anuncios explícitos de carga y fin de lista, marcado semántico de lista, encabezados estables y foco visible. Las listas largas pueden exponer paginación, una ruta para omitir duplicados y un enlace de “Volver al inicio de la lista”. El movimiento del foco necesita una regla; insertar nodos no debe enviar a los usuarios de teclado al final.
5. Verificar rendimiento, usabilidad y recuperación
Pruebe cargar varias páginas únicamente con Tab y Enter y verifique que un lector de pantalla perciba el contenido nuevo y los fallos. Ponga a prueba una red lenta, el modo sin conexión, el scroll rápido, la activación repetida, la navegación hacia atrás/adelante, el zoom al 200% y las alturas de imagen dinámicas. Mida el recuento de solicitudes, la tasa de duplicados, la latencia de la primera página y por página, la cancelación y el éxito de la restauración. Si se necesita virtualización, verifique que preserve la semántica y el foco.
Respuesta de ejemplo sólida
Basaría la lista en un cursor estable e ids de elementos, con estado en el cliente para el cursor consumido, ids vistos, solicitud activa y recuento de reintentos. El centinela emite una señal de carga dentro de una ventana de precarga; la respuesta debe coincidir con el cursor actual, y los elementos duplicados o fuera de orden se eliminan. El fallo expone un control de reintento enfocable mientras que el modo sin conexión mantiene el contenido cargado. Junto con el scroll infinito, proporciono “Cargar más”, paginación o un control de salto para que los usuarios de teclado y lectores de pantalla no dependan de una rueda de desplazamiento. La navegación hacia atrás restaura un ancla de elemento. Valido redes lentas y sin conexión, scroll rápido, zoom, atrás/adelante y un lector de pantalla.
Errores comunes
- Anexar números de página sin considerar duplicados u omisiones tras inserciones.
- Iniciar una solicitud en cada devolución de llamada del observador sin deduplicación de cursor o un bloqueo en vuelo.
- Reintentar indefinidamente, o renderizar el reintento como texto que no puede recibir foco.
- Hacer que el scroll sea la única navegación, sin carga por teclado, paginación ni ruta de retorno.
- Mover el foco al final cuando llegan nuevos nodos, perdiendo la posición del lector.
- Probar solo en una conexión de escritorio rápida e ignorar el modo sin conexión, el zoom, la altura dinámica y la restauración.
Preguntas de seguimiento y respuestas
¿Por qué no usar paginación por número de página?
Cuando se insertan o eliminan registros, los límites de las páginas se mueven. Un ordenamiento estable junto con un cursor reduce los duplicados y las omisiones. Si una instantánea (snapshot) es aceptable, un token de instantánea puede definir un límite de navegación.
¿Cómo se ajusta un centinela que se activa demasiado pronto?
Ajuste el root margin a partir de la altura promedio de los elementos, la velocidad de scroll, la latencia de red y la tasa de cancelación, y hágalo observable. La precarga se mantiene acotada por hasNext, el bloqueo de concurrencia y el presupuesto de reintentos.
¿Cómo se preserva la posición cuando llegan nuevos elementos arriba?
Registre un elemento de anclaje y su desplazamiento relativo, inserte los nuevos nodos y compense el desplazamiento del scroll. Para los usuarios de lectores de pantalla y teclado, exponga un control de “Nuevos elementos” para que elijan cuándo saltar.
¿Cuándo debería el diseño convertirse en paginado?
Use paginación cuando los enlaces profundos, los saltos exactos de página, la comparación de resultados, las listas muy largas o las secciones claras de lectura sean importantes. La carga progresiva puede mantenerse, pero debe existir una ruta visible de paginación o “Cargar más”.