0

Listbox client rendering performance problem

asked 2012-11-29 09:16:51 +0800

edudant gravatar image edudant
219 1 1 1
zk.datalite.cz

Dear All,

we have a problem with performance of client rendering on ZK 6.5.0 PE.

I have created simple example with 100 rows and 50 columns - which is IMHO quite reasonable requirement:


index.zul
<?xml version="1.0" encoding="UTF-8"?>
<zk>
<zscript><![CDATA[
int rowCount = 100;
int colCount = 50;

String[] rows = new String[rowCount];
for (int i=0;i<rowCount; i++)
rows[i] = "Row" + i;
String[] cols = new String[colCount];
for (int i=0;i<colCount; i++)
cols[i] = "Col" + i;
]]></zscript>
<listbox width="100%" height="100%">
<listhead>
<listheader forEach="${cols}" label="${each}" width="50px" />
</listhead>
<listitem forEach="${rows}">
<listcell forEach="${cols}">
${each}
</listcell>
</listitem>
</listbox>
</zk>

Even on modern browser the client rendering takes 0,5 sec, but the main problem arise with IE8 (unfortunately out client uses this browser). This simple page shows a message: "A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive. Do you want to abort the script?", which is very confusing for end users.

We have paging on 100 rows, decrease of this number is not a solution for us. ROD was not a solution in the past as well – rendering of rows was too slow (and now it is EE only).

Is there any other way how to increase the performance? We need a “listbox” behavior, but we don’t need server and client widgets components for most of the cells.

Kind Regards,

Jiri Bubnik

delete flag offensive retag edit

5 Replies

Sort by » oldest newest

answered 2012-11-29 09:34:45 +0800

claudioveryant gravatar image claudioveryant
9 1

Try to see

http://support.microsoft.com/kb/175500/en-us

Claudio

link publish delete flag offensive edit

answered 2012-11-29 11:44:22 +0800

edudant gravatar image edudant
219 1 1 1
zk.datalite.cz

Thank you, but this is not a solution - I do not have access to our client computers and it does not solve the slow response anyway.

Btw. I have made some tests with ROD from EE edition and although the initial response is much better, but I get the timeout message after scroll to not rendered rows.

What we need is to speed up rendering (at least on IE8) or maybe some way to directly generate HTML for listitem (something similar to native namespace)

link publish delete flag offensive edit

answered 2012-12-07 08:01:26 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Hi Jiri,

You can try use ListModel and ListitemRenderer to render items in java code (so the ROD and other render mechanism will work) instead of render all item by the forEach, please refer to the sample below:

<?xml version="1.0" encoding="UTF-8"?>
<zk>
	<zscript><![CDATA[
		import java.util.List;
		import java.util.ArrayList;

		int colCount = 50;
		int rowCount = 100;
		List l = new ArrayList();
		for (int i = 0; i < rowCount; i++) {
			String[] strs = new String[50];
			for (int j = 0; j < colCount; j++) {
				strs = "col " + j;
			}
			l.add(strs);
		}

		ListModel model = new ListModelList(l);

		ListitemRenderer renderer = new ListitemRenderer () {
			public void render (Listitem li, Object data, int index) {
				String[] strs = (String[]) data;
				for (String str : strs) {
					new Listcell(str).setParent(li);
				}
			}
		};
		String[] cols = new String;
        for (int i=0;i<colCount; i++)
          cols<i > = "Col" + i;
	]]></zscript>
	<listbox hflex="1" vflex="1" model="${model}"
		itemRenderer="${renderer}">
		<listhead>
			<listheader forEach="${cols}" label="${each}" width="50px" />
		</listhead>
	</listbox>
</zk>

For more information, please refer to the ZK Performance tips and let us know if there are any further issues.

http://books.zkoss.org/wiki/ZK%20Developer's%20Reference/Performance%20Tips

Regards,
Ben

link publish delete flag offensive edit

answered 2012-12-07 10:38:26 +0800

edudant gravatar image edudant
219 1 1 1
zk.datalite.cz

Hi Ben,

thank you for your ideas, but I am afraid this will not solve the issue either. Our problem is the client side rendering speed (javascript on browser). Your solution changes only how the component tree is built (btw. the server processing will be very similar to ZUL only example), but the client side remains the same.

Jiri

link publish delete flag offensive edit

answered 2012-12-07 14:48:21 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Hi Jiri,

I've tested it and the 'slow script' message appeared with your sample but disappeared with my sample, please give it a try.

Using model (and renderer as needed) and the server side ROD mechanism will render the required part (might 20 rows at a time) to client side, and then render other required rows as needed based on the size.

You can also try use smaller size (e.g., width="100%" height="250px") to reduce the required rows to render.

Regards,
Ben

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2012-11-29 09:16:51 +0800

Seen: 219 times

Last updated: Dec 07 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More