最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • draftJs与基于ContentEditable的富文本编辑器的比较

    正文概述 掘金(玉石俱焚)   2020-11-27   1152

    对于draft与contentEditable的实验测试:

    1,复制测试:

    • 当一次复制超过1W行时出现延迟卡顿
    • 6万行是卡顿效果明显
    • 12万行时 几乎接近崩溃延!延时严重浏览器无法进行其他操作

    2,内容测试

    • 当行数超过6万行时

    进行编辑操作时操性能问题暴漏明显 影响操作(鼠标点击移动光标都能感觉到明显的卡顿)

    性能截图:

    一次性复制6万行性能对比:

    draft-js :

    draftJs与基于ContentEditable的富文本编辑器的比较

    可以看出从按下粘贴(4000ms时标)开始 一直到(16000ms时标)复制内容渲染出来结束 上方出现红条(长帧标记)导致页面卡死达12秒 这12秒的时间 约一半时间进行js运算 一半时间进行渲染。
    结果:

    • 时长: 12秒

    • 渲染之后无法进行其他操作(卡顿明显)

    基于contentEditable 实现

    性能截图: draftJs与基于ContentEditable的富文本编辑器的比较 draftJs与基于ContentEditable的富文本编辑器的比较

    从复制开始到呈现内容一共时常约为3秒其中以为是浏览器提供的原生api没有呈现过多js运算的时间几乎所有的时间都在渲染上,渲染结果之后编辑器内仍然是可以正常操作的 ,虽然略微有卡顿现象但是不影响用户操作仍然可以正常使用。

    结果:

    • 时长:3秒
    • 渲染之后无明显卡顿 (用户仍可正常操作)

    draftJs与基于ContentEditable的富文本编辑器的比较
    这是在已经复制6万行的基础上进行操作 可以看出大部分的时间都发生在渲染和回流导致后续js不至于被阻塞

    两种对比:
    | —— | draftJs | 基于ContentEitable |
    | -------- | -----: | :----: |
    | 呈现时长 | 12s | 3s | | 页面卡顿情况 | 严重卡顿 | 略微卡顿 |
    | 费时主要原因 | js运算+渲染 | 渲染 |
    | 实现 | 基于model模型进行渲染| 浏览器原生提供|

    为什么一次性复制大量的内容会有一半的时间进行js计算呢?

    这就要从draftJs的渲染机制说起:
    Draft.js 至上而下可以分为 Editor,EditorContents,EditorBlock,EditorLeaf 这四层,大致关系下图: draftJs与基于ContentEditable的富文本编辑器的比较

    结构对应关系:

    draftJs与基于ContentEditable的富文本编辑器的比较

    draftJs与基于ContentEditable的富文本编辑器的比较

    例如:当我想将“blod blodAndItatlieAndStrikeThrough”这句话部分加上删除标记时 当鼠标点击编辑器的时候,你就需要拦截事件然后查看是单点还是拖拽 ,然后计算offset,然后将重写的那几个数据结构的type重新写入到contentState指定位置就可以了。 也就是说移动光标你需要进行计算光标选中内容,光标坐落位置之类的,从而增加了js的计算量。

    draft拦截和重写了所有事件,如,复制粘贴,文本改变等事件。 所以一次性复制大量的内容造成延迟时间严重,页面卡死就是因为这个原因。他需要先将所有的内容进行分析,然后分析哪些内容对应哪些type,之后生成对应的数据结构,(有点类似于虚拟dom)然后生成对应dom内容。放入到结构中。对于6万行的大量计算js运算生成对应的model结构是需要一定的时间的 然后渲染和回流也需要时间 这就是一次性复制大量内容性能大幅度落后与contentEitable的原因之一因为contentEitable调用原生api 主要时间在渲染和回流上js几乎没有消耗过多时间。

    draft 缺点

    1,性能和体验,根源在于它基于底层的设计和富文本的描述schema
    2,无法在同一行放置两个图片 
    3,性能差  内容越长性能越差 immutable能提升,但本身也是有大量运算,在大量突然的编辑下,复制粘贴各种操作,仍然明显可断。因为不是基于contenteditable的实现,因为contentditable是浏览器原生实现的不管你多长都感觉不到性能问题,文章过长可能出现闪烁问题
    4,在两个block之间不好处理光标
    

    draft 特点

    1,架构新颖脱离了常用的contenteditable 方案,直接按照react模式去做,通过拦截光标鼠标等操作 更新immutable的state 最后render  通过immutable 提升渲染性能
    2,可以在富文本编辑器里面渲染任意的react 组件并进行交互
    3,基于React可以直接用在react 项目
    4,有插件机制可以自我实现一下插件放到编辑器上
    

    结论:

    不适用于有大量文本内容需求的编辑器开发

    个人观点:

    如果想做出可以呈现大量内容的编辑器还要保证页面的流畅程度,更好的做法是使用底层通过contentEitable的实现,这样更加接近原生可以使页面更加流畅。如果对于内容需求不是过大的话那么draft完全可以胜任,因为他具有很好的可拓展性和灵活性,具有插件机制,可以使用网上一些比较成熟的draft-plugin进行快捷开发,还有就是他是基于react进行实现的更加符合团队人员的开发习惯,容易集成到我们现有的项目中。
    

    起源地下载网 » draftJs与基于ContentEditable的富文本编辑器的比较

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元