-
Bug
-
Resolution: Fixed
-
Normal
-
8.6.0.1
-
Security Level: Jimmy
-
potentially all browsers besides IE8
retest / consider removing the implementation of ZK-1885 for modern browsers
consider the simple example:
<zk> <div vflex="1" width="100%" style="border: 1px solid red;"> <vlayout vflex="1" hflex="1"> <forEach begin="1" end="5" varStatus="outer"> <hlayout vflex="1" hflex="1"> <forEach begin="1" end="10" varStatus="inner"> <div hflex="1"> ${outer.index}-${inner.index} </div> </forEach> </hlayout> </forEach> </vlayout> </div> </zk>
manually counting the "forced reflow" warnings in chrome developer tools resulted in ~150 warnings
more complex examples easily result in 1000s of reflows = bad performance
Where possible first collect read styles of multiple/all affected widgets, then update styles (only if needed!) in a separate loop.
Avoid alternating between read/update/read/update styles
Most prominent example in zk.Widget.resetSize
https://github.com/zkoss/zk/blob/master/zk/src/archive/web/js/zk/widget.js#L3367-L3372
Here n.scrollTop/n.ScrollLeft trigger a css reflow followed by an immediate style update.
The next call to resetSize will reflow/update again
A nice collection of what might cause a reflow is summarized here: What forces layout / reflow