Bigpipe still responds to data according to the longest time.

  node.js, question

图片描述

As shown in the figure, the client page needs the data of these two interfaces.

After I obtained these two data separately
nodejs:
Upon completion of the interface
res.write(data1);

Interface 2 completed
res.write(data2)
End;
However, the page seen by the client will not be rendered until the final interface is completed.
May I know where the problem lies?

图片描述

In fact, after receiving the data, js implemented a method similar to innerHTML.

After res.write data, the res.end method needs to be called. The server can only think that the data has been written and the client can only receive the written signal and read the data.
In front of the 7788 phase of course answered, sorry
I ran the code using the example I found.
pay attention to[KEYCODE]The code at should ensure that the main page to be displayed is larger than 1K? Not sure, it’s bigger anyway.
It seems to be a problem with the browser’s cache.
When it is found that the response header has a Transfer-Encoding:chunked and there is no Content-Length header (both cannot coexist), when it is found that the received content is less than a certain set value, it will continue to wait for the subsequent content without parsing immediately.
Firefox and safari use the above methods ~ ~
Chrome, however, is very active, processing the content as soon as it is received ~ ~ ~

var http = require('http');
 var url = require("url");
 
 var http = require('http');
 
 var  server = http.createServer(function(req, response){
 var delay = Math.round(Math.random() * 8000);
 Log ('getrequest' plus req.url);
 setTimeout(function() {
 var params = url.parse(req.url, true);
 var id = params.query.id;
 response.writeHead(200, {"Content-Type" : "text/html"});
 Varcontent = "< span > content of module" plus new Date().getTime () plus "< /span >";
 Write ('< script > arrested ("'plus id and'", "'plus content and'");  </script>');
 response.end();
 }, delay);
 });
 server.on('clientError', function(err, socket){
 socket.end('HTTP/1.1 400 Bad Request\r\n\r\n');
 });
 server.listen(8000);
 
 
 http.createServer(function(request, response) {
 response.writeHead(200, {
 "Content-Type" : "text/html"
 });
 response.write("<!  Doctype html><html><head>");
 response.write('<style type="text/css">div{border:2px solid #4F81BD;   margin:30px;   padding: 10px;  }</style>');
 response.write('<script type="text/javascript">function arrived(id,text) { var b=document.getElementById(id);   b.innerHTML = text;   }</script>');
 response.write("</head><body><div>Progressive Loading");
 
 //[KEYCODE] The output for the first time is larger, larger than 1K?
 for(var i = 0;   i < 1000;  I plus)
 Write ('< divid = "'plus I plus'" > Loading...</div >');
 bracket
 response.write("</div>");
 var down = 6;
 for (i = 0;   i < 6;  I plus)
 var proxyRequest=http.request({
 hostname: 'localhost',
 port: 8000,
 path: "/?  Id= "plus i,
 method: 'GET'
 });
 proxyRequest.on('response', function (proxyResponse) {
 --down;
 proxyResponse.on('data', function(chunk) {
 response.write(chunk, 'binary');
 });
 proxyResponse.on('end', function() {
 if(down == 0) {
 response.end();
 bracket
 });
 });
 proxyRequest.end();
 bracket
 response.write("</body></html>");
 
 }).listen(8080);