Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4066

forced CSS reflow loop in MeshWidget

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 8.5.2.1
    • Fix Version/s: 8.6.1
    • Component/s: Components
    • Security Level: Jimmy
    • Labels:

      Description

      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):

        Attachments

          Activity

            People

            • Assignee:
              rudyhuang rudyhuang
              Reporter:
              cor3000 cor3000
            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 1 day
                1d
                Remaining:
                Time Spent - 6 hours Remaining Estimate - 2 hours
                2h
                Logged:
                Time Spent - 6 hours Remaining Estimate - 2 hours
                6h