0

If I take out my database access code my webpages are dealt with in a few ms. When the database access code is added then the requests go up to 400ms+.

Is it possible to send the top of the page to the browser whilst waiting on the database to return?

Just to prove this is possible...

enter image description here

enter image description here

Ian Warburton
  • 15,170
  • 23
  • 107
  • 189
  • 1
    Please open the developer tools ... and check if your browser completed your tags or not? – Pio Jan 28 '15 at 15:02
  • Yes it did complete the tags. – Ian Warburton Jan 28 '15 at 15:03
  • What about this guy? He doesn't seem to be using Ajax requests in order to 'see the updated screen after each and every second'. http://www.c-sharpcorner.com/UploadFile/deveshomar/improving-Asp-Net-performance-using-response-bufferoutput/ – Ian Warburton Jan 28 '15 at 15:09
  • 1
    Ok. So your request finished ... since the browser rendered what he got in reply. So you cannot continue to send more data in the finished request. About the link: that is the something similar to `socket.io` he creates a connection that is continuously open. The answer to your question is still NO! And it won't change ... . Please Google or Bing how the web works and how html pages work. – Pio Jan 28 '15 at 15:12
  • So why can't I create a connection that is 'continuously open' like that guy? Wouldn't that make the answer to my question be 'yes'? – Ian Warburton Jan 28 '15 at 15:16
  • Nope.. you would still keep updating your document when new data comes in. – Pio Jan 28 '15 at 15:26
  • That's what I want to do. – Ian Warburton Jan 28 '15 at 15:26
  • But note that that still does not send the "top of the page to the browser". You send the whole page then you update it. – Pio Jan 28 '15 at 15:59
  • But a few comments up you said, 'you cannot continue to send more data in the finished request'. And now you're saying, "You send the whole page then you update it". I agree with the first. Not the second. – Ian Warburton Jan 28 '15 at 16:02
  • Great discussion... http://blog.codinghorror.com/the-lost-art-of-progressive-html-rendering/ – Ian Warburton Jan 28 '15 at 17:21

2 Answers2

1

You should return your views immediately and populate your data with some asynchronous api calls (using ajax calls) that trigger db queries. When you get your results from the database you can send them. Alternatively you can break up your queries and return chunks of your data if that is what makes more sense.

Pio
  • 4,044
  • 11
  • 46
  • 81
  • I'm not talking about multiple responses. I'm talking about one response that gets delayed in the middle. I think you can send and then wait for . How else would web pages progressively load? Like on slow connections, I'm sure I can recall the scroll bar gradually getting smaller as more content was sent form the server. – Ian Warburton Jan 28 '15 at 13:59
  • @IanWarburton the thing you need to do is send a complete, but empty, html doc (e.g. and then use async calls to update it as results come in or fail. – Owen C. Jones Jan 28 '15 at 14:03
  • Please take a look at these pages (e.g. Facebook). Check how many ajax request are fired. It is fired to load additional data. You can also read about it [here](http://docforge.com/wiki/Web_application/Progressive_loading). – Pio Jan 28 '15 at 14:03
  • Socket.io may be useful in this, as may a framework like Angular, Ember, Knockout, etc. – Owen C. Jones Jan 28 '15 at 14:04
  • As I said I don't want to do that because then it makes it difficult to have search engines find the data. – Ian Warburton Jan 28 '15 at 14:04
  • I know what an AJAX request is. Facebook aren't concerned with having their content indexed by search engines. – Ian Warburton Jan 28 '15 at 14:05
  • Unfortunately there is no other way to do it. – Pio Jan 28 '15 at 14:05
  • I'm not convinced. :) – Ian Warburton Jan 28 '15 at 14:06
  • Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/69745/discussion-on-answer-by-pio-send-start-of-pages-html-to-the-server-whilst-waiti). – Taryn Jan 28 '15 at 15:12
1

Marko does exactly what you are looking for:

It offers 3 key features that enable progressive rendering:

  1. Streamed Template Rendering - So your html is sent early and the buffers are cleared often
  2. Async Rendering of html fragments - Marko will manage the waiting, buffering and eventual rendering
  3. Out of order rendering - Marko will optionally send template data as soon as it is available from api calls or db queries, then it will re-order the html on the client side

I just did a screencast on Marko that you might find helpful:

http://knowthen.com/episode-8-serving-content-in-koajs-with-marko/

James Moore
  • 1,881
  • 14
  • 18
  • Aha... pity I've currently using Jade. – Ian Warburton Jan 28 '15 at 14:09
  • It would be nice if you could do this with Jade, but I don't believe there is a way... Kind of a big shortcoming in Jade and almost every other nodejs template engine. – James Moore Jan 28 '15 at 14:15
  • Wouldn't it be possible to write an HTML fragment to the response stream and flush it before continuing with the request as per normal with Jade? – Ian Warburton Jan 28 '15 at 15:19
  • Possibly, but likely challenging to do in an elegant way. I am half tempted to do what author of Marko mentioned in this thread: http://www.reddit.com/r/node/comments/2sz92j/marko_is_better_than_jade_60_second_proof/cnukl6h – James Moore Jan 28 '15 at 17:17
  • Exactly... ought to be a separation of concerns here. – Ian Warburton Jan 28 '15 at 17:26
  • Similar issue with ASP.net MVC http://nikcodes.com/2014/03/04/flushing-in-asp-net-mvc/ – Ian Warburton Feb 01 '15 at 01:21