Làm thế nào để tăng tốc độ phản hồi HTTP nhận được bằng cách sử dụng jQuery Ajax trong đăng dữ liệu lớn?

Question

Vấn đề: python webapp2 + perfroms jQuery Ajax vô cùng xấu trong việc tiếp nhận lượng lớn đáp ứng dữ liệu văn bản (mất hơn 10 phút trong một khứ hồi 1.7MB tải trọng)

Câu hỏi: lý do là những gì ? làm thế nào để cải thiện nó? tôi có thể sử dụng bất kỳ kỹ thuật được chứng minh tốt nào để chia thân văn bản lớn thành các tải trọng nhỏ để tránh sự cố 'trình duyệt bị treo' không?

Bối cảnh: Tôi đã học lập trình web python với webapp2 + Google App Engine. Tôi đang cố gắng xây dựng vùng chỉnh sửa bạn-đầu-vào-những gì-bạn-thấy với jQuery Ajax. Nó rất giống với trình chỉnh sửa bài đăng stackoverflow: wmd-input vs wmd-preview cung cấp chức năng xem trước trực tiếp. (Nó giữ cho thấy 'dự thảo lưu' đến văn bản ngắn ví dụ khác là Google Docs trực tiếp chỉnh sửa chức năng.)

dụ tôi làm việc như thế này: Một textchange jQuery plugin bắn Ajax đăng tải gây ra bởi mỗi thay đổi textarea đầu vào ---> Các chương trình phụ trợ Python nhận được văn bản và thêm một số tin nhắn vào đó ---> Gửi lại tin nhắn văn bản ---> jQuery sử dụng phản hồi của máy chủ để cập nhật bản xem trước (Vâng, gửi lại toàn bộ nội dung của văn bản nhận được chỉ nhằm mục đích kiểm tra.)

mã frontend của tôi:

<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> 

mã backend của tôi:

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) 

trường hợp thử nghiệm và triệu chứng: Local máy chủ + plain text trọng tải

sao chép và dán văn bản thuần túy nhỏ hơn 500KB vào khu vực nhập: hoạt động như một nét duyên dáng. Tuy nhiên, , văn bản 1,7MB làm cho trình duyệt bận> 10 phút xuất hiện hoàn toàn không có phản hồi.

So sánh: Tôi dán cùng một văn bản vào trình chỉnh sửa bài đăng stackoverflow và bản xem trước xuất hiện ngay lập tức! Tôi nhận thấy không có lời khuyên nào được lưu dự thảo lần này. Và có một số mã javascript đánh giá độ dài văn bản ở đây. Tốt. Có một cơ hội không có truyền thông máy chủ liên quan. Nhưng đó là giải pháp không phải là giải pháp cho vấn đề của tôi. (Chức năng tự động lưu của Google Documents phải sử dụng một số loại kỹ thuật để giải quyết vấn đề!)

Firebug màn XHR kết quả:

#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 

Thú vị điều:

1. jQuery Ajax gửi 2MB thay vì 1.7MB tải trọng tinh khiết đến máy chủ. Thật là một chi phí lớn! Có thể là do Loại nội dung: application/x-www-form-urlencoded?
2. Máy chủ mất 1,03 giây để trả lời và jQuery mất 14 phút để nhận được phản hồi !!!

Điều gì đang xảy ra sau này? Bất kỳ trợ giúp được đánh giá cao! Tôi muốn cho phép máy chủ 'đẩy' rất nhiều thứ cho khách hàng sau một yêu cầu Ajax, nhưng vấn đề này làm cho nó không thể.

Answer 1

Cân nhắc sử dụng kết hợp HTML5 WebSockets & API công nhân để gửi/nhận không đồng bộ dữ liệu từ máy chủ mà không ảnh hưởng đến hiệu suất của chuỗi giao diện người dùng.

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

http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/ (hướng dẫn giả PHP để là công nghệ phía máy chủ)

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

Lựa chọn khác

a) Về mousedown & keyup

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

b) Trên 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> } 

Bạn sẽ cần phải xem nếu c1 > c2, và nhận được chuỗi một cách thích hợp và ngược lại

Bằng cách này, chỉ "thay đổi" được gửi đến máy chủ mỗi lần - không phải toàn văn. Nhưng nếu bạn sao chép và dán 5MB nội dung, điều này sẽ không đưa ra bất kỳ cải tiến nào. Nhưng đối với những thay đổi ký tự đơn (như gõ, dán các đoạn nhỏ vv ..) thì điều này sẽ hoạt động khá tốt.