EditorX是什么？

DevUI内部使用富文本插件，目标是成为最好用的富文本工具。

在业务使用过程中遇到了什么问题？

EditorX上线Wiki自用环境之后，出现了内容加载的性能问题。当Wiki词条的字数在1万6时，加载时间大约3s，在内容加载出来之前，编辑器是白屏，无法与页面进行交互；然后3s之后内容全部加载出来，可与页面进行后续的交互。这样的体验是很糟糕的，是无法接受的。

我们是如何进行优化的

造成性能问题的主要原因是一次性加载数据量太大，导致页面长时间白屏。

一期优化

本次优化主要解决白屏和无法交互两个体验问题，解决的思路是分段加载（或者叫时间分片）

优化方案

EditorX是通过Delta数据来表示编辑器内容的，Delta可以简单认为是一个对象数组，内容多Delta数据就大。EditorX内部会通过遍历该Delta数组，将格式化的内容一个一个插入到DOM中。上面那个包含1万6字符的Wiki词条，Delta行总数大约为2400。分段加载的第一步就是将这个大的Delta数据按一定的策略，拆分成多个组；然后把每个组放到setTimeout里一个一个分段进行加载。由于分成了多次加载，每次只加载一小段，因此可以解决白屏的问题；又因为setTimeout会释放JS执行的线程，交给DOM渲染引擎，此时可以响应用户交互，所以能解决无法交互的问题。

[
  { "attributes": { "header": { "value": 1 } }, "insert": "标题1" },
  { "insert": "正文1" },
  { "insert": "正文2" },
  { "attributes": { "header": { "value": 1 } }, "insert": "标题2" },
  { "insert": "正文3" },
  { "attributes": { "header": { "value": 1 } }, "insert": "标题3" },
  { "insert": "正文4" },
  { "insert": "正文5" },
  { "insert": "正文6" }
] 

达成效果

• 不管多大的Wiki数据，进入编辑页面几乎立马就可以看到内容，不会出现白屏现象。
• Wiki内容分段加载过程中，用户可以与页面其余部分进行交互。

二期优化

后来有一种场景的出现，让我们发现之前的分组策略并不可靠。当页面中没有H1，然后内容又非常多时，我们之前的分组策略会失效，白屏和JS阻塞问题又继续出现。我们需要考虑另一种更可靠的分隔策略。

优化方案

既然表格不能被拆开，那么就以表格作为分隔的依据。表格和标题的差别在于表格只需要一个Delta就能表示，而表格需要一串连续的Delta行。因此我们首先需要从Delta中识别出表格来，表格的Delta从哪儿开始，从哪儿结束？

{
  insert: "\n\n",
  attributes: { 'table-col': {
      width: '100' }
  }
}

达成效果

优化的方案匹配同一个tr下的td时，只创建一次tr，后续复用之前创建的tr，减少不必要的损耗。经过测试，50个5X6的表格，性能提升在10%左右。

总结

这两个优化方案都是通过避免调用 Delta.diff 来进行性能优化的，后续需要重点关注如何优化该方法本身，或者减少 diff 的数量。

另外需要深入研究 Quill 源码，通过优化 getDelta / Delta.reduce等方法来进行深度的性能优化，这是三期需要关注的几个点。