Home/ Questions/Q 8963817
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:26:33+00:00

This is my first question on this website, and I’m hoping someone with experience

  • 0

This is my first question on this website, and I’m hoping someone with experience can give me some advice.

I have built a javascript/jquery app for a client, and the key feature of it is the filtering mechanism for certain items. There is around 2000 of those items which are stored in a list like this:

<ul>
<li id='3000429'>Item</li>
<li id='3000429'>Item</li>
<li id='3000429'>Item</li>
<li id='3000429'>Item</li>
</ul>

So around 2000 lines of html just for that, I’ve removed the onClick handlers for the <li> elements for demonstration purposes. The html list with appropriate ids for the items is generated from the mysql db via php on page load.

What I do now is filter my results from my database and hide all the items first, then once I get the calculated results back from PHP via ajax, which is an array od ids, I then display only the items whos id is in the results array (using jQuery’s .show() and .hide() ). So all the items are present in code all the time, just that some are hidden.

Would it be better to use JSON and totally remove all the items from the html list upon the receive of results from it, and then generate new html items that are filtered out from the db via JSON objects and jQuery.

I am asking because I know that some browsers don’t take the stress of a lot of html very well (IE especially…).

When I get a lot of results back, say more than 1000, all browsers tend to lag a bit, probably because they are going through all the items and re-displaying the items (.show()). If the user triggers the filtering in short intervals the user experience sucks.

So, from a performance point of view, do you guys think I would be better off with loading JSON and constantly generating and deleting html, or the way I have it set up now (the show/hide method)? I’m new to JSON so I’m not quite familiar with the performance aspects of it when it comes to a lot of data.

Thanks in advance, I appreciate it!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should use additional library, like backbone & underscore stack (underscore has fenomenal filtering & other utilities, and templating, and the stack is perfect for your purpose), or you should consider angular.js, which also has much higher level of operation on lists, objects, data & html.
    In angular you can achieve complex filtering & dynamic html updating probably with 2-3 lines of code.

    In any case, regardless of performance, don’t do it with html <li> items, do it with data.
    These libraries I suggested will make it much simpler & faster.

    Worth learning.

    • 0