Skip to content

Commit

Permalink
linkedin#52: first phase of imporvement, skipped three iteration of t…
Browse files Browse the repository at this point in the history 
…he rFA
  • Loading branch information
@SparshithNR @asakusuma
SparshithNR authored and asakusuma committed Jun 28, 2017
1 parent 498efb3 commit ef26153
Show file tree
Hide file tree
Showing 10 changed files with 47 additions and 38 deletions.
19 changes: 13 additions & 6 deletions src/metal/engine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
import { EngineInterface } from './interfaces';
import W from './window-proxy';

const NUM_SKIPPED_FRAMES = 3;

export class Engine implements EngineInterface {
private reads: Array<Function> = [];
private work: Array<Function> = [];
private running: Boolean = false;
private skipCounter: number = NUM_SKIPPED_FRAMES + 1;
scheduleRead(callback: Function) {
this.reads.unshift(callback);
this.run();
Expand All @@ -28,14 +31,18 @@ export class Engine implements EngineInterface {
if (!this.running) {
this.running = true;
W.rAF(() => {
this.running = false;
for (let i = 0, rlen = this.reads.length; i < rlen; i++) {
this.reads.pop()();
}
for (let i = 0, wlen = this.work.length; i < wlen; i++) {
this.work.pop()();
if (this.skipCounter > NUM_SKIPPED_FRAMES) {
this.skipCounter = 0;
for (let i = 0, rlen = this.reads.length; i < rlen; i++) {
this.reads.pop()();
}
for (let i = 0, wlen = this.work.length; i < wlen; i++) {
this.work.pop()();
}
}
this.skipCounter++;
if (this.work.length > 0 || this.reads.length > 0) {
this.running = false;
this.run();
}
});
Expand Down
3 changes: 2 additions & 1 deletion test/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ const constants = {
RAF_THRESHOLD : 16,
SMALL: 5
},
ITEM_TO_OBSERVE: 5
ITEM_TO_OBSERVE: 5,
NUM_SKIPPED_FRAMES: 3
};


Expand Down
14 changes: 7 additions & 7 deletions test/headless/specs/intersection-observer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ testModule('IntersectionObserver', class extends TestClass {
});
observer.observe(target);
})
.wait(50)
.wait(100)
.getExecution()
.evaluate(function() {
return window.STATE.impressions;
Expand All @@ -44,7 +44,7 @@ testModule('IntersectionObserver', class extends TestClass {
});
observer.observe(target);
})
.wait(50)
.wait(100)
.getExecution()
.evaluate(function() {
return window.STATE.impressions;
Expand Down Expand Up @@ -154,7 +154,7 @@ testModule('IntersectionObserver', class extends TestClass {
});
window.observer.observe(window.target);
})
.wait(50)
.wait(100)
.evaluate(function() {
window.observer.unobserve(window.target);
})
Expand Down Expand Up @@ -184,7 +184,7 @@ testModule('IntersectionObserver', class extends TestClass {
window.observer.observe(target2);
window.observer.observe(target3);
})
.wait(50)
.wait(100)
.evaluate(function() {
window.observer.disconnect();
})
Expand Down Expand Up @@ -214,15 +214,15 @@ testModule('IntersectionObserver', class extends TestClass {
window.observer.observe(target2);
window.observer.observe(target3);
})
.wait(50)
.wait(100)
.evaluate(function() {
window.observer.disconnect();
})
.wait(50)
.wait(100)
.evaluate(function() {
window.observer.observe(document.querySelector('.tracked-item[data-id="1"]'));
})
.wait(50)
.wait(100)
.scrollTo(500)
.wait(50)
.scrollTo(0)
Expand Down
4 changes: 2 additions & 2 deletions test/headless/specs/spaniel-observer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ testModule('SpanielObserver', class extends SpanielObserverTestClass {
}
['@test observing a visible element should fire after threshold time has passed']() {
return this.setupTest()
.wait(250)
.wait(300)
.getExecution()
.evaluate(function() {
return window.STATE.impressions;
Expand All @@ -64,7 +64,7 @@ testModule('SpanielObserver', class extends SpanielObserverTestClass {
.evaluate(function() {
window.observer.unobserve(window.target);
})
.wait(20)
.wait(100)
.getExecution()
.evaluate(function() {
return window.STATE.impressions === 1 && window.STATE.completes === 1;
Expand Down
8 changes: 4 additions & 4 deletions test/headless/specs/utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {

import constants from './../../constants.js';

const { time: { RAF_THRESHOLD }, ITEM_TO_OBSERVE } = constants;
const { time: { RAF_THRESHOLD }, ITEM_TO_OBSERVE, NUM_SKIPPED_FRAMES } = constants;

testModule('elementSatisfiesRatio', class extends TestClass {
['@test passes true into callback when ratio satisfied']() {
Expand Down Expand Up @@ -79,11 +79,11 @@ testModule('Eventing', class extends TestClass {
});
})
.scrollTo(10)
.wait(RAF_THRESHOLD * 3)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.scrollTo(20)
.wait(RAF_THRESHOLD * 3)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.getExecution()
.wait(RAF_THRESHOLD)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.evaluate(function() {
return window.STATE.scrollEvents;
}).then(function(result) {
Expand Down
10 changes: 5 additions & 5 deletions test/headless/specs/watcher/exposed-event.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {

import constants from './../../../constants.js';

const { time: { RAF_THRESHOLD }, ITEM_TO_OBSERVE } = constants;
const { time: { RAF_THRESHOLD }, ITEM_TO_OBSERVE, NUM_SKIPPED_FRAMES } = constants;

testModule('Watcher Exposed Event', class extends WatcherTestClass {
['@test should not fire if item is not exposed']() {
Expand Down Expand Up @@ -40,13 +40,13 @@ testModule('Watcher Exposed Event', class extends WatcherTestClass {
['@test should fire twice if moved in, out, and then back in viewport']() {
return this.context.scrollTo(100)
.scrollTo(140)
.wait(RAF_THRESHOLD)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.scrollTo(120)
.wait(RAF_THRESHOLD)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.scrollTo(0)
.wait(RAF_THRESHOLD)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.scrollTo(50)
.wait(RAF_THRESHOLD)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.assertEvent(ITEM_TO_OBSERVE, 'exposed', 2)
.done();
}
Expand Down
11 changes: 6 additions & 5 deletions test/headless/specs/watcher/impression-complete-event.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {

import constants from './../../../constants.js';

const { time: { IMPRESSION_THRESHOLD, RAF_THRESHOLD }, ITEM_TO_OBSERVE } = constants;
const { time: { IMPRESSION_THRESHOLD, RAF_THRESHOLD }, ITEM_TO_OBSERVE, NUM_SKIPPED_FRAMES } = constants;

testModule('Impression Complete event', class extends WatcherTestClass {
['@test should not fire if item is not exposed']() {
Expand Down Expand Up @@ -47,6 +47,7 @@ testModule('Impression Complete event', class extends WatcherTestClass {
return this.context.scrollTo(200)
.wait(IMPRESSION_THRESHOLD + RAF_THRESHOLD * 4)
.scrollTo(0)
.wait(RAF_THRESHOLD * 3)
.assertOnce(ITEM_TO_OBSERVE, 'impression-complete')
.done();
}
Expand All @@ -55,7 +56,7 @@ testModule('Impression Complete event', class extends WatcherTestClass {
return this.context.scrollTo(200)
.wait(IMPRESSION_THRESHOLD + RAF_THRESHOLD * 4)
.unwatch(ITEM_TO_OBSERVE)
.wait(RAF_THRESHOLD * 2)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.assertOnce(ITEM_TO_OBSERVE, 'impression-complete')
.done();
}
Expand All @@ -64,9 +65,9 @@ testModule('Impression Complete event', class extends WatcherTestClass {
return this.context.scrollTo(150)
.wait(IMPRESSION_THRESHOLD * 5)
.scrollTo(0)
.wait(RAF_THRESHOLD)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.assert(function(e) {
return e.meta.duration >= 495 && e.meta.duration <= 545 && e.id === 5 && e.e === 'impression-complete';
return e.meta.duration >= ((IMPRESSION_THRESHOLD * 5) - (RAF_THRESHOLD * NUM_SKIPPED_FRAMES)) && e.meta.duration <= ((IMPRESSION_THRESHOLD * 5) + (RAF_THRESHOLD * NUM_SKIPPED_FRAMES)) && e.id === 5 && e.e === 'impression-complete';
}, 1)
.done();
}
Expand All @@ -90,7 +91,7 @@ testModule('Impression Complete event', class extends WatcherTestClass {
.scrollTo(250)
.wait(IMPRESSION_THRESHOLD + RAF_THRESHOLD * 4)
.scrollTo(0)
.wait(RAF_THRESHOLD)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.assertEvent(ITEM_TO_OBSERVE, 'impression-complete', 2)
.done();
}
Expand Down
7 changes: 3 additions & 4 deletions test/headless/specs/watcher/impression-event.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import {

import constants from './../../../constants.js';

const { time: { IMPRESSION_THRESHOLD, RAF_THRESHOLD, SMALL }, ITEM_TO_OBSERVE } = constants;
const { time: { IMPRESSION_THRESHOLD, RAF_THRESHOLD, SMALL }, ITEM_TO_OBSERVE, NUM_SKIPPED_FRAMES } = constants;

testModule('Impression event', class extends WatcherTestClass {
['@test should not fire if item is exposed but not impressed']() {
return this.context.scrollTo(50)
.wait(RAF_THRESHOLD * 2)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.assertOnce(ITEM_TO_OBSERVE, 'exposed')
.assertNever(ITEM_TO_OBSERVE, 'impressed')
.assertOnce(ITEM_TO_OBSERVE, 'exposed')
Expand All @@ -34,7 +34,6 @@ testModule('Impression event', class extends WatcherTestClass {
return this.context.scrollTo(150)
.wait(RAF_THRESHOLD)
.scrollTo(250)
.wait(RAF_THRESHOLD)
.scrollTo(0)
.assertNever(ITEM_TO_OBSERVE, 'impressed').done();
}
Expand Down Expand Up @@ -66,7 +65,7 @@ testModule('Impression event', class extends WatcherTestClass {
.wait(RAF_THRESHOLD)
.assertNever(ITEM_TO_OBSERVE, 'impressed')
.scrollTo(200)
.wait(IMPRESSION_THRESHOLD + RAF_THRESHOLD)
.wait(IMPRESSION_THRESHOLD + RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.assertOnce(ITEM_TO_OBSERVE, 'impressed')
.done();
}
Expand Down
7 changes: 4 additions & 3 deletions test/headless/specs/watcher/visible-event.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import {

import constants from './../../../constants.js';

const { time: { RAF_THRESHOLD }, ITEM_TO_OBSERVE } = constants;
const { time: { RAF_THRESHOLD }, ITEM_TO_OBSERVE, NUM_SKIPPED_FRAMES } = constants;

testModule('Visible event', class extends WatcherTestClass {
['@test should not fire if item is exposed but not visible']() {
return this.context.scrollTo(50)
.wait(RAF_THRESHOLD * 2)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.assertOnce(ITEM_TO_OBSERVE, 'exposed')
.assertNever(ITEM_TO_OBSERVE, 'visible')
.done();
Expand All @@ -36,6 +36,7 @@ testModule('Visible event', class extends WatcherTestClass {
.scrollTo(300)
.wait(RAF_THRESHOLD * 5)
.scrollTo(250)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.assertOnce(ITEM_TO_OBSERVE, 'visible')
.done();
}
Expand All @@ -50,7 +51,7 @@ testModule('Visible event', class extends WatcherTestClass {
.scrollTo(10)
.wait(RAF_THRESHOLD * 5)
.scrollTo(200)
.wait(RAF_THRESHOLD)
.wait(RAF_THRESHOLD * NUM_SKIPPED_FRAMES)
.assertEvent(ITEM_TO_OBSERVE, 'visible', 2)
.done();
}
Expand Down
2 changes: 1 addition & 1 deletion test/setup/environment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ var runTest = function(threshold, options) {
}
options = options || {};
var thresholds = [threshold];
var timeout = 50 + (options.timeout || 0);
var timeout = 100 + (options.timeout || 0);
var entries = [];
var target = options.target || document.createElement('div');
target.style.height = '10px';
Expand Down

0 comments on commit ef26153

Please sign in to comment.