One of web design principles is that the UI should be responsive when loading data into a html element. Of course, we also prefer the loading speed faster. In this exercise, we use JQuery .append or .html to load a huge html table with thousands of rows into a DIV element. But which one is loading faster, .append or .html?

Check it yourself, http://plnkr.co/edit/PGBH6N?p=preview

The results of loading 10,000 rows measured in seconds:

  Edge Firefox Chrome
.append 0.907 0.143 0.258
.html 0.462 0.286 0.441

The results, as you can see, are mixed. .html is faster in Edge, and slower in Firefox and Chrome. .append is slower in Edge, and faster in Firefox and Chrome. However, the .append and .html in Edge is significantly slower than in Firefox and Chrome.