Progressive rendering of HTML

[voracity]

I've written up an explanation of how Well does progressive rendering
of program output. I'm not aware of *any* existing AJAX that does this
(and I really wish it would!), so I guess this can be considered a new
contribution all on its own.

Of course, progressive text is pretty easy, but for progressive HTML,
you have to respect the hierarchical structure of the HTML so there's
a few things to keep in mind, such as handling incomplete tags and
locating where in the current node hierarchy the output is up to.
Doing this fast in existing browsers was quite a challenge. I
eventually came up with an approach which seems to build the hierarchy
about as fast as the native browser (i.e. adding almost no overhead to
the existing rendering).

I'd also love to know if there are other progressive rendering AJAX
modules out there like this that I've missed.

Here's the write up:

http://voracity.org/well/2011-06/progressive-rendering/

(Let me know if it's considered bad etiquette to link to blog posts.
In future, I can either replicate whole posts or summarise them
without a link.)

[Steven Wittens]

This is a really clever solution to a tricky problem and well explained to boot. Very cool.

As for blog posts... I personally support it. I think a blog post encourages people to write really good stand-alone content with less assumptions about the audience than a mailing list. The only tricky part is that it splits up the conversation... maybe we should agree to link back to the Google Groups post in the blog and keep conversation here as much as possible?

Steven

[Denis Raguzov]

Can you provide usage example of this JS ?

среда, 1 июня 2011 г., 15:47:42 UTC+4 пользователь voracity написал:

[voracity]

Apologies Denis, I missed this.

Usage (with the default "partial-div" update method) would be something like this:

var pr = new ProgressiveRequest(document.getElementById("outputElement"));

var xhr = new XMLHttpRequest();
...
xhr.onreadystatechange = function() {
  pr.update(xhr.responseText, xhr.readyState == 4);
}

The xhr.readyState == 4 tells the ProgressiveRequest object when the final update happens so it can clean up. Strictly speaking, you don't need it if you're not worried about leaving a very small amount of markup cruft in the output div.