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

Frozen scroll performance

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 7.0.8, 8.0.3
    • Fix Version/s: 8.5.0
    • Component/s: Components
    • Security Level: Jimmy
    • Environment:

      basically all browsers, but especially IE is suffering the most

      Description

      Steps to Reproduce

      Run the attachment (frozen-performance-no-patch.zul) and use the horizontal scrollbar.

      Actual Result

      in Chrome it is noticeably slower to scroll to the right (scrolling back to the left is smooth)
      IE11 has an overall terrible scroll performance

      Expected Result

      Better performance, at least consistent speed between left and right scrolling

      Debug Info

      https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/
      the steps 6, 7 and 9 described in the document help to reduce the number of CSS reflows
      by batching the updates onto hidden DOM elements, and by throttling highly frequent (smooth) scroll events causing additional overhead (esp in IE)

      Root Cause

      the updating loop in Frozen._doScrollNow (Line 329ff) performs both, css updates and reads offsetWidth of affected elements, resulting in repeated reflows, those updates can be batched and performed in the end (while hiding the mesh during the update batch)

      the method Frozen._doScroll can throttle high frequent smooth scroll events to avoid additional overhead

      both ideas are implemented in frozen-performance-patch.js and the significant performance difference can be observed in frozen-performance.zul

      Workaround

      apply the patch to affected pages:
      <?script src="frozen-performance-patch.js"?>

        Attachments

        1. frozen-performance.zul
          0.7 kB
          cor3000
        2. frozen-performance-no-patch.zul
          0.7 kB
          cor3000
        3. frozen-performance-patch.js
          6 kB
          cor3000

          Activity

            People

            Assignee:
            DevChu DevChu
            Reporter:
            cor3000 cor3000
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 hours
                3h