CODEWITHSUNDEEP
jquerydom
Navaneeth
Navaneeth

Reputation: 2584

adding large amount of elements to DOM

in my web application, I have to retrive huge amount of data and to create a table with the data ( table with around 800 rows, 10 columns)
When, I am directly adding elements through append() method, the browser doesnot respond for a while.

for accessing the huge data, I am using web workers for ajax call.
As, we cannot manipulate DOM from web workers, what should I do??
thanks :)

edit:
If I want some functions like hide() (jQuery hide) over it, will innerHtml work??

Upvotes: 7

Views: 2637

Answers (3)

Eugene Naydenov
Eugene Naydenov

Reputation: 7295

You can use some JavaScript templates engine to avoid manual appending the elements step by step or building the innerHTML string.

For example http://ejohn.org/blog/javascript-micro-templating.

Say you have a template somewhere in your HTML:

<script type="text/html" id="user_rows_tpl">
    <% for(var y = 0, l = users.length; l > y; y++) { %>
        <tr id="user-row-<%=y%>">
            <td><%=users[y].name%></td>
            <td><%=users[y].surname%></td>
            <td><%=users[y].age%></td>       
        </tr>
    <% } %>
</script>​

And then you're using this template in your JavaScript to render your objects:

<script type="text/javascript">
    var table = document.getElementById("userTable");
    table.innerHTML = tmpl("user_rows_tpl", {
        users: getUsers()
    });
</script>

For test I've created 1000 user objects and rendered them in table.
The average rendering time is about 20-25ms in Google Chrome. Not bad, isn't it?

DEMO

Upvotes: 1

NullPoiиteя
NullPoiиteя

Reputation: 57322

Note : Accessing DOM elements with JavaScript is slow so in order to have a more responsive page.

you can do this by

var buffer = [];
setInterval(function(){ $("#div").html(buffer.join(""); buffer = []; }, 1000);

buffer.push("html");
buffer.push("html");

and check this link for the performance

also check this link Best Practices for Speeding Up Your Web Site

Upvotes: 1

Jon
Jon

Reputation: 437336

You might want to use a table plugin that supports lazy insertion of DOM elements (i.e. on demand). DataTables offers a wealth of features, including this one. It will also help you cut down on the size of the code you have to write.

Upvotes: 1

Related Questions