InkRippleService causes poor performance for clickable list items

[bvaughn]

I recently spent some time debugging a performance problem with a list of clickable items (mdListItem with sibling ngClick directive). Using the Chrome Timeline tool I saw that nearly all of the delay was spent "recalculating style" (the purple boxes):

Drilling down further I noticed that every one of these style calculations was reported as "forced" by Chrome, and attributed to the InkRippleService's use of window.getComputedStyle:

    var rippleSize,
        controller = element.controller('mdInkRipple') || {},
        counter = 0,
        ripples = [],
        states = [],
        isActiveExpr = element.attr('md-highlight'),
        isActive = false,
        isHeld = false,
        node = element[0],
        rippleSizeSetting = element.attr('md-ripple-size'),
        color = parseColor(element.attr('md-ink-ripple')) || parseColor(options.colorElement.length && $window.getComputedStyle(options.colorElement[0]).color || 'rgb(0, 0, 0)');

Apparently the presence of ng-click causes the list items to use the ink rippled effect (see issue #904) which then results in this forced style calculation. Could this calculation not be deferred until the item was actually clicked (aka when the ripple effect was actually required)?

FYI removing the ng-click attribute from my md-list-item reduced the event handler execution time from 180ms to 54ms.

[ThomasBurleson]

@bvaughn - really nice track-down effort here. The good news is a that we have a complete rewrite of Ripples pending in #4166. A merge to master is planned soon.

[bvaughn]

Thank you Thomas :)

I'm happy to hear that! Thanks for the update.