Skip to content

Commit b9ffedd

Browse files
samourisamouri
authored
Benchmark + optimize (#1096)
* Create benchmarks for createElement * Create IS_SERVER for optimizing path. * Optimize the paths and measure results along the way * rm comments * unecessary type * whoops extra file * Some more early exits, only supply value when true. * remove minification for server-lib * be smarter (attach to process.env for var replacment) * undo unrelated changes * add comment for context on lazy css
1 parent cc71f9c commit b9ffedd

File tree

10 files changed

+85
-122
lines changed

10 files changed

+85
-122
lines changed

‎benchmark.mjs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Benchmark from 'benchmark';
2+
3+
import { createDocument } from './dist/server-lib.mjs';
4+
const doc = createDocument();
5+
6+
var suite = new Benchmark.Suite();
7+
suite
8+
.add('createElement', function () {
9+
doc.createElement('test-elem');
10+
})
11+
.on('complete', function () {
12+
const results = Array.from(this);
13+
console.log(results.join('\n'));
14+
})
15+
.run();

‎config/rollup.main-thread.js‎

Lines changed: 7 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import compiler from '@ampproject/rollup-plugin-closure-compiler';
22
import { terser } from 'rollup-plugin-terser';
3-
import replace from '@rollup/plugin-replace';
4-
import { babelPlugin, removeDebugCommandExecutors, removeWorkerWhitespace } from './rollup.plugins.js';
3+
import { babelPlugin, removeDebugCommandExecutors, removeWorkerWhitespace, replacePlugin } from './rollup.plugins.js';
54

65
const ESModules = [
76
{
@@ -14,13 +13,7 @@ const ESModules = [
1413
plugins: [
1514
removeWorkerWhitespace(),
1615
removeDebugCommandExecutors(),
17-
replace({
18-
values: {
19-
WORKER_DOM_DEBUG: false,
20-
IS_AMP: false,
21-
},
22-
preventAssignment: true,
23-
}),
16+
replacePlugin(),
2417
babelPlugin({
2518
transpileToES5: false,
2619
allowConsole: false,
@@ -38,13 +31,7 @@ const ESModules = [
3831
},
3932
plugins: [
4033
removeWorkerWhitespace(),
41-
replace({
42-
values: {
43-
WORKER_DOM_DEBUG: true,
44-
IS_AMP: false,
45-
},
46-
preventAssignment: true,
47-
}),
34+
replacePlugin({ debug: true }),
4835
babelPlugin({
4936
transpileToES5: false,
5037
allowConsole: true,
@@ -61,13 +48,7 @@ const ESModules = [
6148
plugins: [
6249
removeWorkerWhitespace(),
6350
removeDebugCommandExecutors(),
64-
replace({
65-
values: {
66-
WORKER_DOM_DEBUG: false,
67-
IS_AMP: true,
68-
},
69-
preventAssignment: true,
70-
}),
51+
replacePlugin({ amp: true }),
7152
babelPlugin({
7253
transpileToES5: false,
7354
allowConsole: false,
@@ -85,13 +66,7 @@ const ESModules = [
8566
},
8667
plugins: [
8768
removeWorkerWhitespace(),
88-
replace({
89-
values: {
90-
WORKER_DOM_DEBUG: true,
91-
IS_AMP: true,
92-
},
93-
preventAssignment: true,
94-
}),
69+
replacePlugin({ debug: true, amp: true }),
9570
babelPlugin({
9671
transpileToES5: false,
9772
allowConsole: true,
@@ -112,13 +87,7 @@ const IIFEModules = [
11287
plugins: [
11388
removeWorkerWhitespace(),
11489
removeDebugCommandExecutors(),
115-
replace({
116-
values: {
117-
WORKER_DOM_DEBUG: false,
118-
IS_AMP: false,
119-
},
120-
preventAssignment: true,
121-
}),
90+
replacePlugin(),
12291
babelPlugin({
12392
transpileToES5: true,
12493
allowConsole: false,
@@ -137,13 +106,7 @@ const IIFEModules = [
137106
},
138107
plugins: [
139108
removeWorkerWhitespace(),
140-
replace({
141-
values: {
142-
WORKER_DOM_DEBUG: true,
143-
IS_AMP: false,
144-
},
145-
preventAssignment: true,
146-
}),
109+
replacePlugin({ debug: true, amp: true }),
147110
babelPlugin({
148111
transpileToES5: true,
149112
allowConsole: true,

‎config/rollup.plugins.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import babel from '@rollup/plugin-babel';
2+
import replace from '@rollup/plugin-replace';
23
import MagicString from 'magic-string';
34
import fs from 'fs';
45
import * as path from 'path';
@@ -18,6 +19,9 @@ export function babelPlugin({ transpileToES5, allowConsole = false, allowPostMes
1819
return babel({
1920
babelHelpers: 'bundled',
2021
exclude: 'node_modules/**',
22+
assumptions: {
23+
setPublicClassFields: true,
24+
},
2125
presets: [
2226
[
2327
'@babel/env',
@@ -139,3 +143,14 @@ export function removeWorkerWhitespace() {
139143
},
140144
};
141145
}
146+
147+
export function replacePlugin({ debug = false, server = false, amp = false } = {}) {
148+
return replace({
149+
values: {
150+
WORKER_DOM_DEBUG: debug,
151+
IS_AMP: amp,
152+
'process.env.SERVER': server,
153+
},
154+
preventAssignment: true,
155+
});
156+
}

‎config/rollup.worker-thread.js‎

Lines changed: 14 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import compiler from '@ampproject/rollup-plugin-closure-compiler';
22
import { terser } from 'rollup-plugin-terser';
3-
import replace from '@rollup/plugin-replace';
4-
import { babelPlugin } from './rollup.plugins.js';
3+
import { babelPlugin, replacePlugin } from './rollup.plugins.js';
54

65
// Compile plugins should always be added at the end of the plugin list.
76
const compilePlugins = [
@@ -24,17 +23,11 @@ const ESModules = [
2423
sourcemap: true,
2524
},
2625
plugins: [
27-
replace({
28-
values: {
29-
WORKER_DOM_DEBUG: false,
30-
},
31-
preventAssignment: true,
32-
}),
26+
replacePlugin({ server: true }),
3327
babelPlugin({
3428
transpileToES5: false,
3529
allowConsole: false,
3630
}),
37-
...compilePlugins,
3831
],
3932
},
4033
{
@@ -46,12 +39,7 @@ const ESModules = [
4639
sourcemap: true,
4740
},
4841
plugins: [
49-
replace({
50-
values: {
51-
WORKER_DOM_DEBUG: false,
52-
},
53-
preventAssignment: true,
54-
}),
42+
replacePlugin(),
5543
babelPlugin({
5644
transpileToES5: false,
5745
allowConsole: false,
@@ -68,12 +56,7 @@ const ESModules = [
6856
sourcemap: true,
6957
},
7058
plugins: [
71-
replace({
72-
values: {
73-
WORKER_DOM_DEBUG: true,
74-
},
75-
preventAssignment: true,
76-
}),
59+
replacePlugin({ debug: true }),
7760
babelPlugin({
7861
transpileToES5: false,
7962
allowConsole: true,
@@ -89,12 +72,7 @@ const ESModules = [
8972
sourcemap: true,
9073
},
9174
plugins: [
92-
replace({
93-
values: {
94-
WORKER_DOM_DEBUG: false,
95-
},
96-
preventAssignment: true,
97-
}),
75+
replacePlugin(),
9876
babelPlugin({
9977
transpileToES5: false,
10078
allowConsole: false,
@@ -111,6 +89,7 @@ const ESModules = [
11189
sourcemap: true,
11290
},
11391
plugins: [
92+
replacePlugin({ debug: true }),
11493
babelPlugin({
11594
transpileToES5: false,
11695
allowConsole: true,
@@ -126,12 +105,7 @@ const ESModules = [
126105
sourcemap: true,
127106
},
128107
plugins: [
129-
replace({
130-
values: {
131-
WORKER_DOM_DEBUG: false,
132-
},
133-
preventAssignment: true,
134-
}),
108+
replacePlugin({}),
135109
babelPlugin({
136110
transpileToES5: true,
137111
allowConsole: false,
@@ -148,12 +122,7 @@ const ESModules = [
148122
sourcemap: true,
149123
},
150124
plugins: [
151-
replace({
152-
values: {
153-
WORKER_DOM_DEBUG: true,
154-
},
155-
preventAssignment: true,
156-
}),
125+
replacePlugin({ debug: true }),
157126
babelPlugin({
158127
transpileToES5: true,
159128
allowConsole: true,
@@ -169,12 +138,7 @@ const ESModules = [
169138
sourcemap: true,
170139
},
171140
plugins: [
172-
replace({
173-
values: {
174-
WORKER_DOM_DEBUG: false,
175-
},
176-
preventAssignment: true,
177-
}),
141+
replacePlugin(),
178142
babelPlugin({
179143
transpileToES5: false,
180144
allowConsole: true,
@@ -191,12 +155,7 @@ const ESModules = [
191155
sourcemap: true,
192156
},
193157
plugins: [
194-
replace({
195-
values: {
196-
WORKER_DOM_DEBUG: true,
197-
},
198-
preventAssignment: true,
199-
}),
158+
replacePlugin({ debug: true }),
200159
babelPlugin({
201160
transpileToES5: false,
202161
allowConsole: true,
@@ -212,12 +171,7 @@ const ESModules = [
212171
sourcemap: true,
213172
},
214173
plugins: [
215-
replace({
216-
values: {
217-
WORKER_DOM_DEBUG: false,
218-
},
219-
preventAssignment: true,
220-
}),
174+
replacePlugin(),
221175
babelPlugin({
222176
transpileToES5: true,
223177
allowConsole: false,
@@ -234,12 +188,7 @@ const ESModules = [
234188
sourcemap: true,
235189
},
236190
plugins: [
237-
replace({
238-
values: {
239-
WORKER_DOM_DEBUG: true,
240-
},
241-
preventAssignment: true,
242-
}),
191+
replacePlugin({ debug: true }),
243192
babelPlugin({
244193
transpileToES5: true,
245194
allowConsole: true,
@@ -258,12 +207,7 @@ const IIFEModules = [
258207
sourcemap: true,
259208
},
260209
plugins: [
261-
replace({
262-
values: {
263-
WORKER_DOM_DEBUG: false,
264-
},
265-
preventAssignment: true,
266-
}),
210+
replacePlugin(),
267211
babelPlugin({
268212
transpileToES5: true,
269213
allowConsole: false,
@@ -280,12 +224,7 @@ const IIFEModules = [
280224
sourcemap: true,
281225
},
282226
plugins: [
283-
replace({
284-
values: {
285-
WORKER_DOM_DEBUG: true,
286-
},
287-
preventAssignment: true,
288-
}),
227+
replacePlugin({ debug: true }),
289228
babelPlugin({
290229
transpileToES5: true,
291230
allowConsole: true,

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"ava": "3.15.0",
5252
"babel-plugin-minify-replace": "0.5.0",
5353
"babel-plugin-transform-remove-console": "6.9.4",
54+
"benchmark": "2.1.4",
5455
"cross-env": "7.0.3",
5556
"esm": "3.2.25",
5657
"husky": "7.0.2",

‎src/worker-thread/MutationTransfer.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ let pendingMutations: Array<number> = [];
1313

1414
// TODO(choumx): Change `mutation` to Array<Uint16> to prevent casting errors e.g. integer underflow, precision loss.
1515
export function transfer(document: Document | DocumentStub, mutation: Array<number>): void {
16+
if (process.env.SERVER) {
17+
return;
18+
}
19+
1620
if (phase > Phase.Initializing && document[TransferrableKeys.allowTransfer]) {
1721
pending = true;
1822
pendingMutations = pendingMutations.concat(mutation);

‎src/worker-thread/dom/Element.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ export class Element extends ParentNode {
7676

7777
public localName: NodeName;
7878
public attributes: Attr[] = [];
79-
public style: CSSStyleDeclaration = new CSSStyleDeclaration(this);
8079
public namespaceURI: NamespaceURI;
80+
private style_: CSSStyleDeclaration | undefined;
8181

8282
/**
8383
* Element "kind" dictates certain behaviors e.g. start/end tag semantics.
@@ -100,6 +100,15 @@ export class Element extends ParentNode {
100100
];
101101
}
102102

103+
// We lazily instantiate the CSSStyleDeclaration to keep element creation cheap
104+
// See https://github.com/ampproject/worker-dom/pull/1096 for context.
105+
get style(): CSSStyleDeclaration {
106+
if (!this.style_) {
107+
this.style_ = new CSSStyleDeclaration(this);
108+
}
109+
return this.style_;
110+
}
111+
103112
// Unimplemented properties
104113
// Element.clientHeight – https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
105114
// Element.clientLeft – https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft

‎src/worker-thread/dom/Node.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,12 @@ export abstract class Node {
5151
constructor(nodeType: NodeType, nodeName: NodeName, ownerDocument: Node | null, overrideIndex?: number) {
5252
this.nodeType = nodeType;
5353
this.nodeName = nodeName;
54-
5554
this.ownerDocument = ownerDocument || this;
56-
this[TransferrableKeys.scopingRoot] = this;
55+
if (process.env.SERVER) {
56+
return;
57+
}
5758

59+
this[TransferrableKeys.scopingRoot] = this;
5860
this[TransferrableKeys.index] = overrideIndex ? storeOverrideNodeMapping(this, overrideIndex) : storeNodeMapping(this);
5961
this[TransferrableKeys.transferredFormat] = [this[TransferrableKeys.index]];
6062
}

0 commit comments

Comments
 (0)