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

CSS Performance when adding multiple components

XMLWordPrintable

    • ZK 9.0.1 S1

      Steps to Reproduce

      run the attached example add-multiple.zul
      click the 4 buttons and profile/compare the render timings

      Current Result

      the first 2 buttons take ~1.3 seconds to render/resize
      the "workaround" buttons only take ~40ms

      Expected Result

      equal/equivalent render times, if possible

      Debug Info

      Currently only happens on chrome.

      The listbox with many rows/columns is only added to highlight the performance drain, which gets worse in more complex UIs.

      Root Cause

      the components are added one by one, calling firesized after each component, leading to "Forced reflows"

      Workaround

      Appending the components into an initially invisible component or as a batch with a common parent avoids the loop of "Forced reflows"

        1. add-multiple.zul
          2 kB
          cor3000
        2. image-2020-03-06-16-19-51-626.png
          86 kB
          Leon03
        3. image-2020-03-06-16-24-08-817.png
          86 kB
          Leon03
        4. screenshot-1.png
          72 kB
          cor3000

            Leon03 Leon03
            cor3000 cor3000
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 2 days
                2d
                Remaining:
                Remaining Estimate - 2 days
                2d
                Logged:
                Time Spent - Not Specified
                Not Specified