Hi,
I got a grid with a detail and inside this detail, 3 tabs: the first one with only a bean, the second one with some labels and 5 listbox and the third one with another listbox.
This grid and all listbox inside are filled with ListModelList. I use the same variables to all details because only one details is going to be open, so when the user opens another detail, the first one is closed and the variables cleared.
I realised that if I use pageSize="10" or "25" for this grid, all works fine. But if I use a pagesize of 100 or more, rendering becomes very slow. I tested processes that obtain the data and all of them last the same whatever pagesize is, so I suppose render is the cause.
In this case, what is the best way to render the data in order to keep a good render time?
I attach the structure of the .zul:
Tags
People
Badges
Help
<grid id="GRIDCenso" sclass="GRIDCenso" mold="paging" pagingPosition="bottom" span="true" sizedByContent="true" pageSize="10" width="100%" xmlns:a="client/attribute" a:data-scrollable="false" emptyMessage="@load(vm.censoEM)"
model="@load(vm.beans)">
<custom-attributes org.zkoss.zul.grid.autohidePaging="false"/>
<custom-attributes org.zkoss.zul.image.preload="true"/>
<columns menupopup="auto-keep" sizable="true">
</columns>
<rows >
<template name="model" var="item" visible="false">
<row value="@load(item)" onClick="@command('SeleccionRowEstilo',evento=event.getTarget())" >
<detail open="false" onCustom="@command('abrirDetalle',evento=event.getTarget())">
<hlayout visible="@load(vm.valoracionClinica)" >
<div sclass="details" hflex="1">
<tabbox sclass="nav_tabs" style="overflow-y:auto;" >
<tabs >
<tab label="@load(vm.TTabMotivoIngr)" onCustom="@command('mostrarValoracionIngreso',evento=event.getTarget())"/>
<tab label="@load(vm.TTabDiagnos)" onCustom="@command('mostrarDiagnosticos',evento=event.getTarget())"/>
<tab label="@load(vm.TTabPlanTerape)" onCustom="@command('mostrarPlanTerapeutico',evento=event.getTarget())"/>
</tabs>
<tabpanels>
<!-- MOTIVO INGRESO -->
<tabpanel>
<vlayout >
<label value="@load(vm.TMotivo)" style="color:#0078c1"/>
<div class="well well-lg" ><label value="@load(vm.motivoIngresoBean.motivo)"/></div>
<label value="@load(vm.TEnfermedadActual)" style="color:#0078c1"/>
<div class="well well-lg"><label value="@load(vm.motivoIngresoBean.enfermedad)"/></div>
<label style="color:#0078c1">_______________________________________</label>
<label value="@load(vm.motivoIngresoBean.facultativoFechaHora)" style="color:#0078c1"/>
</vlayout>
</tabpanel>
<!-- DIAGNOSTICO -->
<tabpanel>
<vlayout>
<hlayout><div width="65px"><label value="@load(vm.TPrincipal)" style="color:#0078c1"/></div><label value="@load(vm.diagnosticoPrincipal.codigo)"/><label value="@load(vm.diagnosticoPrincipal.descripcion)"/></hlayout >
<hlayout><div width="65px"><label value="POA" style="color:#0078c1"/></div><label value="@load(vm.diagnosticoPrincipal.POA)"/></hlayout>
<listbox sizedByContent="true" span="1" width="99%" xmlns:ca="client/attribute" ca:data-scrollable="false" model="@load(vm.listaBeansDiagnosticosSecundarios)" emptyMessage="@load(vm.diagnosticoSecundarioEM)" visible="@load(vm.visibleDiagnosticoS)">
<listhead>
<listheader label="@load(vm.LHCodigo)" sort="auto(codigo)" hflex="min" visible="@load(!vm.dispositivoMovil)"/>
<listheader label="@load(vm.LHDiagnosticoSec)" sort="auto(descripcion)"/>
<listheader label="POA" hflex="min" sort="auto(POA)"/>
</listhead>
<template name="model" var="item">
<listitem >
<listcell label="@load(item.codigo)" />
<listcell label="@load(item.descripcion)" />
<listcell label="@load(item.POA)" />
</listitem>
</template>
</listbox>
<hlayout style="margin-top:10px"><div width="136px"><label value="@load(vm.TLugarAccidente)" style="color:#0078c1"/></div><label value="@load(vm.datosAccidente.descripcion)"/></hlayout>
<hlayout><div width="136px"><label value="@load(vm.TCausaExterna)" style="color:#0078c1"/></div><label value="@load(vm.causaExterna.descripcion)"/></hlayout>
<hlayout><div width="136px"><label value="@load(vm.TPOACausaExterna)" style="color:#0078c1"/></div><label value="@load(vm.causaExterna.POA)"/></hlayout>
<listbox sizedByContent="true" span="1" width="99%" emptyMessage="@load(vm.otrasCausasExternasEM)" model="@load(vm.listaBeansOtrasCausasExternas)" visible="@load(vm.visibleOtrasCausasEx)">
<custom-attributes org.zkoss.zul.nativebar="false"/>
<listhead>
<listheader label="@load(vm.LHCodigo)" sort="auto(codigo)" hflex="min" visible="@load(!vm.dispositivoMovil)"/>
<listheader label="@load(vm.LHOtrasCausasExt)" sort="auto(descripcion)"/>
<listheader label="POA" hflex="min" sort="auto(POA)"/>
</listhead>
<template name="model" var="item">
<listitem >
<listcell label="@load(item.codigo)" />
<listcell label="@load(item.descripcion)" />
<listcell label="@load(item.POA)" />
</listitem>
</template>
</listbox>
<hlayout style="margin-top:10px"><label value="@load(vm.TProcedimientoPrincipal)" style="color:#0078c1"/><label value="@load(vm.procedimientoPrincipal.codigo)" style="padding-left:12px"/><label value="@load(vm.procedimientoPrincipal.descripcion)"/></hlayout>
<listbox sizedByContent="true" span="1" width="99%" emptyMessage="@load(vm.otrosProcedimientosEM)" xmlns:ca="client/attribute" ca:data-scrollable="false" model="@load(vm.listaBeansOtrosProcedimientos)" visible="@load(vm.visibleOtrosProcedimientos)">
<listhead>
<listheader label="@load(vm.LHCodigo)" sort="auto(codigo)" hflex="min" visible="@load(!vm.dispositivoMovil)"/>
<listheader label="@load(vm.LHOtrosProcedimientos)" sort="auto(descripcion)"/>
<listheader label="POA" hflex="min" sort="auto(POA)"/>
</listhead>
<template name="model" var="item">
<listitem >
<listcell label="@load(item.codigo)" />
<listcell label="@load(item.descripcion)" />
<listcell label="@load(item.POA)" />
</listitem>
</template>
</listbox>
<hlayout style="margin-top:10px"><label value="@load(vm.TProcedimientoExteriorPrincipal)" style="color:#0078c1"/><label value="@load(vm.procedimientoExteriorPrincipal.codigo)" style="padding-left:12px"/><label value="@load(vm.procedimientoExteriorPrincipal.descripcion)"/></hlayout>
<listbox sizedByContent="true" span="1" width="99%" emptyMessage="@load(vm.otrosProcedimientosExternosEM)" model="@load(vm.listaBeansOtrosProcedimientosExteriores)" visible="@load(vm.visibleOtrosProcedimientosExt)">
<custom-attributes org.zkoss.zul.nativebar="false"/>
<listhead>
<listheader label="@load(vm.LHCodigo)" sort="auto(codigo)" hflex="min" visible="@load(!vm.dispositivoMovil)"/>
<listheader label="@load(vm.LHOtrosProcedimientosExt)" sort="auto(descripcion)"/>
</listhead>
<template name="model" var="item">
<listitem >
<listcell label="@load(item.codigo)" />
<listcell label="@load(item.descripcion)" />
</listitem>
</template>
</listbox>
<listbox sizedByContent="true" span="1" width="99%" emptyMessage="@load(vm.morfologiasNeoplasiaEM)" model="@load(vm.listaBeansMorfologiasNeoplasia)" visible="@load(vm.visibleMorfologiasNeoplasias)">
<custom-attributes org.zkoss.zul.nativebar="false"/>
<listhead>
<listheader label="@load(vm.LHCodigo)" sort="auto(codigo)" hflex="min" visible="@load(!vm.dispositivoMovil)"/>
<listheader label="@load(vm.LHMorfologiasNeoplasias)" sort="auto(descripcion)"/>
</listhead>
<template name="model" var="item">
<listitem >
<listcell label="@load(item.codigo)" />
<listcell label="@load(item.descripcion)"/>
</listitem>
</template>
</listbox>
</vlayout>
</tabpanel>
<!-- PLAN TERAPEUTICO -->
<tabpanel >
<vlayout>
<hlayout><div width="65px"><label value="@load(vm.TPrincipal)" style="color:#0078c1"/></div><label value="@load(vm.diagnosticoPrincipalPT.codigo)"/><label value="@load(vm.diagnosticoPrincipalPT.descripcion)"/></hlayout>
<listbox sizedByContent="true" mold="paging" pagingPosition="bottom" autopaging="true" pageSize="10" span="true"
width="99%" height="95%" xmlns:ca="client/attribute" ca:data-scrollable="false" model="@load(vm.listaBeansPlanTerapeutico)"
emptyMessage="@load(vm.planTerapeuticoEM)" >
<custom-attributes org.zkoss.zul.listbox.autohidePaging="false"/>
<listhead menupopup="auto-keep" sizable="true">
<listheader label="@load(vm.LHFechaDeclaracionPT)" tooltiptext="@load(vm.fechaDeclaracionPTTool)" sort="auto(fechaDeclaracion)" onColVisiChanged="@command('colVisiChangedPT', index=0, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[0])"/>
<listheader label="@load(vm.LHHoraDeclaracionPT)" tooltiptext="@load(vm.horaDeclaracionPTTool)" sort="auto(horaDeclaracion)" width="90px" onColVisiChanged="@command('colVisiChangedPT', index=1, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[1])"/>
<listheader label="@load(vm.LHAreaPT)" sort="auto(area)" onColVisiChanged="@command('colVisiChangedPT', index=2, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[2])"/>
<listheader label="@load(vm.LHSintomaGuiaPT)" tooltiptext="@load(vm.sintomaGuiaPTTool)" sort="auto(sintomaGuia)" width="85px" onColVisiChanged="@command('colVisiChangedPT', index=3, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[3])"/>
<listheader label="@load(vm.LHProblemaPrioritarioPT)" tooltiptext="@load(vm.problemaPrioritarioPTTool)" sort="auto(problemaPrioritario)" onColVisiChanged="@command('colVisiChangedPT', index=4, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[4])"/>
<listheader label="@load(vm.LHProblemaPT)" sort="auto(problema)" onColVisiChanged="@command('colVisiChangedPT', index=5, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[5])"/>
<listheader label="@load(vm.LHObjetivoPT)" sort="auto(objetivo)" onColVisiChanged="@command('colVisiChangedPT', index=6, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[6])"/>
<listheader label="@load(vm.LHTratamientoPT)" sort="auto(tratamiento)" onColVisiChanged="@command('colVisiChangedPT', index=7, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[7])"/>
<listheader label="@load(vm.LHFechaUltimoSeguimientoPT)" tooltiptext="@load(vm.ultimoSeguimientoPTTool)" sort="auto(fechaUltimoSeguimiento)" class="minWidthUltSeg" onColVisiChanged="@command('colVisiChangedPT', index=8, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[8])"/>
<listheader label="@load(vm.LHResultadoPT)" sort="auto(resultado)" class="minWidthResultado" onColVisiChanged="@command('colVisiChangedPT', index=9, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[9])"/>
<listheader label="@load(vm.LHFechaResultadoPT)" tooltiptext="@load(vm.fechaResultadoPTTool)" sort="auto(fechaResultado)" class="minWidthFechaRes" onColVisiChanged="@command('colVisiChangedPT', index=10, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[10])"/>
<listheader label="@load(vm.LHHoraResultadoPT)" tooltiptext="@load(vm.horaResultadoPTTool)" sort="auto(horaResultado)" class="minWidthHoraRes" onColVisiChanged="@command('colVisiChangedPT', index=11, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[11])"/>
</listhead>
<template name="model" var="item">
<listitem >
<listcell label="@load(item.fechaDeclaracion)" />
<listcell label="@load(item.horaDeclaracion)" />
<listcell label="@load(item.area)" />
<listcell label="@load(item.sintomaGuia)" />
<listcell label="@load(item.problemaPrioritario)" />
<listcell label="@load(item.problema)" tooltiptext ="@load(item.problema)" style="@load(item.estilo)"/>
<listcell label="@load(item.objetivo)" />
<listcell label="@load(item.tratamiento)" />
<listcell label="@load(item.fechaUltimoSeguimiento)" class="minWidthUltSeg"/>
<listcell label="@load(item.resultado)" class="minWidthResultado"/>
<listcell label="@load(item.fechaResultado)" class="minWidthFechaRes"/>
<listcell label="@load(item.horaResultado)" class="minWidthHoraRes"/>
</listitem>
</template>
</listbox>
</vlayout>
</tabpanel>
</tabpanels>
</tabbox>
</div>
</hlayout>
<vlayout visible="@load(!vm.valoracionClinica)" >
<div >
<a iconSclass="z-icon-plus z-icon-lg" tooltiptext="_Nuevo" sclass="aHerramientas"></a>
<a iconSclass="z-icon-pencil z-icon-lg" tooltiptext="_Editar" sclass="aHerramientas"></a>
<a iconSclass="z-icon-ellipsis-v z-icon-lg" tooltiptext="_Opciones" sclass="aHerramientas"></a>
<a iconSclass="z-icon-trash z-icon-lg" tooltiptext="_Borrar" sclass="aHerramientas"></a>
</div>
<div visible="false" sclass="cursoEvolutivo" style="padding:10px">
<div style="padding-bottom:5px;display:inline-block" width="100%">
<checkbox label="Nota de especial atención"/>
<checkbox label="Incluir apunte en informes"/>
<checkbox label="Notificación a la familia"/>
</div>
<ckeditor width="100%" height="100%" customConfigurationsPath="/recursos/js/BarrasCkeditor/CKBarraMinima.js" toolbar="MiToolbar" >
</ckeditor>
<hlayout style="padding-top:5px;">
<button label="Guardar"/>
<button label="Cancelar"/>
</hlayout>
</div>
<div sclass="cursoEvolutivo" >
<div style="border-bottom:1px solid #0078c1;padding:10px;display:table;" width="100%" >
<div style="display:table-cell;width:33%">
<label value="13/07/2019 9:15:00"/>
<label value="Usuario creador sts"/>
</div>
<div style="display:table-cell;width:33%;text-align:center" ><label value="Nota de especial atención"/></div>
<div style="display:table-cell;width:33%;text-align:right"><label value="PALLARES FERNÁNDEZ,ESTHER"/></div>
</div>
<div style="padding:10px;" height="99%" width="99%"><html height="99%" width="99%" /></div>
<div style="padding:10px;" height="99%" width="99%"><html height="99%" width="99%" /></div>
<div style="padding:10px;" height="99%" width="99%"><html height="99%" width="99%" /></div>
<div style="padding:10px;" height="99%" width="99%"><html height="99%" width="99%" /></div>
</div>
</vlayout>
</detail>
<cell><label value="@load(item.cama)"/></cell>
<cell><label value="@load(item.NHC)"/></cell>
<cell style="@load(item.estiloAislamiento)"><label value="@load(item.nombrePaciente)" tooltiptext="@load(item.motivoAislamiento)"/></cell>
<cell><label value="@load(item.edad)"/></cell>
<cell><label value="@load(item.sexo)"/></cell>
<cell style="@load(item.estilo)"><label value="@load(item.nivelDescripcion)" tooltiptext="@load(item.nivelDescripcion)"/></cell>
<cell><label value="@load(item.especialidad)"/></cell>
<cell><label value="@load(item.estadoIngreso)"/></cell>
<cell><label value="@load(item.estadoPrescripcion)"/></cell>
<cell><image src="@load(item.situacionPrescipcion)" tooltiptext="@load(item.situacionPrescipcionDescripcion)"/></cell>
<cell><label value="@load(item.estanciasString)"/></cell>
</row>
</template>
</rows>
</grid>
If the bottleneck is the component rendering time then the solution is to reduce the number of components to render. You should make the page render as few as components at first, render those necessary, visible components first, and render others when it's needed.
https://www.zkoss.org/wiki/ZKDeveloper%27sReference/PerformanceTips/Listbox,GridandTreeforHugeData/TurnonRenderon_Demand So ZK will render those components on the current page since the grid is in "paging" mold.
<if>original: <hlayout visible="@load(vm.valoracionClinica)" >
better: <if test="@load(vm.valoracionClinica)" >
Then when vm.valoracionClinica is false, ZK doesn't create its child components which saves the rendering time.
Since each tabpanel in the <detail> contains high-rendering-cost child components, it's better to create them only when a user selects the tab. Please refer to
https://www.zkoss.org/wiki/ZKDeveloper%27sReference/UIComposing/ZUML/On-demandEvaluation#CreateaTabpanelafterItsTabis_Selected
@load with @initI saw you use lots of @load like
<listcell label="@load(item.codigo)" />
If such a label doesn't change dynamically, then it's better to use @init. Then it saves some time and memory and avoids ZK creating unnecessary tracking nodes.
Hi!
Thanks, really good tips!
One thing more, I would like to know if the right way to replace "visible" with < if > is:
Original:
<hlayout visible="@load(vm.valoracionClinica)">
</hlayout>
Better:
<hlayout>
<if test="@load(vm.valoracionClinica)" />
</hlayout>
Asked: 2020-10-27 01:35:14 +0800
Seen: 17 times
Last updated: Oct 27 '20