Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

perf(md-tooltip) use MutationObserver instead of watcher if available #7822

Closed
wants to merge 1 commit into from
Closed

perf(md-tooltip) use MutationObserver instead of watcher if available #7822

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 35 additions & 6 deletions src/components/tooltip/tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,19 +92,42 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
content.css('transform-origin', origin);
}

function onVisibleChanged (isVisible) {
if (isVisible) showTooltip();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing braces
(here and elsewhere)

else hideTooltip();
}

function configureWatchers () {
scope.$on('$destroy', function() {
scope.visible = false;
element.remove();
angular.element($window).off('resize', debouncedOnResize);
});

scope.$watch('visible', function (isVisible) {
if (isVisible) showTooltip();
else hideTooltip();
});
if (element[0] && 'MutationObserver' in $window) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why use MutationObserver instead of $attrs.$observe( ) ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While $observe is technically faster than $watch since it's a string comparison vs an object/expression evaluation, both are checked synchronously every $digest.

MutationObserver is handled by the browser and signaled asynchronously.

var attributeObserver = new MutationObserver(function(mutations) {
mutations
.forEach(function (mutation) {
if (mutation.attributeName === 'md-visible') {
if (!scope.visibleWatcher)
scope.visibleWatcher = scope.$watch('visible', onVisibleChanged );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you end up adding multiple watchers for the same thing here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I use the variable 'visibleWatcher' for this reason. If the value is undefined/null, then there is no watcher. If it isn't null, then it means the object already has a watcher and a second shouldn't be created.

}
if (mutation.attributeName === 'md-direction') {
updatePosition(scope.direction);
}
});
});

attributeObserver.observe(element[0], { attributes: true});

if (attr.hasOwnProperty('mdVisible')) // build watcher only if mdVisible is being used
scope.visibleWatcher = scope.$watch('visible', onVisibleChanged );

scope.$watch('direction', updatePosition );
}
else { // MutationObserver not supported
scope.visibleWatcher = scope.$watch('visible', onVisibleChanged );
scope.$watch('direction', updatePosition );
}
}

function addAriaLabel () {
Expand Down Expand Up @@ -194,9 +217,15 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
$timeout(function() {
scope.visible = setVisible.value;
setVisible.queued = false;
if (!scope.visibleWatcher)
onVisibleChanged(scope.visible);
}, scope.delay);
} else {
$mdUtil.nextTick(function() { scope.visible = false; });
$mdUtil.nextTick(function() {
scope.visible = false;
if (!scope.visibleWatcher)
onVisibleChanged(false);
});
}
}
}
Expand Down