StackOverflow 如何提供 markdown 文本的预览，而不造成延迟？答案

【问题标题】：How does StackOverflow provide a preview of markdown text, without causing lag?StackOverflow 如何提供 markdown 文本的预览，而不造成延迟？
【发布时间】：2017-07-21 18:28:26
【问题描述】：

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

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

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

$('#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']);

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

【问题讨论】：

大多数库都可以在浏览器中完成
“目前，我在每次击键时都会对服务器进行 AJAX 调用...” 老实说？是的，这将是一个巨大的瓶颈。更不用说这些调用的异步性质了。
嗯，也许问题在于 AJAX 调用速度非常慢……但这只是猜测……
如果你确实想要一个服务器来处理这个（虽然我不知道为什么会这样），你最好分批做字符。此外，您会在发送另一个请求之前中止先前的请求。但是想要实时更新和服务器处理似乎是相互冲突的要求。

标签： javascript jquery html ajax markdown

【解决方案1】：

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

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

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

【讨论】：

出于显而易见的原因，他们在您提交文本时使用服务器。
@Bálint 同意，同意 :)

【解决方案2】：

不要在每次击键时向服务器发送 AJAX 调用！使预览使用客户端的东西，并且仅在您提交帖子/评论时使用服务器。

【讨论】：

【解决方案3】：

创建 AJAX 调用是导致延迟的原因。我没有仔细看过，但我可以向你保证，StackOverflow 不会每次都调用服务器来验证并为你提供降价预览。他们只是使用 Javascript 来代替。

【讨论】：

【解决方案4】：

Stack Overflow 会在客户端呈现预览，这就是某些标签未经过清理的原因。 AJAX 调用（尤其是很多调用）不是必需的，因为大多数计算机无需服务器帮助也能轻松完成。

如果您注意到，语法高亮在几秒钟内不会触发，因为每次输入字符时都这样做是低效的。

【讨论】：

【解决方案5】：

目前，我在每次击键时都会对服务器进行 AJAX 调用

我不会解释其他已经说过这是一个糟糕策略的答案和 cmets。也就是说，如果您无法将渲染移至客户端，并且准备好降低对速度的期望，则可以使用此解决方案（由 cmets 中的 user1106925 提到）：

定义一个计时器，例如 300 毫秒
每次击键都会重置计时器
当计时器超时时，对服务器进行 AJAX 调用

这应该会大大减少 AJAX 调用的数量。用户不必按下“渲染”按钮（他只需停止输入），因此它会修改您当前的 UI。

这是Compiler Explorer 使用的策略（虽然没有降价）。

【讨论】：