.Append () table encountered at the same time

Question

I have a for loop in which I add rows to the table . Although I add each tr one at a time in the loop, the browser does not display any of them until the loop ends.

At first I thought that it might be a browser display too fast for me, but after increasing the number of rows to, say, 10000, there is a significant slowdown, then the whole table is displayed immediately.

Link: http://jsfiddle.net/xyan/ad2tV/

counter increment to increase the number of lines.

In addition, if you change counter to 3 (or another small number) and uncomment alert() , it will pause the loop and show each line added one by one.

HTML:

 <div></div> 

JavaScript:

 var table = $('<table />').appendTo($('div')); var counter = 1000; var html = []; var j = 0; for (var i = 1 ; i < (counter + 1) ; i++) { html[j++] = '<tr>'; html[j++] = '<td>'+i+'-1</td><td>'+i+'-2</td><td>'+i+'-3</td>'; html[j++] = '<tr>'; table.append(html.join('')); //alert('pause'); html = []; j = 0; } 

CSS

  table td { padding: 3px; border: 1px solid red; } 

---

Note:

I found a way to make the loop slow down, allowing me to add rows one at a time.

Link: http://jsfiddle.net/xyan/8SCP9/

 var html = ''; var numbertorun = 15; var delay = 500; (function loop (i) { setTimeout(function () { html = '<tr><td>'+i+'-1</td><td>'+i+'-2</td></tr>'; $('table').append(html); if (--i) loop(i); }, delay) })(numbertorun); 

---

So, I think my question is not how to do this, but why the lines are not inserted one at a time in the original for loop.

Answer 1

I assume that some background is needed to understand this issue.

Each time you add a new row to a table on your web page, your script changes the model of your document in your browsers memory. The API you use for this is called the DOM (Document Object Model).

An individual DOM update does not always mean that the page will be redrawn. The decision depends on the browser when this set of DOM changes causes the browser to redisplay the page.

I don’t really know, but I assume that browsers usually update views, perhaps somewhere around 40-60 times per second. The fact is that if your screen printing takes less time than 1/60 of a second, you will not see partial updates.

By adding a timer, you can of course slow down the process of creating a table. As you understand, this will allow you to see the page redrawn at different points during the for loop.

If you want to force the browser to redraw the user interface, there are some JavaScript hacks that you could try applying. For example, one such hack is documented in Ajaxian: forced redrawing of the user interface from JavaScript .

If you intentionally want to run your program slowly and slowly add lines, say, one line per second, and while using some other things with JavaScript at the same time, you need to start the loop either by starting new iterations in some way or using another (JavaScript ) flow.

Schematic example of using setTimeout to slow down printing (prints 1 line per second, just change the second parameter in window.setTimeout to change the delay):

 var table = $('<table id="table1"/>').appendTo($('div')); var i = 0; var counter = 1000; function addRow() { table.append('<tr><td>'+i+'-1</td><td>'+i+'-2</td><td>'+i+'-3</td></tr>'); i++; if(i<counter) { window.setTimeout( addRow, 1000 ); } } addRow(); 

Answer 2

The jQuery append method is similar to the jendend appendChild method. Both of these methods go through the DOM and insert the element at the end of the parent node. This task takes time, and doing this inside the loop will cause frequent changes to the DOM structure that the DOM cannot reproduce. Thus, inserting its lines using setimeout, the browser has enough time to reload the content. Therefore, you see row insertion one after another in the second approach.

Answer 3

Each time an element is added to a page, the browser needs to redraw the entire page. Under rendering conditions, this is an extremely intensive process and rather slow. Therefore, if you make small changes little by little, that will make the page very slow. What the browser does is to group small changes into big changes. The end result is that the page will display much faster in aggregate.

The browser does this:

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip6