SetComponents a veces es muy lento
Esto te muestra cómo encontrar problemas con las interpretaciones https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
Lee la respuesta completa abajo ↓Pregunta
Hola a todos, Estamos trabajando en una aplicación de boletín y usamos grapesjs como editor de correo con el preajuste del boletín PLGUIN y algunos cambios personalizados. Almacenamos los HTML en nuestra base de datos y he notado que algunas plantillas tardan mucho en cargar con el método editor.setComponents.
Intenté cargar las plantillas en la página de demostración a través de la importación y, aunque carga casi al instante, noté un problema peculiar en la página de demostración del boletín (https://grapesjs.com/demo-newsletter-editor.html). Si se selecciona un componente antes de importar una plantilla HTML, tarda mucho más en cargar (de 0,5 segundos a 5 segundos).
Al insertar algunos troncos he deducido que el método de 'set' de la columna vertebral se llama mucho más. La mayoría de los modelos 'añadidos' se duplican, pero también hay muchos modelos 'change:style'. Pero estoy un poco perdido sobre qué es necesario y qué no :S Quizá averiguar por qué setComponents se vuelve mucho más lento si se selecciona un componente podría ayudarme a entender por qué también es lento en nuestro proyecto.
También he notado que esto empieza a ocurrir después de la versión 0.14.40. Cualquier ayuda será muy apreciada.
Respuestas (3)
Esto te muestra cómo encontrar problemas con las interpretaciones https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
Hola @iggolob ¿puedes dar un ejemplo de plantilla y pasos exactos para reproducir el problema (hablando de que es más lento cuando seleccionas un componente)?
Hola @artf La página de demostración del boletín de noticias puede usarse para reproducir el número (https://grapesjs.com/demo-newsletter-editor.html ). Como plantilla puedes usar el conjunto HTML predefinido para la página de demostración. Solo tienes que copiar el HTML desde la opción de Exportar plantilla. Ahora, si importas esa plantilla, debería hacerse casi de inmediato. Pero si seleccionas cualquier componente, da igual si es imagen, texto, celda o tabla, e intentas importarlo, tarda bastante tiempo, como unos segundos. Espero que esta información sea suficiente, también puedo intentar hacer un vídeo mostrando los pasos.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1516
CKEDITOR 5 [Mejora]
Hola @artf, Como se describe en la siguiente tarea, hice una compilación del ckeditor 5 que funciona con GrapesJS, aunque algunas funcional...
Issue #2211
[PREGUNTAS] Cómo establecer el estilo para pseudo elementos (:after y :before)
Hola, Añado STATE en el gestor de estilos :before y :after pero todos los estilos se aplican al componente.
Issue #2972
HAZAÑA: Desactivar los scripts en el lienzo
Hola, antes que nada, gracias por una herramienta tan estupenda. En mi proyecto me encontré con el problema de que tengo que desactivar los...
Issue #3654
[PREGUNTAS] editor.setComponents(html) y pageManager.select(pageId) no cargan los scripts js
Hola, @artf Como he leído, allowScripts:1 permite a grapesjs cargar scripts . Cuando cargo una página de aterrizaje por primera vez funcion...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.