mediawiki.notification: Improve scroll performance
authorTimo Tijhof <krinklemail@gmail.com>
Tue, 29 Nov 2016 21:48:15 +0000 (13:48 -0800)
committerKrinkle <krinklemail@gmail.com>
Tue, 29 Nov 2016 22:12:15 +0000 (22:12 +0000)
commitf1ac8022d503a904dc66685e9b979814730ef3bc
treee177f262a8aaf4a87046fcb5d721b8d59e7d89d1
parentf7acb055411098aa1400981e46b88a79268622dd
mediawiki.notification: Improve scroll performance

This fixes the problem with random scroll lag when on a page that had
1 or more notifications at some point. The scroll handler was fairly
expensive and kept being called on every scroll event.

The actual frame where a frame is detected does take more than 16ms to
paint but that's unavoidable. It only happens for 1 or 2 frames, which
is perfectly within the response guidelines for RAIL.

https://developers.google.com/web/fundamentals/performance/rail

(MacBook Pro, Latest Chrome, CPU throttle 5x)

1. Before
* Duration of no-change scroll event
  (not crossing offset.top in ither direction) ~5ms
* Duration of changed scroll event
  (crossing the offset.top and swapping classes) ~10ms
* Paint:
  - 16ms for no-change frames (50-60fps)
  - 40ms for frames that paint a change. (25-30fps)

2. After storing isFloating as boolean and not checking
   className if nothing changed.
* no-change scroll event: ~0.13ms
* changed scroll event: ~2ms
* Paint:
  - 15ms for no-change frame (60fps)
  - 33ms for no-change frame (30fps)

3. After changing $window.scrollTop() to window.pageYOffset.
* no-change scroll event: 15μs (0.015ms)
* changed scroll event: ~1ms
* Paint:
  - 11ms for no-change frame (60fps)
  - 20ms for no-change frame (48fps)

Change-Id: Ia48b00cd0834700ce79e72d4599c51ff8c6179b5
resources/src/mediawiki/mediawiki.notification.js