Opened 9 years ago

Closed 8 years ago

Last modified 8 years ago

#10636 closed defect (wontfix)

Select: long delay when lots of data

Reported by: zimnyx Owned by: Nathan Toone
Priority: high Milestone: future
Component: Dijit - Form Version: 1.4.0
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

Browser: FF 3.5.7, Opera 9.6 After I click select to see option list I must wait 4 seconds for the first time, w/further dropping-up/down performs much better. In comparsion, dijit.form.FilteringSelect with the same selcet options doesn't have such "freeze".

I'm attaching a simple HTML and JSON that contains Select and FilteringSelect, so you can see speed difference.

Attachments (2)

x.html (1.0 KB) - added by zimnyx 9 years ago.
HTML example comparion FilteringSelect? and Select speed
data.json (16.7 KB) - added by zimnyx 9 years ago.
JS-JSON list of countriesd used by HTML example (place it in save dir)

Download all attachments as: .zip

Change History (12)

Changed 9 years ago by zimnyx

Attachment: x.html added

HTML example comparion FilteringSelect? and Select speed

Changed 9 years ago by zimnyx

Attachment: data.json added

JS-JSON list of countriesd used by HTML example (place it in save dir)

comment:1 Changed 9 years ago by Douglas Hays

I noticed Select's dynamic menu goes beyond the viewport and you have to use the window's scrollbars to see the entire list, while FilteringSelect? is constrained to the viewport with its self-contained scrollable menu.

comment:2 Changed 9 years ago by bill

Owner: set to Nathan Toone
Summary: dijit.form.Select drops down after long delay - not much usableSelect: drops down after long delay - not much usable

Perhaps that's the reason for the slow down. Regardless of speed though, since you can't see all the options in the drop down list it means that Select isn't more than a screenful of data currently.

comment:3 Changed 9 years ago by zimnyx

Guys, any chance it will be fixed in near future?

comment:4 Changed 9 years ago by bill

Description: modified (diff)
Milestone: tbdfuture
Resolution: wontfix
Status: newclosed
Summary: Select: drops down after long delay - not much usableSelect: long delay when lots of data

Sorry, I don't think so. It takes the browser a long time to render 250 rows of data, not much we can do about that. If you have that much data you should really be using a FilteringSelect, which will page the data. I don't think we want to put paging into Select though.

comment:5 Changed 8 years ago by zimnyx

Resolution: wontfix
Status: closedreopened

The point is that even if I don't type anything in FilteringSelect its FULL (nonfiltered) option list opens twice as fast comparing to Select. Adding maxHeight to Select makes its option list looks very much similar like FilteringSelect's one. So why there is such speed diference?

Here is my IRC discussion about this topic on #dojo:

<zimnyx> Can I talk with anyone about this ticket, before I reopen it? http://trac.dojotoolkit.org/ticket/10636
<zimnyx> What does Bill mean the FilteringSelect is paging the data?
<zimnyx> When I set maxHeight on Select its option list looks exactly the same as FilteringSelect.
<wuhi> zimnyx i think he want to say that the filteringselect is fetching the data only on demand.
<wuhi> the select does allways fetch all entries and renders it. but the filteringselect does only render the requested items
<wuhi> based on the input ...
<zimnyx> wuhi: exactly. But even if I don't type anythiong in FilteringSelect its FULL option list renders twice as fast as Select's one. Thats my point.
<neekfenwick> zimnyx: it does seem to me that they've missed your point.. that Select and FilteringSelect both load all the data, but one renders at a very different speed 
              to the other

comment:6 Changed 8 years ago by Nick Fenwick

I had a look in response to zimnyx's queries on #dojo .. FilteringSelect? seems to use ComboBox?'s _createOption() function to append simple text elements to the popup list, whereas Select uses a Menu dijit which presumably has a more complicated DOM structure. I think the speed difference is because of the time taken by Menu to populate itself with the 240 items in the data.

The test file does show the Select's popup extending way beyond the browser window's vertical height forcing use of the browser's scroll bar, but maxHeight="300" fixes that as designed.

So, I agree with bill and doughayes above.

I'm not going to get into the 'why' of why FS and Select are so different under the hood, or 'why' FS doesn't use a Menu, and wouldn't be surprised if this is left as 'wontfix'.

comment:7 Changed 8 years ago by Douglas Hays

Resolution: wontfix
Status: reopenedclosed

I think everyone is in agreement that Select is slower than FS, but that this is still a wontfix (which does not imply that it cannot be fixed or that it is not slower). It would be great if a future ticket reopen was accompanied by a patch file that fixes the speed issue.

comment:8 Changed 8 years ago by bill

@neek is right, FilteringSelect is faster (even without paging) because the dropdown is simpler. It has a simple DOM structure of <li> nodes inside a <ul> node, and all the event handling done on the root <ul> node. Select's dropdown, OTOH, is a 4 column <table>, has event handlers on each table row, and each table row is it's own MenuItem widget.

On my machine (which is ~3 years old), on FF3.6, the Select in your example is opening in less than one second, so I guess the problem isn't as bad as it used to be.

Still, I think changing the drop down to a simpler design would make it faster. The complication though is keyboard support; the user needs to be able to select a drop down option using the arrow keys, same as they can today. That's probably why the Menu widget was used in the first place.

comment:9 Changed 8 years ago by bill

PS: The other complication is screen reader support. I think that as the user presses up/down arrow keys, the new selected element needs to be focused. Either that, or focus stays on the select box itself, and up/down arrow copies the selected menu option into the select box... that's how ComboBox works.

comment:10 Changed 8 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.