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??

---

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

---

You might want to use a table plugin that supports lazy insertion of DOM elements (ie 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.

---

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

链接地址: http://www.djcxy.com/p/11194.html

上一篇: ui自动完成：通过回调函数设置源不起作用

下一篇: 向DOM添加大量元素