invisi/angular.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

perf(ngAnimate): listen for document visibility changes

Browse Source 
Accessing the document for the hidden state is costly for
platforms like Electron. Instead, listen for visibilitychange
and store the state.

Closes #14066
This commit is contained in:
Martin Staffa
2016-04-26 14:01:09 -07:00
parent f31586db41
commit aa28e48e17
8 changed files with 101 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/AngularPublic.js
+2
View File
@@ -64,6 +64,7 @@
$CacheFactoryProvider,
$ControllerProvider,
$DocumentProvider,
$$IsDocumentHiddenProvider,
$ExceptionHandlerProvider,
$FilterProvider,
$$ForceReflowProvider,
@@ -226,6 +227,7 @@ function publishExternalAPI(angular) {
$cacheFactory: $CacheFactoryProvider,
$controller: $ControllerProvider,
$document: $DocumentProvider,
$$isDocumentHidden: $$IsDocumentHiddenProvider,
$exceptionHandler: $ExceptionHandlerProvider,
$filter: $FilterProvider,
$$forceReflow: $$ForceReflowProvider,
src/ng/animateRunner.js
+3 -7
View File
@@ -28,8 +28,8 @@ var $$AnimateAsyncRunFactoryProvider = function() {
};
var $$AnimateRunnerFactoryProvider = function() {
this.$get = ['$q', '$sniffer', '$$animateAsyncRun', '$document', '$timeout',
function($q, $sniffer, $$animateAsyncRun, $document, $timeout) {
this.$get = ['$q', '$sniffer', '$$animateAsyncRun', '$$isDocumentHidden', '$timeout',
function($q, $sniffer, $$animateAsyncRun, $$isDocumentHidden, $timeout) {
var INITIAL_STATE = 0;
var DONE_PENDING_STATE = 1;
@@ -81,11 +81,7 @@ var $$AnimateRunnerFactoryProvider = function() {
this._doneCallbacks = [];
this._tick = function(fn) {
var doc = $document[0];
// the document may not be ready or attached
// to the module for some internal tests
if (doc && doc.hidden) {
if ($$isDocumentHidden()) {
timeoutTick(fn);
} else {
rafTick(fn);
src/ng/document.js
+26
View File
@@ -30,3 +30,29 @@ function $DocumentProvider() {
return jqLite(window.document);
}];
}
/**
* @private
* Listens for document visibility change and makes the current status accessible.
*/
function $$IsDocumentHiddenProvider() {
this.$get = ['$document', '$rootScope', function($document, $rootScope) {
var doc = $document[0];
var hidden = doc && doc.hidden;
$document.on('visibilitychange', changeListener);
$rootScope.$on('$destroy', function() {
$document.off('visibilitychange', changeListener);
});
function changeListener() {
hidden = doc.hidden;
}
return function() {
return hidden;
};
}];
}
src/ngAnimate/animateQueue.js
+4 -2
View File
@@ -97,8 +97,10 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$HashMap',
'$$animation', '$$AnimateRunner', '$templateRequest', '$$jqLite', '$$forceReflow',
'$$isDocumentHidden',
function($$rAF, $rootScope, $rootElement, $document, $$HashMap,
$$animation, $$AnimateRunner, $templateRequest, $$jqLite, $$forceReflow) {
$$animation, $$AnimateRunner, $templateRequest, $$jqLite, $$forceReflow,
$$isDocumentHidden) {
var activeAnimationsLookup = new $$HashMap();
var disabledElementsLookup = new $$HashMap();
@@ -331,7 +333,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
var isStructural = ['enter', 'move', 'leave'].indexOf(event) >= 0;
var documentHidden = $document[0].hidden;
var documentHidden = $$isDocumentHidden();
// this is a hard disable of all animations for the application or on
// the element itself, therefore there is no need to continue further
test/ng/animateRunnerSpec.js
+5 -6
View File
@@ -163,14 +163,13 @@ describe("$$AnimateRunner", function() {
}));
it("should use timeouts to trigger async operations when the document is hidden", function() {
var doc;
var hidden = true;
module(function($provide) {
doc = jqLite({
body: document.body,
hidden: true
$provide.value('$$isDocumentHidden', function() {
return hidden;
});
$provide.value('$document', doc);
});
inject(function($$AnimateRunner, $rootScope, $$rAF, $timeout) {
@@ -184,7 +183,7 @@ describe("$$AnimateRunner", function() {
$timeout.flush();
expect(spy).toHaveBeenCalled();
doc[0].hidden = false;
hidden = false;
spy = jasmine.createSpy();
runner = new $$AnimateRunner();
test/ng/compileSpec.js
+21 -22
View File
@@ -6087,22 +6087,22 @@ describe('$compile', function() {
});
inject(function($compile, $rootScope) {
expect(jqLiteCacheSize()).toEqual(0);
var cacheSize = jqLiteCacheSize();
element = $compile('<div><div ng-repeat="x in xs" ng-if="x==1">{{x}}</div></div>')($rootScope);
expect(jqLiteCacheSize()).toEqual(1);
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
$rootScope.$apply('xs = [0,1]');
expect(jqLiteCacheSize()).toEqual(2);
expect(jqLiteCacheSize()).toEqual(cacheSize + 2);
$rootScope.$apply('xs = [0]');
expect(jqLiteCacheSize()).toEqual(1);
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
$rootScope.$apply('xs = []');
expect(jqLiteCacheSize()).toEqual(1);
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
element.remove();
expect(jqLiteCacheSize()).toEqual(0);
expect(jqLiteCacheSize()).toEqual(cacheSize + 0);
});
});
@@ -6119,22 +6119,22 @@ describe('$compile', function() {
});
inject(function($compile, $rootScope) {
expect(jqLiteCacheSize()).toEqual(0);
var cacheSize = jqLiteCacheSize();
element = $compile('<div><div ng-repeat="x in xs" ng-if="x==1">{{x}}</div></div>')($rootScope);
expect(jqLiteCacheSize()).toEqual(0);
expect(jqLiteCacheSize()).toEqual(cacheSize);
$rootScope.$apply('xs = [0,1]');
expect(jqLiteCacheSize()).toEqual(0);
expect(jqLiteCacheSize()).toEqual(cacheSize);
$rootScope.$apply('xs = [0]');
expect(jqLiteCacheSize()).toEqual(0);
expect(jqLiteCacheSize()).toEqual(cacheSize);
$rootScope.$apply('xs = []');
expect(jqLiteCacheSize()).toEqual(0);
expect(jqLiteCacheSize()).toEqual(cacheSize);
element.remove();
expect(jqLiteCacheSize()).toEqual(0);
expect(jqLiteCacheSize()).toEqual(cacheSize);
});
});
@@ -6150,26 +6150,26 @@ describe('$compile', function() {
});
inject(function($compile, $rootScope) {
expect(jqLiteCacheSize()).toEqual(0);
var cacheSize = jqLiteCacheSize();
element = $compile('<div><div ng-repeat="x in xs" ng-if="val">{{x}}</div></div>')($rootScope);
$rootScope.$apply('xs = [0,1]');
// At this point we have a bunch of comment placeholders but no real transcluded elements
// So the cache only contains the root element's data
expect(jqLiteCacheSize()).toEqual(1);
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
$rootScope.$apply('val = true');
// Now we have two concrete transcluded elements plus some comments so two more cache items
expect(jqLiteCacheSize()).toEqual(3);
expect(jqLiteCacheSize()).toEqual(cacheSize + 3);
$rootScope.$apply('val = false');
// Once again we only have comments so no transcluded elements and the cache is back to just
// the root element
expect(jqLiteCacheSize()).toEqual(1);
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
element.remove();
// Now we've even removed the root element along with its cache
expect(jqLiteCacheSize()).toEqual(0);
expect(jqLiteCacheSize()).toEqual(cacheSize + 0);
});
});
@@ -6206,6 +6206,7 @@ describe('$compile', function() {
});
inject(function($compile, $rootScope, $httpBackend, $timeout, $templateCache) {
var cacheSize = jqLiteCacheSize();
$httpBackend.whenGET('red.html').respond('<p>red.html</p>');
var template = $compile(
'<div ng-controller="Leak">' +
@@ -6220,7 +6221,7 @@ describe('$compile', function() {
$timeout.flush();
$httpBackend.flush();
expect(linkFn).not.toHaveBeenCalled();
expect(jqLiteCacheSize()).toEqual(2);
expect(jqLiteCacheSize()).toEqual(cacheSize + 2);
$templateCache.removeAll();
var destroyedScope = $rootScope.$new();
@@ -6983,9 +6984,7 @@ describe('$compile', function() {
it('should not leak memory with nested transclusion', function() {
inject(function($compile, $rootScope) {
var size;
expect(jqLiteCacheSize()).toEqual(0);
var size, initialSize = jqLiteCacheSize();
element = jqLite('<div><ul><li ng-repeat="n in nums">{{n}} => <i ng-if="0 === n%2">Even</i><i ng-if="1 === n%2">Odd</i></li></ul></div>');
$compile(element)($rootScope.$new());
@@ -6999,7 +6998,7 @@ describe('$compile', function() {
expect(jqLiteCacheSize()).toEqual(size);
element.remove();
expect(jqLiteCacheSize()).toEqual(0);
expect(jqLiteCacheSize()).toEqual(initialSize);
});
});
});
test/ng/documentSpec.js
+28
View File
@@ -27,3 +27,31 @@ describe('$document', function() {
});
});
});
describe('$$isDocumentHidden', function() {
it('should return false by default', inject(function($$isDocumentHidden, $document) {
expect($$isDocumentHidden()).toBeFalsy(); // undefined in browsers that don't support visibility
}));
it('should listen on the visibilitychange event', function() {
var spy = spyOn(document, 'addEventListener').andCallThrough();
inject(function($$isDocumentHidden, $document) {
expect(spy.calls.mostRecent.args[0]).toBe('visibilitychange');
expect(spy.calls.mostRecent.args[1]).toEqual(jasmine.any(Function));
expect($$isDocumentHidden()).toBeFalsy(); // undefined in browsers that don't support visibility
});
});
it('should remove the listener when the $rootScope is destroyed', function() {
var spy = spyOn(document, 'removeEventListener').andCallThrough();
inject(function($$isDocumentHidden, $rootScope) {
$rootScope.$destroy();
expect(spy.calls.mostRecent.args[0]).toBe('visibilitychange');
expect(spy.calls.mostRecent.args[1]).toEqual(jasmine.any(Function));
});
});
});
test/ngAnimate/animateSpec.js
+12 -13
View File
@@ -156,14 +156,12 @@ describe("animations", function() {
}));
it("should skip animations entirely if the document is hidden", function() {
var doc;
var hidden = true;
module(function($provide) {
doc = jqLite({
body: document.body,
hidden: true
$provide.value('$$isDocumentHidden', function() {
return hidden;
});
$provide.value('$document', doc);
});
inject(function($animate, $rootScope) {
@@ -172,7 +170,7 @@ describe("animations", function() {
expect(capturedAnimation).toBeFalsy();
expect(element[0].parentNode).toEqual(parent[0]);
doc[0].hidden = false;
hidden = false;
$animate.leave(element);
$rootScope.$digest();
@@ -2271,18 +2269,19 @@ describe("animations", function() {
describe('because the document is hidden', function() {
beforeEach(module(function($provide) {
var doc = jqLite({
body: document.body,
hidden: true
var hidden = true;
beforeEach(function() {
module(function($provide) {
$provide.value('$$isDocumentHidden', function() {
return hidden;
});
});
$provide.value('$document', doc);
}));
});
it('should trigger callbacks for an enter animation',
inject(function($animate, $rootScope, $rootElement, $document) {
var callbackTriggered = false;
var spy = jasmine.createSpy();
$animate.on('enter', jqLite($document[0].body), spy);