2024-01-01 14:58:21 -05:00
|
|
|
// Copyright 2018-2024 the Deno authors. All rights reserved. MIT license.
|
perf(ext/event): optimize Event constructor (#20181)
This PR optimizes `Event` constructor
- ~Added a fast path for empty `eventInitDict`~ Removed `EventInit`
dictionary converter
- Don't make `isTrusted` a
[LegacyUnforgeable](https://webidl.spec.whatwg.org/#LegacyUnforgeable)
property. Doing so makes it non-spec compliant but calling
`Object/Reflect.defineProperty` on the constructor is a big bottleneck.
Node did the same a few months ago
https://github.com/nodejs/node/pull/46974. In my opinion, the
performance gains are worth deviating from the spec for a
browser-related property.
**This PR**
```
cpu: 13th Gen Intel(R) Core(TM) i9-13900H
runtime: deno 1.36.1 (x86_64-unknown-linux-gnu)
benchmark time (avg) iter/s (min … max) p75 p99 p995
------------------------------------------------------------------------------- -----------------------------
event constructor no init 36.69 ns/iter 27,257,504.6 (33.36 ns … 42.45 ns) 37.71 ns 39.61 ns 40.07 ns
event constructor 36.7 ns/iter 27,246,776.6 (33.35 ns … 56.03 ns) 37.73 ns 40.14 ns 41.74 ns
```
**main**
```
cpu: 13th Gen Intel(R) Core(TM) i9-13900H
runtime: deno 1.36.1 (x86_64-unknown-linux-gnu)
benchmark time (avg) iter/s (min … max) p75 p99 p995
------------------------------------------------------------------------------- -----------------------------
event constructor no init 380.48 ns/iter 2,628,275.8 (366.66 ns … 399.39 ns) 384.58 ns 398.27 ns 399.39 ns
event constructor 480.33 ns/iter 2,081,882.6 (466.67 ns … 503.47 ns) 484.27 ns 501.28 ns 503.47 ns
```
```js
Deno.bench("event constructor no init", () => {
const event = new Event("foo");
});
Deno.bench("event constructor", () => {
const event = new Event("foo", { bubbles: true, cancelable: false });
});
```
towards https://github.com/denoland/deno/issues/20167
2023-08-17 04:35:18 -04:00
|
|
|
import { assertEquals, assertStringIncludes } from "./test_util.ts";
|
2021-11-23 11:45:18 -05:00
|
|
|
|
|
|
|
Deno.test(function eventInitializedWithType() {
|
2019-01-05 10:02:44 -05:00
|
|
|
const type = "click";
|
|
|
|
const event = new Event(type);
|
|
|
|
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(event.isTrusted, false);
|
|
|
|
assertEquals(event.target, null);
|
|
|
|
assertEquals(event.currentTarget, null);
|
|
|
|
assertEquals(event.type, "click");
|
|
|
|
assertEquals(event.bubbles, false);
|
|
|
|
assertEquals(event.cancelable, false);
|
2019-01-05 10:02:44 -05:00
|
|
|
});
|
|
|
|
|
2021-11-23 11:45:18 -05:00
|
|
|
Deno.test(function eventInitializedWithTypeAndDict() {
|
2019-01-05 10:02:44 -05:00
|
|
|
const init = "submit";
|
2019-09-17 12:17:12 -04:00
|
|
|
const eventInit = { bubbles: true, cancelable: true } as EventInit;
|
|
|
|
const event = new Event(init, eventInit);
|
2019-01-05 10:02:44 -05:00
|
|
|
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(event.isTrusted, false);
|
|
|
|
assertEquals(event.target, null);
|
|
|
|
assertEquals(event.currentTarget, null);
|
|
|
|
assertEquals(event.type, "submit");
|
|
|
|
assertEquals(event.bubbles, true);
|
|
|
|
assertEquals(event.cancelable, true);
|
2019-01-05 10:02:44 -05:00
|
|
|
});
|
|
|
|
|
2021-11-23 11:45:18 -05:00
|
|
|
Deno.test(function eventComposedPathSuccess() {
|
2019-01-05 10:02:44 -05:00
|
|
|
const type = "click";
|
|
|
|
const event = new Event(type);
|
|
|
|
const composedPath = event.composedPath();
|
|
|
|
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(composedPath, []);
|
2019-01-05 10:02:44 -05:00
|
|
|
});
|
|
|
|
|
2021-11-23 11:45:18 -05:00
|
|
|
Deno.test(function eventStopPropagationSuccess() {
|
2019-01-05 10:02:44 -05:00
|
|
|
const type = "click";
|
|
|
|
const event = new Event(type);
|
|
|
|
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(event.cancelBubble, false);
|
2019-01-05 10:02:44 -05:00
|
|
|
event.stopPropagation();
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(event.cancelBubble, true);
|
2019-01-05 10:02:44 -05:00
|
|
|
});
|
|
|
|
|
2021-11-23 11:45:18 -05:00
|
|
|
Deno.test(function eventStopImmediatePropagationSuccess() {
|
2019-01-05 10:02:44 -05:00
|
|
|
const type = "click";
|
|
|
|
const event = new Event(type);
|
|
|
|
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(event.cancelBubble, false);
|
2019-01-05 10:02:44 -05:00
|
|
|
event.stopImmediatePropagation();
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(event.cancelBubble, true);
|
2019-01-05 10:02:44 -05:00
|
|
|
});
|
|
|
|
|
2021-11-23 11:45:18 -05:00
|
|
|
Deno.test(function eventPreventDefaultSuccess() {
|
2019-01-05 10:02:44 -05:00
|
|
|
const type = "click";
|
|
|
|
const event = new Event(type);
|
|
|
|
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(event.defaultPrevented, false);
|
2019-01-05 10:02:44 -05:00
|
|
|
event.preventDefault();
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(event.defaultPrevented, false);
|
2019-01-05 10:02:44 -05:00
|
|
|
|
2019-09-17 12:17:12 -04:00
|
|
|
const eventInit = { bubbles: true, cancelable: true } as EventInit;
|
|
|
|
const cancelableEvent = new Event(type, eventInit);
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(cancelableEvent.defaultPrevented, false);
|
2019-01-05 10:02:44 -05:00
|
|
|
cancelableEvent.preventDefault();
|
2019-03-06 20:48:46 -05:00
|
|
|
assertEquals(cancelableEvent.defaultPrevented, true);
|
2019-01-05 10:02:44 -05:00
|
|
|
});
|
2019-03-26 07:42:26 -04:00
|
|
|
|
2021-11-23 11:45:18 -05:00
|
|
|
Deno.test(function eventInitializedWithNonStringType() {
|
2020-11-03 10:19:29 -05:00
|
|
|
// deno-lint-ignore no-explicit-any
|
2020-02-19 15:36:18 -05:00
|
|
|
const type: any = undefined;
|
2019-03-26 07:42:26 -04:00
|
|
|
const event = new Event(type);
|
|
|
|
|
|
|
|
assertEquals(event.isTrusted, false);
|
|
|
|
assertEquals(event.target, null);
|
|
|
|
assertEquals(event.currentTarget, null);
|
|
|
|
assertEquals(event.type, "undefined");
|
|
|
|
assertEquals(event.bubbles, false);
|
|
|
|
assertEquals(event.cancelable, false);
|
|
|
|
});
|
2019-06-20 08:21:43 -04:00
|
|
|
|
2021-11-23 11:45:18 -05:00
|
|
|
Deno.test(function eventInspectOutput() {
|
2020-11-03 10:19:29 -05:00
|
|
|
// deno-lint-ignore no-explicit-any
|
2020-10-26 18:22:03 -04:00
|
|
|
const cases: Array<[any, (event: any) => string]> = [
|
|
|
|
[
|
|
|
|
new Event("test"),
|
|
|
|
(event: Event) =>
|
2021-02-13 09:58:12 -05:00
|
|
|
`Event {\n bubbles: false,\n cancelable: false,\n composed: false,\n currentTarget: null,\n defaultPrevented: false,\n eventPhase: 0,\n srcElement: null,\n target: null,\n returnValue: true,\n timeStamp: ${event.timeStamp},\n type: "test"\n}`,
|
2020-10-26 18:22:03 -04:00
|
|
|
],
|
|
|
|
[
|
|
|
|
new ErrorEvent("error"),
|
|
|
|
(event: Event) =>
|
2022-06-29 08:29:08 -04:00
|
|
|
`ErrorEvent {\n bubbles: false,\n cancelable: false,\n composed: false,\n currentTarget: null,\n defaultPrevented: false,\n eventPhase: 0,\n srcElement: null,\n target: null,\n returnValue: true,\n timeStamp: ${event.timeStamp},\n type: "error",\n message: "",\n filename: "",\n lineno: 0,\n colno: 0,\n error: undefined\n}`,
|
2020-10-26 18:22:03 -04:00
|
|
|
],
|
|
|
|
[
|
|
|
|
new CloseEvent("close"),
|
|
|
|
(event: Event) =>
|
2021-02-13 09:58:12 -05:00
|
|
|
`CloseEvent {\n bubbles: false,\n cancelable: false,\n composed: false,\n currentTarget: null,\n defaultPrevented: false,\n eventPhase: 0,\n srcElement: null,\n target: null,\n returnValue: true,\n timeStamp: ${event.timeStamp},\n type: "close",\n wasClean: false,\n code: 0,\n reason: ""\n}`,
|
2020-10-26 18:22:03 -04:00
|
|
|
],
|
|
|
|
[
|
|
|
|
new CustomEvent("custom"),
|
|
|
|
(event: Event) =>
|
2021-02-13 09:58:12 -05:00
|
|
|
`CustomEvent {\n bubbles: false,\n cancelable: false,\n composed: false,\n currentTarget: null,\n defaultPrevented: false,\n eventPhase: 0,\n srcElement: null,\n target: null,\n returnValue: true,\n timeStamp: ${event.timeStamp},\n type: "custom",\n detail: undefined\n}`,
|
2020-10-26 18:22:03 -04:00
|
|
|
],
|
|
|
|
[
|
|
|
|
new ProgressEvent("progress"),
|
|
|
|
(event: Event) =>
|
2021-02-13 09:58:12 -05:00
|
|
|
`ProgressEvent {\n bubbles: false,\n cancelable: false,\n composed: false,\n currentTarget: null,\n defaultPrevented: false,\n eventPhase: 0,\n srcElement: null,\n target: null,\n returnValue: true,\n timeStamp: ${event.timeStamp},\n type: "progress",\n lengthComputable: false,\n loaded: 0,\n total: 0\n}`,
|
2020-10-26 18:22:03 -04:00
|
|
|
],
|
|
|
|
];
|
|
|
|
|
|
|
|
for (const [event, outputProvider] of cases) {
|
2021-02-09 10:31:46 -05:00
|
|
|
assertEquals(Deno.inspect(event), outputProvider(event));
|
2020-10-26 18:22:03 -04:00
|
|
|
}
|
|
|
|
});
|
2021-06-24 09:43:41 -04:00
|
|
|
|
2021-11-23 11:45:18 -05:00
|
|
|
Deno.test(function inspectEvent() {
|
2021-06-24 09:43:41 -04:00
|
|
|
// has a customInspect implementation that previously would throw on a getter
|
|
|
|
assertEquals(
|
|
|
|
Deno.inspect(Event.prototype),
|
|
|
|
`Event {
|
2021-06-24 14:21:13 -04:00
|
|
|
bubbles: [Getter],
|
|
|
|
cancelable: [Getter],
|
|
|
|
composed: [Getter],
|
|
|
|
currentTarget: [Getter],
|
|
|
|
defaultPrevented: [Getter],
|
|
|
|
eventPhase: [Getter],
|
2021-06-24 09:43:41 -04:00
|
|
|
srcElement: [Getter/Setter],
|
2021-06-24 14:21:13 -04:00
|
|
|
target: [Getter],
|
2021-06-24 09:43:41 -04:00
|
|
|
returnValue: [Getter/Setter],
|
2021-06-24 14:21:13 -04:00
|
|
|
timeStamp: [Getter],
|
|
|
|
type: [Getter]
|
2021-06-24 09:43:41 -04:00
|
|
|
}`,
|
|
|
|
);
|
|
|
|
|
|
|
|
// ensure this still works
|
|
|
|
assertStringIncludes(
|
|
|
|
Deno.inspect(new Event("test")),
|
|
|
|
// check a substring because one property is a timestamp
|
|
|
|
`Event {\n bubbles: false,\n cancelable: false,`,
|
|
|
|
);
|
|
|
|
});
|
2024-05-22 18:03:35 -04:00
|
|
|
|
|
|
|
Deno.test("default argument is null prototype", () => {
|
|
|
|
const event = new Event("test");
|
|
|
|
assertEquals(event.bubbles, false);
|
|
|
|
|
|
|
|
// @ts-ignore this is on purpose to check if overriding prototype
|
|
|
|
// has effect on `Event.
|
|
|
|
Object.prototype.bubbles = true;
|
|
|
|
const event2 = new Event("test");
|
|
|
|
assertEquals(event2.bubbles, false);
|
|
|
|
|
|
|
|
// @ts-ignore this is done on purpose
|
|
|
|
delete Object.prototype.bubbles;
|
|
|
|
});
|