javascript - StackOverflow 如何提供 Markdown 文本预览而不造成延迟？

Question

我正在制作一个采用 Markdown 语法的博客。我希望能够在每次击键时提供更新的预览，就像 Stackoverflow 在提问和回答问题时所做的那样。我当前的解决方案非常滞后。

Stackoverflow 如何实现他们的解决方案以提供 Markdown 文本的更新预览而不造成延迟？

目前，我在 post-content 文本区域中每次击键时都会对服务器进行 AJAX 调用。服务器清理内容并返回 HTML。然后使用新的 HTML 更新 preview div:

$('#post-content').bind('input propertychange', (function() {
    var content = {"content": this.value};
    $.ajax({
        ...
        success: function(data) {
            $('#preview').html(data['content']);
        }
        ...
    });
 }));

这效果不太好。如果我全速打字，文本区域最终会丢失大约 1/3 的字符。我的服务器是一个微型 500MB RAM 虚拟机。我不确定服务器是否是瓶颈，但我不明白为什么 textarea 会因为缓慢的 AJAX 调用而滞后 - 在我看来，这一行是瓶颈:

$('#preview').html(data['content']);

但我对前端开发了解不够，无法推测这一点。

Answer 1

How does StackOverflow provide a preview of markdown text, without causing lag?

它们将文本本地存储在您的客户端浏览器上，没有服务器或数据库往返

这可以通过检查代码来验证