← Volver al catálogo Use when optimizing or reviewing large lists, virtual scrolling, windowing, react-window, TanStack Virtual, variable-height rows, dynamic measurement, infinite scroll, grid virtualization, or scroll performance; Chinese triggers include 虚拟列表, 大列表优化, 滚动性能.
Ver en GitHub ↗ Copiar URL del repo Copiar enlace del SKILL.md Licencia: MIT Cómo agregar Copiar comando /plugin marketplace add bovinphang/frontend-craft El comando exacto puede variar según el repositorio. Consulta el README en GitHub.
Para el autor de la skill
Muestra que tu skill está catalogada en Skillteca, genera backlink y tráfico rastreable.
Markdown HTML
[](https://www.skillteca.com.br/skills/fec-list-virtualization?utm_source=badge&utm_medium=readme&utm_campaign=badge) Copiar snippet Kit de herramientas para interactuar y probar aplicaciones web locales usando Playwright. Permite verificar la funcionalidad del frontend, depurar el comportamiento de la UI, capturar capturas de pantalla del navegador y ver los registros del navegador.
Design e Frontend #test por anthropics
Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que se beneficie de su identidad visual. Úselo cuando se apliquen pautas de estilo, formato visual o estándares de diseño de la empresa.
Design e Frontend por anthropics
Crea interfaces frontend distintivas y de grado de producción con alta calidad de diseño, generando código creativo y pulido y diseño de UI que evita la estética genérica de IA. Úsela para construir componentes web, páginas y aplicaciones, o para estilizar/embellecer UIs web.
Design e Frontend #css #ai por anthropics
Suite de herramientas para crear artefactos HTML elaborados y multicomponente para claude.ai, utilizando tecnologías web frontend modernas (React, Tailwind CSS, shadcn/ui). Úselo para artefactos complejos que requieran gestión de estado, enrutamiento o componentes shadcn/ui, no para artefactos HTML/JSX simples de un solo archivo.
Design e Frontend #css #ai por anthropics
Alerta por categoría
Un email corto con solo las skills nuevas de Design e Frontend. 4 minutos de lectura, sin spam, te das de baja con un clic.
Confirmas tu email en el primer envío. Sin spam. Te das de baja con un clic.
列表虚拟化优化
Purpose
通过窗口化只渲染可视区域,解决大列表 DOM 过多和滚动卡顿。
Procedure
先确认列表规模和瓶颈:500+ 项、滚动掉帧、DOM 节点过多或内存飙升才引入虚拟化。
固定高度列表用 react-window;动态高度、跨框架或高级场景用 TanStack Virtual;遗留项目可维护 react-virtualized。
明确 item size、overscan、容器高度、key、滚动容器和 resize 行为。
无限滚动时分离数据分页和 DOM 虚拟化;数据获取可联用数据获取 workflow。
验证 DOM 节点数、滚动 FPS、键盘/屏幕阅读器体验和 Ctrl+F/SEO 限制。
Detailed References
涉及固定高度列表、可变/动态高度、无限滚动、网格虚拟化和性能注意事项时,加载 references/virtualization-patterns.md 。
Constraints
SEO 关键内容不要只存在于虚拟项中。
浏览器原生 Ctrl+F 无法搜索未挂载项目。
Row 根元素必须透传虚拟库提供的 style/measure ref。
overscan 过大会浪费内存,过小会白屏。
动态高度测量要处理 ResizeObserver 和布局抖动。
Expected Output
10000+ 项列表滚动接近 60fps,DOM 节点数稳定在可视区域及缓冲区范围,内存从 O(n) 降至 O(visible)。
Leer descripción completa↓
Comentarios · Sin comentarios Aún no hay comentarios. Sé el primero.