3.0架构

要设计一个易于使用、高效的低代码平台设计器，我们需要综合考虑技术选型、渲染方案、交互体验等多个方面的因素

浏览器渲染的方式

在开始进行渲染方式的选择之前，我们先来了解下在浏览器中渲染视图的常见方案：

• HTML DOM
  • 便携性，学习成本低，上手简单容易
  • 不过在内存开销、渲染速度等方面并不是很占优势，是其薄弱环节;
• Canvas
  • 灵活性高、性能出色、跨平台渲染等特点
  • Canvas 的上手成本很高，需要了解 JavaScript Canvas 相关画布 api
  • 不支持 SEO 等等缺陷
  • 开发门槛相对高
• WebGL
  • 用于在 Web 浏览器中呈现复杂的 3D 图像和动画。可以实现高性能的 3D 图形渲染和复杂场景绘制
  • 同时支持硬件加速，调用 GPU 资源来渲染图形，极大的提高了渲染速度
  • 对基础设备有一定的要求，对低端设备不太友好
  • 另外上手困难，不仅仅需要具备前端开发知识，同时也需要了解图形学、数学相关的一些理念和知识;
• SVG
  • SVG 在浏览器图形高保真上有自己独有的优势
  • 保证相关设计的还原度，拥有更好的呈现效果的同时，也拥有比同位图文件更小的体积
  • 相对折中，但没有明显优势

小结

因此在编辑器渲染技术选型中，需要根据具体的应用场景和需求来选择使用哪种技术：

需要高性能的图形和动画效果，不需要 SEO，可以选择 Canvas; 需要更好的可维护性和易用性，可以选择 DOM。