Appending inside a loop
You just received a big array of data. Now it's time to loop through and render it on the page.
Your first thought may be to do something like this:
This is perfectly valid and will render exactly what you'd expect, but...
DO NOT do this.
Remember those 300+ rows of data?
Each one will force the browser to re-calculate every element's width, height and positioning values, along with any other styles - unless they are separated by a layout boundary, which unfortunately for this example (as they are descendants of a element), they cannot.
At small amounts and few columns, this performance penalty will certainly be negligible. But we want every millisecond to count.
1. Add to a separate array, append after loop completes
Out of these options, this one relies on jQuery the most.
2. Using modern Array.* methods
Functionally equivalent to the one before it, only easier to read.
3. Using strings of HTML (instead of jQuery built-in methods)
Perfectly valid but again, not recommended. This forces jQuery to parse a very large amount of text at once and is not necessary. jQuery is very good at what it does when used correctly.
4. Manually create elements, append to document fragment