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

Question

问题: python webapp2 + jQuery Ajax在接收大文本数据响应方面非常糟糕(在1.7MB有效负载往返中需要超过10分钟)

问: 这是什么原因？怎么改进呢？我可以使用任何经过充分验证的技术将大文本主干划分为小有效负载以避免"浏览器挂起"问题吗？

背景: 我一直在学习使用webapp2 + Google App Engine的python web编程.我正在尝试使用jQuery Ajax构建一个"你输入的是什么"的编辑区域.它与 stackoverflow post editor非常相似:wmd-input vs wmd-preview,提供实时预览功能.(它一直表示"草稿已保存"为短文本.另一个例子是Google Docs实时编辑功能)

我的例子是这样的: 一个textchange jQuery插件触发由每个输入textarea触发的Ajax发布更改 ---> Python后端接收文本并在其上添加一些消息 --->发回文本+消息 ---> jQuery使用服务器响应更新预览textarea(好吧,发送回收到的文本的全部内容仅用于测试目的.)

我的前端代码:

<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 post编辑器,并立即显示预览!这次我注意到没有草稿保存的提示.并且这里有一些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.03秒才能响应,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> }

您需要查看 if c1 > c2，并适当地获取子字符串，反之亦然

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