注意到的几点：
- 在markdown文本非常大， segmentFault的preview仍然能无延时的响应。
- 能够定位当前编辑区块。
- 语法高亮会影响parse速度，但是segmentFault 表示无压力。
- 每次渲染应该是整个editor-preview区块重新渲染的， 开始我以为是定位当前编辑区块渲染来优化， 但是发现不是这样的。 inspect 看到整个preview块都在闪。
segmentFault 中的markdown preview 的响应速度在非常快，求问用了哪些优化技巧？
Viewed 3999
3 Answers
谢邀。
SegmentFault 目前正在使用的编辑器是基于 pagedown 优化定制而来。
- preview 无延时是因为 Converter 的高效
- 预览中定位当前编辑区块，使用了 typecho 中的技巧 ——根据每次渲染的差异找出正在编辑的段落，高亮之。
- 语法高亮使用 highlight.js 只要代码不是太长（小于10k个字符时）没有发现性能问题。
- pagedown 的渲染是对整个文档一起渲染的，估计是为了防止md语法出错。
没有研究过 marked-react，最好找出响应慢的原因。
如果是因为代码高亮，可以尝试对超长的代码块禁用代码高亮，只保留原始格式。
BachEditor 是使用 Codemirror ＋ markd 实现的一个实验性的编辑器。速度没有 pagedown 快。
@Integ 跪求segmentfault 前端来解答
我个人用marked-react 做了一个live preview的编辑器， 发现文本多了过后，preview响应非常的慢， 于是尝试通过throttle，但是这样治标不治本，没有任何作用。 对比了好几个编辑器， 发现sf的做的最叼。 你们到底用了什么魔法——
可以自行阅读他们开源的代码：https://github.com/Integ/BachEditor
Related Questions