-
Bug
-
Resolution: Fixed
-
Normal
-
8.5.2.1
-
Security Level: Jimmy
the loop calculating the header/body/footer column widths is forcing CSS reflows in a loop
https://github.com/zkoss/zk/blob/v8.5.2.1/zul/src/archive/web/js/zul/mesh/MeshWidget.js#L865-L874
reading offsetWidth after a style update forces CSS reflows (especially expensive when there are many columns)
this is avoidable by caching the offsetWidths before adjusting the styles
e.g.:
var cachedOffsetWidths = {}; for (var w = head.firstChild, bodyCol = bdcol; w && bodyCol; w = w.nextSibling) { cachedOffsetWidths[w.uuid] = w.$n().offsetWidth; bodyCol = bodyCol.nextSibling; } for (var w = head.firstChild, wd; w && bdcol; w = w.nextSibling) { var wwd = cachedOffsetWidths[w.uuid]; //use the cached width
attached an example showing the effect grid-css-reflow-loop.zul
performance recording without width caching:
performance recording with width caching (saves 2.3 seconds in this trivial example, but also indicates the next problem area which might be addressed in a similar way):
- relates to
-
ZK-4470 Improve the performance of textSize()
- Closed