编辑器加载时间很长（有时超过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吗？这样我们可以验证
GrapesJS加载速度缓慢，尤其是复杂页面，是丰富网页编辑器中常见的挑战。这源于解析、渲染并使可编辑的庞大复杂HTML结构所需的大量处理。虽然GrapesJS高度优化，但DOM元素、CSS规则和JavaScript交互的庞大量可能导致明显延迟。浏览器的渲染引擎和内容本身的复杂性使这个问题更加严重。 以下是根本原因及改善GrapesJS载重性能的具体解决方案： 加载缓慢的根本原因 广泛的DOM解析和组件实例化： GrapesJS将你的HTML转换为其内部组件模型。对于拥有数千个DOM节点的页面，这一过程涉及大量的解析、对象创建和树状遍历，这对CPU来说非常耗费CPU。 CSS 处理与应用：...
相关问答
通过相似的问题讨论继续研究。
问题 #5003
Slow absolute drag on Chrome
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬111 可复制演示链接 https://jsfiddle.net/9zf4kd6e/——这是设计师模式的演示 描述一下那个虫子 如何复现这个漏洞？添加一个绝对 dragMode 的图像...
问题 #4837
HTML元素的ID会在projectData加载的不同页面上递增
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Firefox 109 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好， 我注意到当我在 projectData 中加载多个 HTML...
问题 #5378
未捕获类型错误：在图层管理器面板拖动组件时无法读取未定义属性（读取“Canvas”）。
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v116.0.5845.97 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？从画布中选择任意组件打开图层...
问题 #6683
模态在模态外的鼠标上行事件中关闭，而不是全键点击
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 143.0.7499.169 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ 将自定义代码组件拖入页面。...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
浏览插件分类
直接跳转到市场上的插件分类页面。