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

Commit b377d6b

Browse files
NarretzNarretz
committed
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. Closes #14568
1 parent ac650cb commit b377d6b

File tree

8 files changed

+102
-50
lines changed

8 files changed

+102
-50
lines changed

‎src/AngularPublic.js

+2
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

+3-7
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

+26
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

+4-2
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

+5-6
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

+21-22
Original file line numberDiff line numberDiff line change
@@ -7321,22 +7321,22 @@ describe('$compile', function() {
73217321
});
73227322

73237323
inject(function($compile, $rootScope) {
7324-
expect(jqLiteCacheSize()).toEqual(0);
7324+
var cacheSize = jqLiteCacheSize();
73257325

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

73297329
$rootScope.$apply('xs = [0,1]');
7330-
expect(jqLiteCacheSize()).toEqual(2);
7330+
expect(jqLiteCacheSize()).toEqual(cacheSize + 2);
73317331

73327332
$rootScope.$apply('xs = [0]');
7333-
expect(jqLiteCacheSize()).toEqual(1);
7333+
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
73347334

73357335
$rootScope.$apply('xs = []');
7336-
expect(jqLiteCacheSize()).toEqual(1);
7336+
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
73377337

73387338
element.remove();
7339-
expect(jqLiteCacheSize()).toEqual(0);
7339+
expect(jqLiteCacheSize()).toEqual(cacheSize + 0);
73407340
});
73417341
});
73427342

@@ -7353,22 +7353,22 @@ describe('$compile', function() {
73537353
});
73547354

73557355
inject(function($compile, $rootScope) {
7356-
expect(jqLiteCacheSize()).toEqual(0);
7356+
var cacheSize = jqLiteCacheSize();
73577357

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

73617361
$rootScope.$apply('xs = [0,1]');
7362-
expect(jqLiteCacheSize()).toEqual(0);
7362+
expect(jqLiteCacheSize()).toEqual(cacheSize);
73637363

73647364
$rootScope.$apply('xs = [0]');
7365-
expect(jqLiteCacheSize()).toEqual(0);
7365+
expect(jqLiteCacheSize()).toEqual(cacheSize);
73667366

73677367
$rootScope.$apply('xs = []');
7368-
expect(jqLiteCacheSize()).toEqual(0);
7368+
expect(jqLiteCacheSize()).toEqual(cacheSize);
73697369

73707370
element.remove();
7371-
expect(jqLiteCacheSize()).toEqual(0);
7371+
expect(jqLiteCacheSize()).toEqual(cacheSize);
73727372
});
73737373
});
73747374

@@ -7384,26 +7384,26 @@ describe('$compile', function() {
73847384
});
73857385

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

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

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

73997399
$rootScope.$apply('val = false');
74007400
// Once again we only have comments so no transcluded elements and the cache is back to just
74017401
// the root element
7402-
expect(jqLiteCacheSize()).toEqual(1);
7402+
expect(jqLiteCacheSize()).toEqual(cacheSize + 1);
74037403

74047404
element.remove();
74057405
// Now we've even removed the root element along with its cache
7406-
expect(jqLiteCacheSize()).toEqual(0);
7406+
expect(jqLiteCacheSize()).toEqual(cacheSize + 0);
74077407
});
74087408
});
74097409

@@ -7440,6 +7440,7 @@ describe('$compile', function() {
74407440
});
74417441

74427442
inject(function($compile, $rootScope, $httpBackend, $timeout, $templateCache) {
7443+
var cacheSize = jqLiteCacheSize();
74437444
$httpBackend.whenGET('red.html').respond('<p>red.html</p>');
74447445
var template = $compile(
74457446
'<div ng-controller="Leak">' +
@@ -7454,7 +7455,7 @@ describe('$compile', function() {
74547455
$timeout.flush();
74557456
$httpBackend.flush();
74567457
expect(linkFn).not.toHaveBeenCalled();
7457-
expect(jqLiteCacheSize()).toEqual(2);
7458+
expect(jqLiteCacheSize()).toEqual(cacheSize + 2);
74587459

74597460
$templateCache.removeAll();
74607461
var destroyedScope = $rootScope.$new();
@@ -8237,9 +8238,7 @@ describe('$compile', function() {
82378238

82388239
it('should not leak memory with nested transclusion', function() {
82398240
inject(function($compile, $rootScope) {
8240-
var size;
8241-
8242-
expect(jqLiteCacheSize()).toEqual(0);
8241+
var size, initialSize = jqLiteCacheSize();
82438242

82448243
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>');
82458244
$compile(element)($rootScope.$new());
@@ -8253,7 +8252,7 @@ describe('$compile', function() {
82538252
expect(jqLiteCacheSize()).toEqual(size);
82548253

82558254
element.remove();
8256-
expect(jqLiteCacheSize()).toEqual(0);
8255+
expect(jqLiteCacheSize()).toEqual(initialSize);
82578256
});
82588257
});
82598258
});

‎test/ng/documentSpec.js

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

‎test/ngAnimate/animateSpec.js

+12-13
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)