尧图网页设计 
GrapesJS 导入大段 HTML 时如何跳过解析与组件识别以提升性能【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs当你需要把一大段 HTML 一次性放进 GrapesJS 画布例如还原一个已有的页面结构或让 Block 携带一个大区块时editor.addComponents(htmlString)会先解析这段 HTML再对每个解析出的节点做组件识别这两步就是大内容导入的主要开销。Components 模块文档给出了明确建议If youre importing big string chunks of HTML code you might want to improve the performances by skipping the parsing and the component recognition steps by passing directly Component Definition objects or using the JSX syntax.本文按官方文档把跳过这两条步骤的方式逐一说明包括各自的适用边界和验证方法。适用版本为 GrapesJS v0.15.8 及以上即 Components 模块文档开头声明的版本要求。为什么传 HTML 字符串会慢文档把“把一段 HTML 字符串加进编辑器”的过程描述为三步解析HTML 字符串被解析并转换为Component Definition一种类似虚拟 DOM 的轻量结构tagName、attributes、components、type等属性。组件识别Component Recognition编辑器对每个解析出的元素遍历Component Type Stack从栈顶到栈底栈顶是最后添加的自定义类型栈底是default逐个调用各类型的isComponent方法直到某个方法返回 truthy 才停止。创建实例Definition 就绪且type确定后才创建 Component 实例Model。也就是说字符串里的节点越多、你注册过多少自定义类型isComponent就被调用得越多。文档同时明确了isComponent的执行条件isComponentis executed only if the parsing is required (eg. by adding components as HTML string or initializing the editor withfromElement). In case the type is already defined, there is no need for theisComponentto be executed.只要能让type在不遍历 Type Stack 的情况下确定识别步骤就会被跳过。文档给出了三种官方方式下面按推荐程度说明。先判断 isComponent 是否真的被跳过了文档中有一段直接的对照代码说明哪些写法会执行isComponent、哪些不会// isComponent will be executed on some-element editor.addComponents(some-element.../some-element); // isComponent WONT be executed on OBJECTS // If the object has no type key, the default one will be used editor.addComponents({ type: some-component, }); // isComponent WONT be executed as were forcing the type editor.addComponents(some-element>{ tagName: div, components: [ { type: image, attributes: { src: https://path/image }, }, { tagName: span, type: text, attributes: { title: foo }, components: [{ type: textnode, content: Hello world!!! }] } ] }使用时addComponents返回添加的组件数组取第一个元素即可继续操作const component editor.addComponents({ tagName: div, components: [/* ... */], })[0];几个注意点对象上没有type键的节点会回落到default类型想保留 image/text 等内置类型的行为就要在每个节点上显式写type。Block 的content同样支持这种写法。Getting Started 中给出了content: { type: image }的例子Blocks 模块文档 称之为 component-oriented 方式可以避免 HTML 字符串走解析。Blocks 文档还支持混合写法content传一个数组把组件对象和 HTML 字符串混在一起。代价方面文档自己的原话是传 Component Definition 会跳过重步骤但 the code is less readable。大结构用对象写会比较啰嗦如果希望保持 HTML 语法可读性用方式三。方式二在 HTML 里用>{ // ... content: div classel-X div>editor.addComponents( div custom-component>grapesjs.init({ // ... domComponents: { processor: (obj) { if (obj.$$typeof) { // eg. this is a React Element const compDef { type: obj.type, components: obj.props.children, ... }; ... return compDef; } } } })从零支持 JSX文档说需要先实现把 JSX 转成可执行 JS 的解析。对 Babel 用户添加babel/plugin-syntax-jsx和babel-plugin-transform-react插件更新.babelrc{ plugins: [ babel/plugin-syntax-jsx, babel/plugin-transform-react-jsx ] }pragma 函数可以自定义[babel/plugin-transform-react-jsx, { pragma: customCreateEl }]。默认使用React.createElement文档提示需要文件内有一个可用的 React 实例才能工作。验证导入结果导入完成后可以用文档给出的 API 确认组件是否正确落地const component editor.addComponents( /* 对象 / JSX / HTML任选上述方式之一 */ )[0]; // 检查 type 是否按预期赋值 const componentType component.get(type); // eg. image // 检查最终 HTML 是否与预期一致 const componentHTML component.toHTML(); // 查看 JSON 结构 JSON.stringify(component);结合前面的console.log(el)调试手段用对象或 JSX 方式添加大段内容后如果isComponent没有任何输出且get(type)、toHTML()的结果符合预期说明解析与识别确实被跳过、且组件数据完整。限制与边界Components 模块文档声明适用于 GrapesJS v0.15.8 及以上版本。对象形式中缺少type键的节点会使用default类型不会获得具体内置类型如 image、text的行为导入已有结构时要为每个节点保留原来的type。data-gjs-type只跳过isComponent遍历不跳过解析目标是同时省掉两步时用对象形式或 JSX。JSX 方式要求构建链能解析 JSXReact 环境默认即可其他框架需要配置processor否则需要先引入 Babel 插件——文档明确说明 “If you need to support JSX from scratch (you dont use a framework which supports JSX) you have, at first, implement the parser which transforms JSX in your files in something JS-readable”。【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 GrapesJS 导入大段 HTML 时如何跳过解析与组件识别以提升性能？
GrapesJS 导入大段 HTML 时如何跳过解析与组件识别以提升性能【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs当你需要把一大段 HTML 一次性放进 GrapesJS 画布例如还原一个已有的页面结构或让 Block 携带一个大区块时editor.addComponents(htmlString)会先解析这段 HTML再对每个解析出的节点做组件识别这两步就是大内容导入的主要开销。Components 模块文档给出了明确建议If youre importing big string chunks of HTML code you might want to improve the performances by skipping the parsing and the component recognition steps by passing directly Component Definition objects or using the JSX syntax.本文按官方文档把跳过这两条步骤的方式逐一说明包括各自的适用边界和验证方法。适用版本为 GrapesJS v0.15.8 及以上即 Components 模块文档开头声明的版本要求。为什么传 HTML 字符串会慢文档把“把一段 HTML 字符串加进编辑器”的过程描述为三步解析HTML 字符串被解析并转换为Component Definition一种类似虚拟 DOM 的轻量结构tagName、attributes、components、type等属性。组件识别Component Recognition编辑器对每个解析出的元素遍历Component Type Stack从栈顶到栈底栈顶是最后添加的自定义类型栈底是default逐个调用各类型的isComponent方法直到某个方法返回 truthy 才停止。创建实例Definition 就绪且type确定后才创建 Component 实例Model。也就是说字符串里的节点越多、你注册过多少自定义类型isComponent就被调用得越多。文档同时明确了isComponent的执行条件isComponentis executed only if the parsing is required (eg. by adding components as HTML string or initializing the editor withfromElement). In case the type is already defined, there is no need for theisComponentto be executed.只要能让type在不遍历 Type Stack 的情况下确定识别步骤就会被跳过。文档给出了三种官方方式下面按推荐程度说明。先判断 isComponent 是否真的被跳过了文档中有一段直接的对照代码说明哪些写法会执行isComponent、哪些不会// isComponent will be executed on some-element editor.addComponents(some-element.../some-element); // isComponent WONT be executed on OBJECTS // If the object has no type key, the default one will be used editor.addComponents({ type: some-component, }); // isComponent WONT be executed as were forcing the type editor.addComponents(some-element>{ tagName: div, components: [ { type: image, attributes: { src: https://path/image }, }, { tagName: span, type: text, attributes: { title: foo }, components: [{ type: textnode, content: Hello world!!! }] } ] }使用时addComponents返回添加的组件数组取第一个元素即可继续操作const component editor.addComponents({ tagName: div, components: [/* ... */], })[0];几个注意点对象上没有type键的节点会回落到default类型想保留 image/text 等内置类型的行为就要在每个节点上显式写type。Block 的content同样支持这种写法。Getting Started 中给出了content: { type: image }的例子Blocks 模块文档 称之为 component-oriented 方式可以避免 HTML 字符串走解析。Blocks 文档还支持混合写法content传一个数组把组件对象和 HTML 字符串混在一起。代价方面文档自己的原话是传 Component Definition 会跳过重步骤但 the code is less readable。大结构用对象写会比较啰嗦如果希望保持 HTML 语法可读性用方式三。方式二在 HTML 里用>{ // ... content: div classel-X div>editor.addComponents( div custom-component>grapesjs.init({ // ... domComponents: { processor: (obj) { if (obj.$$typeof) { // eg. this is a React Element const compDef { type: obj.type, components: obj.props.children, ... }; ... return compDef; } } } })从零支持 JSX文档说需要先实现把 JSX 转成可执行 JS 的解析。对 Babel 用户添加babel/plugin-syntax-jsx和babel-plugin-transform-react插件更新.babelrc{ plugins: [ babel/plugin-syntax-jsx, babel/plugin-transform-react-jsx ] }pragma 函数可以自定义[babel/plugin-transform-react-jsx, { pragma: customCreateEl }]。默认使用React.createElement文档提示需要文件内有一个可用的 React 实例才能工作。验证导入结果导入完成后可以用文档给出的 API 确认组件是否正确落地const component editor.addComponents( /* 对象 / JSX / HTML任选上述方式之一 */ )[0]; // 检查 type 是否按预期赋值 const componentType component.get(type); // eg. image // 检查最终 HTML 是否与预期一致 const componentHTML component.toHTML(); // 查看 JSON 结构 JSON.stringify(component);结合前面的console.log(el)调试手段用对象或 JSX 方式添加大段内容后如果isComponent没有任何输出且get(type)、toHTML()的结果符合预期说明解析与识别确实被跳过、且组件数据完整。限制与边界Components 模块文档声明适用于 GrapesJS v0.15.8 及以上版本。对象形式中缺少type键的节点会使用default类型不会获得具体内置类型如 image、text的行为导入已有结构时要为每个节点保留原来的type。data-gjs-type只跳过isComponent遍历不跳过解析目标是同时省掉两步时用对象形式或 JSX。JSX 方式要求构建链能解析 JSXReact 环境默认即可其他框架需要配置processor否则需要先引入 Babel 插件——文档明确说明 “If you need to support JSX from scratch (you dont use a framework which supports JSX) you have, at first, implement the parser which transforms JSX in your files in something JS-readable”。【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考