Strategies for rendering HTML with Javascript

Question

I take the full JSON array from the server via an AJAX call, then process it and process the HTML using Javascript. I want to do as fast as humanly possible.

In my tests, Chrome leads through FF, but it may take 5-8 seconds for the browser to render ~ 300 entries.

I considered a lazy download, for example, implemented in Google Reader, but this contradicts my other use cases, such as the ability to get instant search results (a simple search is performed on the client side for all the records that we received in JSON) and several filters.

One thing I noticed is that both FF and Chrome do not display anything until they iterate over all the elements in the JSON array, although I explicitly insert the newly created elements in the DOM after each loop (as soon as I have HTML). What I would like to achieve will be just that: get the browser to display as soon as possible.

I tried to defer calls (each element from the array will be processed by a deferred function), but I encountered additional problems, because it seems that the execution order is no longer guaranteed (some elements located further down the array will be processed before other objects in front of it).

I am looking for any tips and tricks here.

Answer 1

to try:

• push strings into an array and then just

   el.innerHTML = array.join("");
  

• use document fragments

  var frag = document.createDocumentFragment();
  for ( loop ) {
      frag.appendChild( el );
  }
  parent.appendChild( frag );
  

Answer 2

If you do not need to display all 300 records at a time, you can try to unzip them 30 or 50 records at a time and only expand the JSON array, since these parts should be displayed through a pager or a local search block. After conversion, you can cache the content for later display when users move up and down the pages.

Answer 3

DOM node , .

Answer 4

300 . 500 JSON, jQuery, Chrome. 300 .

, . , ?

- HTML Javascript, innerHtml. , 300 .

Answer 5

Google Web Toolkit BulkTableRenderers . GWT, , Apache, 2.0.