Skip to content

Commit d71dc2f

Browse files
NarretzNarretz
committed
perf($animate): listen for document visibility changes
perf(ngAnimate): listen for document visibility changes Accessing the document for the hidden state is costly for platforms like Electron. Instead, listen for visibilitychange and store the state. (angular#14071) Closes angular#14066
1 parent b9d76bf commit d71dc2f

8 files changed

Lines changed: 99 additions & 50 deletions

File tree

‎src/AngularPublic.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
$ControllerProvider,
6666
$DateProvider,
6767
$DocumentProvider,
68+
$$IsDocumentHiddenProvider,
6869
$ExceptionHandlerProvider,
6970
$FilterProvider,
7071
$$ForceReflowProvider,
@@ -227,6 +228,7 @@ function publishExternalAPI(angular) {
227228
$cacheFactory: $CacheFactoryProvider,
228229
$controller: $ControllerProvider,
229230
$document: $DocumentProvider,
231+
$$isDocumentHidden: $$IsDocumentHiddenProvider,
230232
$exceptionHandler: $ExceptionHandlerProvider,
231233
$filter: $FilterProvider,
232234
$$forceReflow: $$ForceReflowProvider,

‎src/ng/animateRunner.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ var $$AnimateAsyncRunFactoryProvider = function() {
2828
};
2929

3030
var $$AnimateRunnerFactoryProvider = function() {
31-
this.$get = ['$q', '$sniffer', '$$animateAsyncRun', '$document', '$timeout',
32-
function($q, $sniffer, $$animateAsyncRun, $document, $timeout) {
31+
this.$get = ['$q', '$sniffer', '$$animateAsyncRun', '$$isDocumentHidden', '$timeout',
32+
function($q, $sniffer, $$animateAsyncRun, $$isDocumentHidden, $timeout) {
3333

3434
var INITIAL_STATE = 0;
3535
var DONE_PENDING_STATE = 1;
@@ -81,11 +81,7 @@ var $$AnimateRunnerFactoryProvider = function() {
8181

8282
this._doneCallbacks = [];
8383
this._tick = function(fn) {
84-
var doc = $document[0];
85-
86-
// the document may not be ready or attached
87-
// to the module for some internal tests
88-
if (doc && doc.hidden) {
84+
if ($$isDocumentHidden()) {
8985
timeoutTick(fn);
9086
} else {
9187
rafTick(fn);

‎src/ng/document.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,29 @@ function $DocumentProvider() {
3030
return jqLite(window.document);
3131
}];
3232
}
33+
34+
35+
/**
36+
* @private
37+
* Listens for document visibility change and makes the current status accessible.
38+
*/
39+
function $$IsDocumentHiddenProvider() {
40+
this.$get = ['$document', '$rootScope', function($document, $rootScope) {
41+
var doc = $document[0];
42+
var hidden = doc && doc.hidden;
43+
44+
$document.on('visibilitychange', changeListener);
45+
46+
$rootScope.$on('$destroy', function() {
47+
$document.off('visibilitychange', changeListener);
48+
});
49+
50+
function changeListener() {
51+
hidden = doc.hidden;
52+
}
53+
54+
return function() {
55+
return hidden;
56+
};
57+
}];
58+
}

‎src/ngAnimate/animateQueue.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,10 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
102102

103103
this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$HashMap',
104104
'$$animation', '$$AnimateRunner', '$templateRequest', '$$jqLite', '$$forceReflow',
105+
'$$isDocumentHidden',
105106
function($$rAF, $rootScope, $rootElement, $document, $$HashMap,
106-
$$animation, $$AnimateRunner, $templateRequest, $$jqLite, $$forceReflow) {
107+
$$animation, $$AnimateRunner, $templateRequest, $$jqLite, $$forceReflow,
108+
$$isDocumentHidden) {
107109

108110
var activeAnimationsLookup = new $$HashMap();
109111
var disabledElementsLookup = new $$HashMap();
@@ -367,7 +369,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
367369

368370
var isStructural = ['enter', 'move', 'leave'].indexOf(event) >= 0;
369371

370-
var documentHidden = $document[0].hidden;
372+
var documentHidden = $$isDocumentHidden();
371373

372374
// this is a hard disable of all animations for the application or on
373375
// the element itself, therefore there is no need to continue further

‎test/ng/animateRunnerSpec.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -163,14 +163,13 @@ describe("$$AnimateRunner", function() {
163163
}));
164164

165165
it("should use timeouts to trigger async operations when the document is hidden", function() {
166-
var doc;
166+
var hidden = true;
167167

168168
module(function($provide) {
169-
doc = jqLite({
170-
body: document.body,
171-
hidden: true
169+
170+
$provide.value('$$isDocumentHidden', function() {
171+
return hidden;
172172
});
173-
$provide.value('$document', doc);
174173
});
175174

176175
inject(function($$AnimateRunner, $rootScope, $$rAF, $timeout) {
@@ -184,7 +183,7 @@ describe("$$AnimateRunner", function() {
184183
$timeout.flush();
185184
expect(spy).toHaveBeenCalled();
186185

187-
doc[0].hidden = false;
186+
hidden = false;
188187

189188
spy = jasmine.createSpy();
190189
runner = new $$AnimateRunner();

‎test/ng/compileSpec.js‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7245,22 +7245,22 @@ describe('$compile', function() {
72457245
});
72467246

72477247
inject(function($compile, $rootScope) {
7248-
expect(jqLiteCacheSize()).toEqual(0);
7248+
var cacheSize = jqLiteCacheSize();
72497249

72507250
element = $compile('<div><div ng-repeat="x in xs" ng-if="x==1">{{x}}</div></div>')($rootScope);
7251-
expect(jqLiteCacheSize()).toEqual(1);
7251+
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
72527252

72537253
$rootScope.$apply('xs = [0,1]');
7254-
expect(jqLiteCacheSize()).toEqual(2);
7254+
expect(jqLiteCacheSize()).toEqual(cacheSize + 2);
72557255

72567256
$rootScope.$apply('xs = [0]');
7257-
expect(jqLiteCacheSize()).toEqual(1);
7257+
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
72587258

72597259
$rootScope.$apply('xs = []');
7260-
expect(jqLiteCacheSize()).toEqual(1);
7260+
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
72617261

72627262
element.remove();
7263-
expect(jqLiteCacheSize()).toEqual(0);
7263+
expect(jqLiteCacheSize()).toEqual(cacheSize + 0);
72647264
});
72657265
});
72667266

@@ -7277,22 +7277,22 @@ describe('$compile', function() {
72777277
});
72787278

72797279
inject(function($compile, $rootScope) {
7280-
expect(jqLiteCacheSize()).toEqual(0);
7280+
var cacheSize = jqLiteCacheSize();
72817281

72827282
element = $compile('<div><div ng-repeat="x in xs" ng-if="x==1">{{x}}</div></div>')($rootScope);
7283-
expect(jqLiteCacheSize()).toEqual(0);
7283+
expect(jqLiteCacheSize()).toEqual(cacheSize);
72847284

72857285
$rootScope.$apply('xs = [0,1]');
7286-
expect(jqLiteCacheSize()).toEqual(0);
7286+
expect(jqLiteCacheSize()).toEqual(cacheSize);
72877287

72887288
$rootScope.$apply('xs = [0]');
7289-
expect(jqLiteCacheSize()).toEqual(0);
7289+
expect(jqLiteCacheSize()).toEqual(cacheSize);
72907290

72917291
$rootScope.$apply('xs = []');
7292-
expect(jqLiteCacheSize()).toEqual(0);
7292+
expect(jqLiteCacheSize()).toEqual(cacheSize);
72937293

72947294
element.remove();
7295-
expect(jqLiteCacheSize()).toEqual(0);
7295+
expect(jqLiteCacheSize()).toEqual(cacheSize);
72967296
});
72977297
});
72987298

@@ -7308,26 +7308,26 @@ describe('$compile', function() {
73087308
});
73097309

73107310
inject(function($compile, $rootScope) {
7311-
expect(jqLiteCacheSize()).toEqual(0);
7311+
var cacheSize = jqLiteCacheSize();
73127312
element = $compile('<div><div ng-repeat="x in xs" ng-if="val">{{x}}</div></div>')($rootScope);
73137313

73147314
$rootScope.$apply('xs = [0,1]');
73157315
// At this point we have a bunch of comment placeholders but no real transcluded elements
73167316
// So the cache only contains the root element's data
7317-
expect(jqLiteCacheSize()).toEqual(1);
7317+
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
73187318

73197319
$rootScope.$apply('val = true');
73207320
// Now we have two concrete transcluded elements plus some comments so two more cache items
7321-
expect(jqLiteCacheSize()).toEqual(3);
7321+
expect(jqLiteCacheSize()).toEqual(cacheSize + 3);
73227322

73237323
$rootScope.$apply('val = false');
73247324
// Once again we only have comments so no transcluded elements and the cache is back to just
73257325
// the root element
7326-
expect(jqLiteCacheSize()).toEqual(1);
7326+
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
73277327

73287328
element.remove();
73297329
// Now we've even removed the root element along with its cache
7330-
expect(jqLiteCacheSize()).toEqual(0);
7330+
expect(jqLiteCacheSize()).toEqual(cacheSize + 0);
73317331
});
73327332
});
73337333

@@ -7364,6 +7364,7 @@ describe('$compile', function() {
73647364
});
73657365

73667366
inject(function($compile, $rootScope, $httpBackend, $timeout, $templateCache) {
7367+
var cacheSize = jqLiteCacheSize();
73677368
$httpBackend.whenGET('red.html').respond('<p>red.html</p>');
73687369
var template = $compile(
73697370
'<div ng-controller="Leak">' +
@@ -7378,7 +7379,7 @@ describe('$compile', function() {
73787379
$timeout.flush();
73797380
$httpBackend.flush();
73807381
expect(linkFn).not.toHaveBeenCalled();
7381-
expect(jqLiteCacheSize()).toEqual(2);
7382+
expect(jqLiteCacheSize()).toEqual(cacheSize + 2);
73827383

73837384
$templateCache.removeAll();
73847385
var destroyedScope = $rootScope.$new();
@@ -8161,9 +8162,7 @@ describe('$compile', function() {
81618162

81628163
it('should not leak memory with nested transclusion', function() {
81638164
inject(function($compile, $rootScope) {
8164-
var size;
8165-
8166-
expect(jqLiteCacheSize()).toEqual(0);
8165+
var size, initialSize = jqLiteCacheSize();
81678166

81688167
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>');
81698168
$compile(element)($rootScope.$new());
@@ -8177,7 +8176,7 @@ describe('$compile', function() {
81778176
expect(jqLiteCacheSize()).toEqual(size);
81788177

81798178
element.remove();
8180-
expect(jqLiteCacheSize()).toEqual(0);
8179+
expect(jqLiteCacheSize()).toEqual(initialSize);
81818180
});
81828181
});
81838182
});

‎test/ng/documentSpec.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,29 @@ describe('$document', function() {
2727
});
2828
});
2929
});
30+
31+
32+
describe('$$isDocumentHidden', function() {
33+
it('should listen on the visibilitychange event', function() {
34+
var doc;
35+
36+
var spy = spyOn(document, 'addEventListener').and.callThrough();
37+
38+
inject(function($$isDocumentHidden, $document) {
39+
expect(spy.calls.mostRecent().args[0]).toBe('visibilitychange');
40+
expect(spy.calls.mostRecent().args[1]).toEqual(jasmine.any(Function));
41+
expect($$isDocumentHidden()).toBeFalsy(); // undefined in browsers that don't support visibility
42+
});
43+
44+
});
45+
46+
it('should remove the listener when the $rootScope is destroyed', function() {
47+
var spy = spyOn(document, 'removeEventListener').and.callThrough();
48+
49+
inject(function($$isDocumentHidden, $rootScope) {
50+
$rootScope.$destroy();
51+
expect(spy.calls.mostRecent().args[0]).toBe('visibilitychange');
52+
expect(spy.calls.mostRecent().args[1]).toEqual(jasmine.any(Function));
53+
});
54+
});
55+
});

‎test/ngAnimate/animateSpec.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -157,14 +157,12 @@ describe("animations", function() {
157157
}));
158158

159159
it("should skip animations entirely if the document is hidden", function() {
160-
var doc;
160+
var hidden = true;
161161

162162
module(function($provide) {
163-
doc = jqLite({
164-
body: document.body,
165-
hidden: true
163+
$provide.value('$$isDocumentHidden', function() {
164+
return hidden;
166165
});
167-
$provide.value('$document', doc);
168166
});
169167

170168
inject(function($animate, $rootScope) {
@@ -173,7 +171,7 @@ describe("animations", function() {
173171
expect(capturedAnimation).toBeFalsy();
174172
expect(element[0].parentNode).toEqual(parent[0]);
175173

176-
doc[0].hidden = false;
174+
hidden = false;
177175

178176
$animate.leave(element);
179177
$rootScope.$digest();
@@ -2503,18 +2501,19 @@ describe("animations", function() {
25032501

25042502

25052503
describe('because the document is hidden', function() {
2506-
beforeEach(module(function($provide) {
2507-
var doc = jqLite({
2508-
body: document.body,
2509-
hidden: true
2504+
var hidden = true;
2505+
2506+
beforeEach(function() {
2507+
module(function($provide) {
2508+
$provide.value('$$isDocumentHidden', function() {
2509+
return hidden;
2510+
});
25102511
});
2511-
$provide.value('$document', doc);
2512-
}));
2512+
});
25132513

25142514
it('should trigger callbacks for an enter animation',
25152515
inject(function($animate, $rootScope, $rootElement, $document) {
25162516

2517-
var callbackTriggered = false;
25182517
var spy = jasmine.createSpy();
25192518
$animate.on('enter', jqLite($document[0].body), spy);
25202519

0 commit comments

Comments
 (0)