javascript - Will Isotope filtering perform well with several hundred items & multiple categories? - Stack Overflow

admin管理员组

文章数量:1287788

I'm hoping to use the Isotope Jquery plugin (/) to display and filter several hundred items (around 700). Each item will contain a thumbnail image and a name, and be filterable by three categories. (To stop the page being ridiculously long, the whole thing will be contained inside a scrollable div).

If possible, I would like to enable the animation effect too (using the 'best-available' animation engine, which will fall back on JS if CSS3 transitions are unavailable).

I've tested it locally with about 100 items and it performs very quickly in Chrome and both the CSS3 and JS animations are pretty fast. But I'm worried that out there in the wild, it may turn out to be unusably slow for older clients and browsers (and of course, there's a very tight deadline so not much time to build a better prototype!).

Does anyone have experience of using it on a similar scale?

Thank you,

Peter

I'm hoping to use the Isotope Jquery plugin (http://isotope.metafizzy.co/) to display and filter several hundred items (around 700). Each item will contain a thumbnail image and a name, and be filterable by three categories. (To stop the page being ridiculously long, the whole thing will be contained inside a scrollable div).

If possible, I would like to enable the animation effect too (using the 'best-available' animation engine, which will fall back on JS if CSS3 transitions are unavailable).

I've tested it locally with about 100 items and it performs very quickly in Chrome and both the CSS3 and JS animations are pretty fast. But I'm worried that out there in the wild, it may turn out to be unusably slow for older clients and browsers (and of course, there's a very tight deadline so not much time to build a better prototype!).

Does anyone have experience of using it on a similar scale?

Thank you,

Peter

• javascript
• jquery
• performance
• jquery-plugins

Share Improve this question Follow asked Apr 25, 2011 at 22:46 poshaughnessyposhaughnessy 2,02833 gold badges2222 silver badges3535 bronze badges 1

• Just for some more background, I should have mentioned that it would need to feel fairly responsive in IE7 on a several-years-old Win XP machine (i.e. the type of client that there's still vast numbers of around), but we don't really need to worry about IE6 (or older). Anyway, I'm just really hoping for anyone's prior experience, or examples that I could take a look at and I could determine the speed myself. Thanks. – poshaughnessy Commented Apr 25, 2011 at 23:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I'd remend your item count should be around 50 items max if you're doing filtering or sorting. That doesn't mean you can try pushing it. For example, Leafly's item count is close to 300.

Okay well I can answer my own question now, because we tried to build it. The answer was it was too slow in pretty much all browsers except Chrome where it was just about acceptable. Even in Firefox on a fast Mac laptop, it was taking roughly 5 seconds to load the page from scratch and not much less than that to change the filters back to 'all'. It even gave an unresponsive script warning for a couple of people who checked it in Safari and IE.

So I rewrote it to just simply add/remove a 'hide' class on each item instead. From a quick parison this is roughly about 50% quicker. Obviously this loses all the fancy animation though. So I would remend Isotope for smaller datasets where snazzy visual effects are important, but not to work with hundreds of items.

本文标签：