Skip to content

Commit 9b18a97

Browse files
manucorporatmanucorporat
committed
perf(queue): remove queue when it's not updatable
1 parent 972cf6f commit 9b18a97

2 files changed

Lines changed: 101 additions & 86 deletions

File tree

‎src/client/queue-client.ts‎

Lines changed: 98 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,104 +2,119 @@ import * as d from '../declarations';
22

33

44
export const createQueueClient = (App: d.AppGlobal, win: Window): d.QueueApi => {
5-
let congestion = 0;
6-
let rafPending = false;
7-
8-
const now: d.Now = () => win.performance.now();
9-
const async = App.asyncQueue !== false;
10-
const resolved = Promise.resolve();
11-
const highPriority: d.RafCallback[] = [];
12-
const domReads: d.RafCallback[] = [];
13-
const domWrites: d.RafCallback[] = [];
14-
const domWritesLow: d.RafCallback[] = [];
15-
16-
const queueTask = (queue: d.RafCallback[]) => (cb: d.RafCallback) => {
17-
// queue dom reads
18-
queue.push(cb);
19-
20-
if (!rafPending) {
21-
rafPending = true;
22-
App.raf(flush);
5+
if (!_BUILD_.updatable) {
6+
const resolved = Promise.resolve();
7+
const now: d.Now = () => win.performance.now();
8+
function tick(cb: d.RafCallback) {
9+
resolved.then(() => cb(now()));
2310
}
24-
};
25-
26-
const consume = (queue: d.RafCallback[]) => {
27-
for (let i = 0; i < queue.length; i++) {
28-
try {
29-
queue[i](now());
30-
} catch (e) {
31-
console.error(e);
11+
return {
12+
tick: tick,
13+
read: tick,
14+
write: tick,
15+
};
16+
17+
} else {
18+
19+
let congestion = 0;
20+
let rafPending = false;
21+
22+
const now: d.Now = () => win.performance.now();
23+
const async = App.asyncQueue !== false;
24+
const resolved = Promise.resolve();
25+
const highPriority: d.RafCallback[] = [];
26+
const domReads: d.RafCallback[] = [];
27+
const domWrites: d.RafCallback[] = [];
28+
const domWritesLow: d.RafCallback[] = [];
29+
30+
const queueTask = (queue: d.RafCallback[]) => (cb: d.RafCallback) => {
31+
// queue dom reads
32+
queue.push(cb);
33+
34+
if (!rafPending) {
35+
rafPending = true;
36+
App.raf(flush);
3237
}
33-
}
34-
queue.length = 0;
35-
};
36-
37-
const consumeTimeout = (queue: d.RafCallback[], timeout: number) => {
38-
let i = 0;
39-
let ts: number;
40-
while (i < queue.length && (ts = now()) < timeout) {
41-
try {
42-
queue[i++](ts);
43-
} catch (e) {
44-
console.error(e);
38+
};
39+
40+
const consume = (queue: d.RafCallback[]) => {
41+
for (let i = 0; i < queue.length; i++) {
42+
try {
43+
queue[i](now());
44+
} catch (e) {
45+
console.error(e);
46+
}
4547
}
46-
}
47-
if (i === queue.length) {
4848
queue.length = 0;
49-
} else if (i !== 0) {
50-
queue.splice(0, i);
51-
}
52-
};
49+
};
50+
51+
const consumeTimeout = (queue: d.RafCallback[], timeout: number) => {
52+
let i = 0;
53+
let ts: number;
54+
while (i < queue.length && (ts = now()) < timeout) {
55+
try {
56+
queue[i++](ts);
57+
} catch (e) {
58+
console.error(e);
59+
}
60+
}
61+
if (i === queue.length) {
62+
queue.length = 0;
63+
} else if (i !== 0) {
64+
queue.splice(0, i);
65+
}
66+
};
5367

54-
const flush = () => {
55-
congestion++;
68+
const flush = () => {
69+
congestion++;
5670

57-
// always force a bunch of medium callbacks to run, but still have
58-
// a throttle on how many can run in a certain time
71+
// always force a bunch of medium callbacks to run, but still have
72+
// a throttle on how many can run in a certain time
5973

60-
// DOM READS!!!
61-
consume(domReads);
74+
// DOM READS!!!
75+
consume(domReads);
6276

63-
const timeout = async
64-
? now() + (7 * Math.ceil(congestion * (1.0 / 22.0)))
65-
: Infinity;
77+
const timeout = async
78+
? now() + (7 * Math.ceil(congestion * (1.0 / 22.0)))
79+
: Infinity;
6680

67-
// DOM WRITES!!!
68-
consumeTimeout(domWrites, timeout);
69-
consumeTimeout(domWritesLow, timeout);
81+
// DOM WRITES!!!
82+
consumeTimeout(domWrites, timeout);
83+
consumeTimeout(domWritesLow, timeout);
7084

71-
if (domWrites.length > 0) {
72-
domWritesLow.push(...domWrites);
73-
domWrites.length = 0;
74-
}
85+
if (domWrites.length > 0) {
86+
domWritesLow.push(...domWrites);
87+
domWrites.length = 0;
88+
}
7589

76-
if (rafPending = ((domReads.length + domWrites.length + domWritesLow.length) > 0)) {
77-
// still more to do yet, but we've run out of time
78-
// let's let this thing cool off and try again in the next tick
79-
App.raf(flush);
80-
} else {
81-
congestion = 0;
82-
}
83-
};
90+
if (rafPending = ((domReads.length + domWrites.length + domWritesLow.length) > 0)) {
91+
// still more to do yet, but we've run out of time
92+
// let's let this thing cool off and try again in the next tick
93+
App.raf(flush);
94+
} else {
95+
congestion = 0;
96+
}
97+
};
8498

85-
if (!App.raf) {
86-
App.raf = win.requestAnimationFrame.bind(win);
87-
}
99+
if (!App.raf) {
100+
App.raf = win.requestAnimationFrame.bind(win);
101+
}
88102

89-
return {
103+
return {
90104

91-
tick(cb: d.RafCallback) {
92-
// queue high priority work to happen in next tick
93-
// uses Promise.resolve() for next tick
94-
highPriority.push(cb);
105+
tick(cb: d.RafCallback) {
106+
// queue high priority work to happen in next tick
107+
// uses Promise.resolve() for next tick
108+
highPriority.push(cb);
95109

96-
if (highPriority.length === 1) {
97-
resolved.then(() => consume(highPriority));
98-
}
99-
},
110+
if (highPriority.length === 1) {
111+
resolved.then(() => consume(highPriority));
112+
}
113+
},
100114

101-
read: queueTask(domReads),
102-
write: queueTask(domWrites),
115+
read: queueTask(domReads),
116+
write: queueTask(domWrites),
103117

104-
};
118+
};
119+
}
105120
};

‎test/apps/readme.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33

44
| File | Brotli | Gzipped | Minified |
55
|----------------------------|----------|----------|----------|
6-
| hello-world.entry.js | 106B | 135B | 144B |
7-
| app.core.js | 3.52KB | 3.90KB | 8.33KB |
6+
| hello-world.entry.js | 78B | 96B | 98B |
7+
| app.core.js | 3.30KB | 3.67KB | 7.84KB |
88

99

1010

1111
## Todo App
1212

1313
| File | Brotli | Gzipped | Minified |
1414
|----------------------------|----------|----------|----------|
15-
| my-todo.entry.js | 1.42KB | 1.70KB | 4.84KB |
15+
| my-todo.entry.js | 1.39KB | 1.68KB | 4.81KB |
1616
| app.core.js | 5.36KB | 5.90KB | 13.00KB |
1717
| app.css | 143B | 188B | 233B |
1818

0 commit comments

Comments
 (0)