PickList with large dataset slows down in Google Chrome

UI Components for JSF
Post Reply
User avatar
napartar
Posts: 17
Joined: 08 Mar 2012, 18:06

23 Oct 2014, 13:10

I'm dealing with an issue in the last version of Primefaces community (5.1). Using it with JSF 2.1.29 and +1000 elements brings a terrible performance issue either in page loading and data transfer when using Google Chrome 38 browser. I'm afraid it's all about a problem in Chrome's Javascript engine. Here you've got a very basic use case:

Code: Select all

@ManagedBean
@ViewScoped
public class PickListTestBean implements Serializable {

	private DualListModel<String> values;

	public PickListTestBean() {
		List<String> source = new ArrayList<String>();
		List<String> target = new ArrayList<String>();
		for (int i = 0; i < 1000; i++) {
			source.add("value" + i);
		}
		values = new DualListModel<String>(source, target);
	}

	public DualListModel<String> getValues() {
		return values;
	}

	public void setValues(DualListModel<String> values) {
		this.values = values;
	}

}
And the view:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head />
<h:body>
<h:form>
	<p:pickList value="#{pickListTestBean.values}" var="val" effect="none"
		itemValue="#{val}" itemLabel="#{val}" showSourceFilter="true"
		showTargetFilter="true">
		<p:column>
			#{val}
		</p:column>
	</p:pickList>
</h:form>
</h:body>
</html>
That's properly working in FF and IE latest versions... :(
Primefaces 5.1
JSF 2.1.29-2.2.8
Tomcat 6-7

User avatar
andyba
Expert Member
Posts: 2473
Joined: 31 Mar 2011, 16:27
Location: Steinfeld, near Bremen/Osnabrück, DE
Contact:

24 Oct 2014, 07:39

2 things.
1 - a picklist with so many elements is going to be problematic. Recommend you think of something better.
2 - we cannot possibly solve possible browser bugs.
PF 4.x (Elite versions), PF 5, Pf 5.1, PF 6.0
Glassfish 4.1, Mojarra 2.x, Java 8, Payara 4.1.1.
If you haven't read the forum rules read them now

nerone
Posts: 27
Joined: 15 Mar 2012, 16:51

30 Oct 2014, 09:20

Hey,

i have the same issue and i agree that primefaces cannot fix browser bugs or general browser performance, BUT i can confirm that it was working fine before (in 5.0 and 4.x) even when you had very big picklists.

Also the same performance issue is there in IE11 and Firefox - just not that bad like on Chrome, but you still can feel a "lag" and the CPU load rising

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

30 Oct 2014, 10:38

Well, the OP mentioned it IS working in FF and IE11, so maybe there are two different issues. e.g. Large picklists a problem in Chrome and not in IE/FF, and REALY large picklists a problem in both.

If you have an explicit example (same code) that has no performance issue with 5.0(.x) and 4.0(.x) but is a problem in 5.1(.x), post it here. Or better, analyze the differences in generated html, and the javascript being executed and let us know the results.

nerone
Posts: 27
Joined: 15 Mar 2012, 16:51

04 Nov 2014, 11:18

While trying to fix this issue i have found that using innerHTML and a stack seems to be much faster than the current implementation

picklist.js

Code: Select all

    generateItems: function(list, input) {   
        list.children('.ui-picklist-item').each(function() {
            var item = $(this),
            itemValue = PrimeFaces.escapeHTML(item.attr('data-item-value')),
            itemLabel = item.attr('data-item-label'),
            escapedItemLabel = (itemLabel) ? PrimeFaces.escapeHTML(itemLabel) : '';
            
            input.append('<option value="' + itemValue + '" selected="selected">' + escapedItemLabel + '</option>');
        });
    },

Code: Select all

    generateItems: function(list, input) {   
      var appendStr = [];
        list.children('.ui-picklist-item').each(function() {
            var item = $(this),
            itemValue = PrimeFaces.escapeHTML(item.attr('data-item-value')),
            itemLabel = item.attr('data-item-label'),
            escapedItemLabel = (itemLabel) ? PrimeFaces.escapeHTML(itemLabel) : '';
            appendStr.push('<option value="' + itemValue + '" selected="selected">' + escapedItemLabel  + '</option>');
        });
       input.innerHTML = appendStr.join('');
    },
Could you please review if im missing something here and possibly add this to the next release, as its bad performance simply is breaking the picklist's usefulness in my opinion

User avatar
napartar
Posts: 17
Joined: 08 Mar 2012, 18:06

17 Nov 2014, 14:18

Definitelly a set of 1000 elements is probably not suitable for a picklist component. Anyway, there's a perfomance issue somewhere. I'm running the code in my post above in a powerful machine, so if a picklist with 1000 elements takes >8 secs to render, it could be the same for a picklist of 50-100 elements in an old computer running the latest version of Chrome. IMHO nerone's workaround should be considered if it really makes it.
Primefaces 5.1
JSF 2.1.29-2.2.8
Tomcat 6-7

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

17 Nov 2014, 14:50

file an issue please

User avatar
napartar
Posts: 17
Joined: 08 Mar 2012, 18:06

17 Nov 2014, 18:03

Primefaces 5.1
JSF 2.1.29-2.2.8
Tomcat 6-7

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 43 guests