Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello! Anyone worked with big dynamic popup menu? It take many time for ZK when we get many elements. For this structure (below) it can take 10+ mins for 600 combined elements. ZK have instruments for improve performance or what can be done?
<menu label="Put data"
visible="@load(vm.ownMu)" image="/images/documents.png">
<menupopup
children="@bind(vm.reportModel) @template(each.childCount eq 0?'menuitem':'menu')">
<template name="menu" var="menu">
<menu label="@bind(menu.name)"
visible="@load(menu.visible)">
<menupopup
children="@bind(menu.children) @template(each.childCount eq 0?'menuitem':'menu')" />
</menu>
</template>
<template name="menuitem" var="item">
<menuitem
label="@bind(item.report ? ''.concat(item.reportData.idreport).concat('. ').concat(item.reportData.shortnamereport):item.name)"
onClick="@command(item.report ? 'reportClicked' : '', node=item.reportData)"
image="@bind(item.report ? '/images/Excel-16.gif' : '')"
disabled="@load(not vm.reader)" visible="@load(item.visible)" />
</template>
</menupopup>
</menu>
Could be a children binding issue. Could you replace it with shadow <forEach>?
Ref: * http://books.zkoss.org/zkessentials-book/master/shadowcomponents/iteratea_collection.html
I try to create 600 menuitems in a menupop, it takes a bit longer (12s) to load that pages. My example is based on An example of dynamic menu bar in http://books.zkoss.org/zk-mvvm-book/8.0/databinding/childrenbinding.html 
According to developer tool, the page loading time is bit longer but menu popup shows in a blink.
So which action takes 10 min? loading a page or pop up a menu? If loading pages takes long, I suggest you do a server profiling to know which method takes the most of time.
Is this a real use case or do you just testing the performance? Because I can't imagine how a human operates 5 levels of a menu with 600 menu items.
Asked: 2019-05-08 18:30:54 +0800
Seen: 35 times
Last updated: Sep 22 '22
First thing i would do is use @init or @load in stead of the @bind where it's not needed. It produces more overhead
chillworld ( 2019-05-14 02:34:32 +0800 )edit