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

forced CSS reflow loop in MeshWidget

    XMLWordPrintable

    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

          Issue Links

            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