jQuery data append tips and tricks

jQuery - data append and loops


Categories

JavaScript Design Patterns PHP jQuery MySQL Databases WordPress Algorithms HTML

Tipo IT - where your web applications live

In this article here, we will touch a few jQuery techniques (simple and yet powerful) for data manipulation, and see how you can avoid falling into a deep pit of bad client-side data management. We are showing an example of an html table element which we want to use to append the employees data. So, at first, someone who knows a little bit of jQuery will say - I will prepare the data source (JSON, JavaScript object, or whatever...) and then I will iterate through this data source, and append each row as a table row. Ok. That's linear thinking. Let's see how that applies to a bigger set of data, let's say...6000 rows. Below, we have an example code, where we begin with defining the table structure with thead section and empty tbody element.

Starter html code

html-table-example

Now, we will include a minified jQuery source that we can find at Google developers. We will run the script with making sure that the tbody element is empty since this is where we will append our data, and open the on-click functionality that will roll out when we click the button that we have defined in our html.

jQuery - opening statements

jquery-append-example

Now, we have to separately define a function that will simulate our data source (in real application this can be some sort of a JSON object, or an AJAX call to a Php file that holds a connection to a database, here, we just use a simple JavaScript object and copy it 6000 times).

jQuery - optimized append data example 1

get-data-jquery-function

Now we use this function to return the data and append it to a tbody - table element in a simple for loop and using the append() jQuery function. Prior to this we have defined a timer (using the Date object) at the beginning of the script, and at the end of the script, to mesaure the time neccesary to perform the append execution loop.

jQuery - optimized append data example 1

jquery-append-example

JQuery provides several techniques to manipulate the DOM. Often we can ask ourselves a question, which one to use and which one is better. Depending on the amount of data and application structure, this can differ, but there are general rules of conduct which can apply almost always. Let us look at our example code. This code finds a table, and appends a bunch of data to this table tbody element. When the button on top of the page is clicked, jQuery appends to each table row, the hardcoded data extracted from getEmps() function, in form of a table cell for each piece of information. We mesure the time it took for this operation with our two time measuring functions. We can see how long it took to append all 6000 rows here (for me, almost 16 seconds), and yes, this is bad. The browser is almost non-responsive because of the slow time execution. Now, how do we clean this mess up, and make this work properly? First thing that we can do, is eliminate the "touching the DOM" that we do so many times with the append() function. Instead of this bad practice within the loop, what we should do is set one empty string variable (we can use an array also) and append the data ONCE, to this variable, and return it to the browser. This way, we touch the DOM only one time with the append function call. This makes a major, major difference and we can see this in seconds that we saved (I get less than 8 seconds execution time now), the positive execution result is obvious.

jQuery - optimized append data example 2

jquery-append-example-2

Second thing we can do here to further optimize our performance, is to use concatenation of data to an empty string variable, and perform the append function once, OUTSIDE of the loop itself. This makes even more difference in terms of execution time. Before that, what we also did, is caching the main DOM selector which can also add up to a better performance of this script.

jQuery - optimized append data example 3

jquery-append-example-3

Now, we get even more significant performance boost, I get about 3 seconds execution time for 6000 rows, and we started at 16 seconds execution time at the beginning of this article! So, you see now, executing an append function or something similar within your extraction loops can basically destroy your user experience. Think about what you put in your JavaScript loops. Time complexity of these applications can kill your app in no time if you don't pay attention. Slow SQL queries are not the only danger in the vast and mysterious land of web development.

back to articles...