编辑器加载时间很长（有时超过1分钟）
感谢@MisterKeyboard提供JSON。 你的项目包含了10K风格的规则，数量不少，但我不认为负载会受到太大影响。 @mohamedsalem401我认为我们需要确认数据源相关的更改（例如“StyleableModel.set”）是否对数据🤔源影响过大
阅读下方完整回答 ↓问题
GrapesJS版本
- 我确认使用最新版本的GrapesJS
你用的是什么浏览器？
Firefox
可复制演示链接
https://grapesjs.com/demo.html
描述一下那个虫子
描述 编辑器加载时间非常慢。
在复杂的页面（例如包含众多元素和插件如旋转木马的首页），完全加载可能需要长达1分20秒。
但即使是只有少量元素的页面，加载速度仍然明显很慢（几秒钟）。
这种性能问题使编辑器在制作中使用变得困难。
繁衍步骤
-
打开 GrapesJS 编辑器，创建一个包含多个组件和插件（例如轮播）的页面。
-
等待编辑器加载。
-
也可以用只有几个块的简单页面进行测试。
预期结果
编辑器应在几秒钟内加载，无论页面复杂度如何。
实际结果
对于复杂的页面，加载时间长达1分20秒。
用简单的页面：依然缓慢，不即时。
环境
GrapesJS 版本：0.22.7
后端：Symfony 7.3
前端：Angular 19
浏览器：[例如 Chrome 127，最新版 Firefox]
操作系统：[MacOS / Windows / Linux]
行为准则
- 我同意遵守本项目的行为准则
回答（4）
感谢@MisterKeyboard提供JSON。
你的项目包含了10K风格的规则，数量不少，但我不认为负载会受到太大影响。 @mohamedsalem401我认为我们需要确认数据源相关的更改（例如“StyleableModel.set”）是否对数据🤔源影响过大
@artf会看看并更新情况。
@MisterKeyboard你能分享项目的JSON吗？这样我们可以验证
谢谢你举报，@MisterKeyboard。 编辑器加载时间很长（有时超过1分钟）的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告中包含 GrapesJS 版本、浏览器和控制台错误
相关问答
通过相似的问题讨论继续研究。
问题 #5003
Chrome上的拖拽非常慢
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬111 可复制演示链接 https://jsfiddle.net/9zf4kd6e/——这是设计师模式的演示 描述一下那个虫子 如何复现这个漏洞？添加一个带有“dragMode”的绝对图像组件上...
问题 #4837
HTML元素的ID会在projectData加载的不同页面上递增
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox 109 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好， 我注意到当我在 projectData 中加载多个 HTML 中使用...
问题 #6271
在最新的Firefox上，组件拖放功能无法使用
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Linux和Mac上的Firefox 131.0（64位） 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞？开始拖动“悬停我”按钮尽量把它放...
问题 #5378
未捕获类型错误：在图层管理器面板拖动组件时无法读取未定义属性（读取“Canvas”）。
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v116.0.5845.97 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？从画布中选择任意组件打开图层管理器面板...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Claude Skill for GrapesJS: How AI Is Changing the Way We Build Visual Editors
We've released the Claude Skill for GrapesJS Development — a free, open-source skill that turns Claude into a developer who actually knows GrapesJS
教程
How We Built Composeit in Record Time Using GrapesJS Shadcn
Bypass foundational builder boilerplate and focus on what truly matters.
教程
Introducing GJS.Market Services: ship your GrapesJS editor without the integration risk
It's everything that usually eats weeks of engineering time, scoped and priced up front. No open-ended hourly surprises.
浏览插件分类
直接跳转到市场上的插件分类页面。