如何在大数据发布中使用 jQuery Ajax 加速 HTTP 响应接收？

Question

问题： python webapp2 + jQuery Ajax 在接收大文本数据响应时表现非常糟糕（在 1.7MB 的有效负载往返中需要超过 10 分钟）

问题： 什么原因？如何改进它？我可以使用任何经过验证的技术将大文本主干划分为小负载以避免“浏览器挂起”问题吗？

背景： 我一直在使用 webapp2 + Google App Engine 学习 python 网络编程。 我正在尝试使用 jQuery Ajax 构建一个你输入的内容就是你所看到的编辑区域。它与 stackoverflow 帖子编辑器：wmd-input vs wmd-preview 非常相似，后者提供实时预览功能。 （它一直提示'草稿已保存'到短文本。另一个例子是谷歌文档实时编辑功能）

我的例子是这样的： textchange jQuery 插件触发由每个输入 textarea 更改触发的 Ajax 发布 ---> Python 后端接收文本并在其上添加一些消息 ---> 发回文本+messages ---> jQuery 使用服务器响应更新预览文本区域 （嗯，发回接收到的文本的全部内容只是为了测试目的。）

我的前端代码：

<script type="text/javascript">
function simpleajax() {
        $.ajax({
            type: 'POST'
            ,url: '/simpleajax'
            ,dataType: 'json'
            ,data:{'esid':'#ajaxin','msgin':$('#ajaxin').val()}
            ,cache:false
            ,async:true
            ,success:function (resp){$('#ajaxout').text(resp.msgout);}
            ,error:function (jqXHR, textStatus, errorThrown){
                {$('#ajaxout').text("Ajax Error:"+textStatus+","+errorThrown)}}
        });
    }

$(document).ready(function(){
$('#ajaxin').bind('textchange', function () {
    $('#ajaxstatus').html('<strong color="blue">Typing ...</strong>');
    simpleajax();
    });
});
</script>

我的后端代码：

class simpleajax(BaseReqHandler):
    def get(self):
        content={'pagealert':'simpleAjax get response'}
        self.render_to_response('simpleAjax.html',**content)

    def post(self):
        esid=self.POST['esid']
        msgin=self.POST['msgin']
        msgout="Server noticed element " + esid + " value changed" + " and saved following message: " + msgin
        content={"msgout":msgout}
        self.writeout(content)

测试用例和症状： 本地服务器 + 纯文本负载

将小于 500KB 的纯文本复制并粘贴到输入区域：就像一个魅力。 但是，一个 1.7MB 的文本会使浏览器在 10 分钟内忙碌，看起来完全没有响应。

比较：我将相同的文本粘贴到 stackoverflow 帖子编辑器中，预览立即出现！这次我注意到没有草稿保存的提示。这里有一些判断文本长度的javascript代码。好吧。有可能不涉及服务器通信。 但这是一种解决方法，而不是解决我的问题。（Google Docs 自动保存功能必须利用某种技术来解决问题！）

Firebug xhr 监控结果：

#Request Headers:
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded
X-Requested-With: XMLHttpRequest
Content-Length: 2075974
Referer: http://localhost:8080/ajax
Cookie: __utma=111872281.1883490050.1319630129.1319630129.1319637523.2; __utmz=111872281.1319630129.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Pragma: no-cache
Cache-Control: no-cache

#Response Headers:
Server: Development/1.0
Date: Fri, 04 Nov 2011 03:29:05 GMT
Cache-Control: no-cache
Content-Type: application/json; charset=utf-8
Content-Length: 1790407

#Firebug Timeline:
TimePoints       TimeElapsed      Actions
0                 1ms           DNS Lookup
+1ms              1ms           Connecting
+2ms              82ms          Sending
+84ms            1.03s          Waiting
+1.11s           14m22s         Receiving
+14m23.11s                       Done

有趣的事情：

1. jQuery Ajax 向服务器发送 2MB 而不是 1.7MB 的纯负载。多么大的开销！ 这可能是由于 Content-Type: application/x-www-form-urlencoded ？
2. 服务器响应时间为 1.03s，jQuery 接收响应时间为 14 分钟！！！

这背后发生了什么？任何帮助表示赞赏！我想让服务器在 Ajax 请求后向客户端“推送”很多东西，但是这个问题使它不可能。

Answer 1

考虑结合使用 HTML5 WebSockets 和 Worker API 从服务器异步发送/接收数据，而不影响 UI 线程性能。

http://dev.w3.org/html5/websockets/

http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/（本教程假设 PHP 是服务器端技术）

http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html

另一种选择

a) 开启mousedown & keyup

- record the cursor position in the text-box - store it in C1.

b) 在textchange

> record the cursor position - store it in C2.

> send only the content between C1 and C2 to your server. Also send the values C1 and C2 to the server, i.e your AJAX payload will look something like: 

{ c1: C1, c2: C2, data: <text in the text-box from C1 to C2> }

您需要查看是否为c1 > c2，并正确获取子字符串，反之亦然

这样，每次只会将“更改”发送到服务器 - 而不是全文。但是如果你复制并粘贴 5MB 的内容，这不会有任何改进。但是对于单个字符的更改（例如键入、粘贴小段等），这应该会很好。