From 9e7f979c5b189764786a62cfd3753c2d71e39d6b Mon Sep 17 00:00:00 2001 From: "asamuzaK (Kazz)" Date: Sat, 26 Aug 2023 23:29:57 +0900 Subject: [PATCH] Update benchmark.js --- benchmark/benchmark.js | 240 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 238 insertions(+), 2 deletions(-) diff --git a/benchmark/benchmark.js b/benchmark/benchmark.js index b9dfa92..9c1dadc 100644 --- a/benchmark/benchmark.js +++ b/benchmark/benchmark.js @@ -83,6 +83,85 @@ document.body.append(container); const docBox = document.getElementById(`box${x - 1}`); const docDiv = document.getElementById(`div${x - 1}-${y - 1}`); +/* patched jsdom */ +const patchedDom = + new JSDOM('', { + runScripts: 'dangerously', + url: 'https://localhost/', + beforeParse: window => { + window.Element.prototype.matches = function (selector) { + return matches(selector, this); + }; + window.Element.prototype.closest = function (selector) { + return closest(selector, this); + }; + window.Document.prototype.querySelector = function (selector) { + return querySelector(selector, this); + }; + window.DocumentFragment.prototype.querySelector = function (selector) { + return querySelector(selector, this); + }; + window.Element.prototype.querySelector = function (selector) { + return querySelector(selector, this); + }; + window.Document.prototype.querySelectorAll = function (selector) { + return querySelectorAll(selector, this); + }; + window.DocumentFragment.prototype.querySelectorAll = function (selector) { + return querySelectorAll(selector, this); + }; + window.Element.prototype.querySelectorAll = function (selector) { + return querySelectorAll(selector, this); + }; + } + }); + +const patchedDoc = patchedDom.window.document; +const patchedXyFrag = patchedDoc.createDocumentFragment(); +for (let i = 0; i < x; i++) { + const xNode = patchedDoc.createElement('div'); + xNode.id = `box${i}`; + xNode.classList.add('box'); + xyFrag.appendChild(xNode); + const yFrag = patchedDoc.createDocumentFragment(); + for (let j = 0; j < y; j++) { + const yNode = patchedDoc.createElement('div'); + yNode.id = `div${i}-${j}`; + if (j === 0) { + yFrag.appendChild(yNode); + } else if (j === y - 1) { + yNode.classList.add('div'); + yNode.textContent = `${i}-${j}`; + yFrag.appendChild(yNode); + xNode.appendChild(yFrag); + } else { + const parent = yFrag.getElementById(`div${i}-${j - 1}`); + parent.appendChild(yNode); + } + } +} + +const patchedContainer = patchedDoc.createElement('div'); +patchedContainer.classList.add('box-container'); +patchedContainer.appendChild(xyFrag); + +const patchedFragContainer = patchedContainer.cloneNode(true); +const patchedFragment = patchedDoc.createDocumentFragment(); +patchedFragment.append(patchedFragContainer); +const patchedFragBox = patchedFragment.getElementById(`box${x - 1}`); +const patchedFragDiv = patchedFragment.getElementById(`div${x - 1}-${y - 1}`); + +const patchedElmContainer = patchedContainer.cloneNode(true); +patchedDoc.body.append(patchedElmContainer); +const patchedElmBox = patchedDoc.getElementById(`box${x - 1}`); +const patchedElmDiv = patchedDoc.getElementById(`div${x - 1}-${y - 1}`); +const patchedElmRoot = patchedDoc.createElement('div'); +patchedElmRoot.append(patchedDoc.body.removeChild(patchedElmContainer)); + +patchedDoc.body.append(container); +const patchedDocBox = patchedDoc.getElementById(`box${x - 1}`); +const patchedDocDiv = patchedDoc.getElementById(`div${x - 1}-${y - 1}`); + /* linkeDOM */ const { document: linkeDoc @@ -337,12 +416,16 @@ const setForOf = () => { const elementMatches = (type, api, selector) => { let box; let div; + let patchedBox; + let patchedDiv; let linkeBox; let linkeDiv; switch (type) { case 'document': { box = docBox; div = docDiv; + patchedBox = patchedDocBox; + patchedDiv = patchedDocDiv; linkeBox = linkeDocBox; linkeDiv = linkeDocDiv; break; @@ -350,6 +433,8 @@ const elementMatches = (type, api, selector) => { case 'fragment': { box = fragBox; div = fragDiv; + patchedBox = patchedFragBox; + patchedDiv = patchedFragDiv; linkeBox = linkeFragBox; linkeDiv = linkeFragDiv; break; @@ -358,6 +443,8 @@ const elementMatches = (type, api, selector) => { default: { box = elmBox; div = elmDiv; + patchedBox = patchedElmBox; + patchedDiv = patchedElmDiv; linkeBox = linkeElmBox; linkeDiv = linkeElmDiv; } @@ -369,6 +456,12 @@ const elementMatches = (type, api, selector) => { } else if (value === 'div') { div.matches(key); } + } else if (api === 'patched-jsdom') { + if (value === 'box') { + patchedBox.matches(key); + } else if (value === 'div') { + patchedDiv.matches(key); + } } else if (api === 'linkedom') { if (value === 'box') { linkeBox.matches(key); @@ -393,12 +486,16 @@ const elementMatches = (type, api, selector) => { const elementClosest = (type, api, selector) => { let box; let div; + let patchedBox; + let patchedDiv; let linkeBox; let linkeDiv; switch (type) { case 'document': { box = docBox; div = docDiv; + patchedBox = patchedDocBox; + patchedDiv = patchedDocDiv; linkeBox = linkeDocBox; linkeDiv = linkeDocDiv; break; @@ -406,6 +503,8 @@ const elementClosest = (type, api, selector) => { case 'fragment': { box = fragBox; div = fragDiv; + patchedBox = patchedFragBox; + patchedDiv = patchedFragDiv; linkeBox = linkeFragBox; linkeDiv = linkeFragDiv; break; @@ -414,6 +513,8 @@ const elementClosest = (type, api, selector) => { default: { box = elmBox; div = elmDiv; + patchedBox = patchedElmBox; + patchedDiv = patchedElmDiv; linkeBox = linkeElmBox; linkeDiv = linkeElmDiv; } @@ -425,6 +526,12 @@ const elementClosest = (type, api, selector) => { } else if (value === 'div') { div.closest(key); } + } else if (api === 'patched-jsdom') { + if (value === 'box') { + patchedBox.closest(key); + } else if (value === 'div') { + patchedDiv.closest(key); + } } else if (api === 'linkedom') { if (value === 'box') { linkeBox.closest(key); @@ -448,27 +555,33 @@ const elementClosest = (type, api, selector) => { const refPointQuerySelector = (type, api, selector) => { let refPoint; + let patchedRefPoint; let linkeRefPoint; switch (type) { case 'document': { refPoint = document; + patchedRefPoint = patchedDoc; linkeRefPoint = linkeDoc; break; } case 'fragment': { refPoint = fragment; + patchedRefPoint = patchedFragment; linkeRefPoint = linkeFragment; break; } case 'element': default: { refPoint = elmRoot; + patchedRefPoint = patchedElmRoot; linkeRefPoint = linkeElmRoot; } } const [key] = selector; if (api === 'jsdom') { refPoint.querySelector(key); + } else if (api === 'patched-jsdom') { + patchedRefPoint.querySelector(key); } else if (api === 'linkedom') { linkeRefPoint.querySelector(key); } else if (api === 'xpath') { @@ -483,27 +596,33 @@ const refPointQuerySelector = (type, api, selector) => { const refPointQuerySelectorAll = (type, api, selector) => { let refPoint; + let patchedRefPoint; let linkeRefPoint; switch (type) { case 'document': { refPoint = document; + patchedRefPoint = patchedDoc; linkeRefPoint = linkeDoc; break; } case 'fragment': { refPoint = fragment; + patchedRefPoint = patchedFragment; linkeRefPoint = linkeFragment; break; } case 'element': default: { refPoint = elmRoot; + patchedRefPoint = patchedElmRoot; linkeRefPoint = linkeElmRoot; } } const [key] = selector; if (api === 'jsdom') { refPoint.querySelectorAll(key); + } else if (api === 'patched-jsdom') { + patchedRefPoint.querySelectorAll(key); } else if (api === 'linkedom') { linkeRefPoint.querySelectorAll(key); } else if (api === 'xpath') { @@ -585,131 +704,206 @@ suite.on('start', async () => { setForOf(); }).add('set forEach', () => { setForEach(); -*/ }).add('dom-selector matches - document - 0', () => { elementMatches('document', null, selectorItems[0]); +*/ }).add('jsdom matches - document - 0', () => { elementMatches('document', 'jsdom', selectorItems[0]); +}).add('patched-jsdom matches - document - 0', () => { + elementMatches('document', 'patched-jsdom', selectorItems[0]); +/* }).add('altdom matches - document - 0', () => { elementMatches('document', 'altdom', selectorItems[0]); }).add('dom-selector matches - document - 1', () => { elementMatches('document', null, selectorItems[1]); +*/ }).add('jsdom matches - document - 1', () => { elementMatches('document', 'jsdom', selectorItems[1]); +}).add('patched-jsdom matches - document - 1', () => { + elementMatches('document', 'patched-jsdom', selectorItems[1]); +/* }).add('altdom matches - document - 1', () => { elementMatches('document', 'altdom', selectorItems[1]); }).add('dom-selector matches - document - 2', () => { elementMatches('document', null, selectorItems[2]); +*/ }).add('jsdom matches - document - 2', () => { elementMatches('document', 'jsdom', selectorItems[2]); +}).add('patched-jsdom matches - document - 2', () => { + elementMatches('document', 'patched-jsdom', selectorItems[2]); +/* }).add('altdom matches - document - 2', () => { elementMatches('document', 'altdom', selectorItems[2]); }).add('dom-selector matches - document - 3', () => { elementMatches('document', null, selectorItems[3]); +*/ }).add('jsdom matches - document - 3', () => { elementMatches('document', 'jsdom', selectorItems[3]); +}).add('patched-jsdom matches - document - 3', () => { + elementMatches('document', 'patched-jsdom', selectorItems[3]); +/* }).add('altdom matches - document - 3', () => { elementMatches('document', 'altdom', selectorItems[3]); }).add('dom-selector matches - document - 4', () => { elementMatches('document', null, selectorItems[4]); +*/ }).add('jsdom matches - document - 4', () => { elementMatches('document', 'jsdom', selectorItems[4]); +}).add('patched-jsdom matches - document - 4', () => { + elementMatches('document', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom matches - document - 4', () => { elementMatches('document', 'altdom', selectorItems[4]); }).add('linkedom matches - document - 4', () => { elementMatches('document', 'linkedom', selectorItems[4]); }).add('dom-selector matches - fragment - 4', () => { elementMatches('fragment', null, selectorItems[4]); +*/ }).add('jsdom matches - fragment - 4', () => { elementMatches('fragment', 'jsdom', selectorItems[4]); +}).add('patched-jsdom matches - fragment - 4', () => { + elementMatches('fragment', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom matches - fragment - 4', () => { elementMatches('fragment', 'altdom', selectorItems[4]); }).add('linkedom matches - fragment - 4', () => { elementMatches('fragment', 'linkedom', selectorItems[4]); }).add('dom-selector matches - element - 4', () => { elementMatches('element', null, selectorItems[4]); +*/ }).add('jsdom matches - element - 4', () => { elementMatches('element', 'jsdom', selectorItems[4]); +}).add('patched-jsdom matches - element - 4', () => { + elementMatches('element', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom matches - element - 4', () => { elementMatches('element', 'altdom', selectorItems[4]); }).add('linkedom matches - element - 4', () => { elementMatches('element', 'linkedom', selectorItems[4]); }).add('dom-selector closest - document - 0', () => { elementClosest('document', null, selectorItems[0]); +*/ }).add('jsdom closest - document - 0', () => { elementClosest('document', 'jsdom', selectorItems[0]); +}).add('patched-jsdom closest - document - 0', () => { + elementClosest('document', 'patched-jsdom', selectorItems[0]); +/* }).add('altdom closest - document - 0', () => { elementClosest('document', 'altdom', selectorItems[0]); }).add('dom-selector closest - document - 1', () => { elementClosest('document', null, selectorItems[1]); +*/ }).add('jsdom closest - document - 1', () => { elementClosest('document', 'jsdom', selectorItems[1]); +}).add('patched-jsdom closest - document - 1', () => { + elementClosest('document', 'patched-jsdom', selectorItems[1]); +/* }).add('altdom closest - document - 1', () => { elementClosest('document', 'altdom', selectorItems[1]); }).add('dom-selector closest - document - 2', () => { elementClosest('document', null, selectorItems[2]); +*/ }).add('jsdom closest - document - 2', () => { elementClosest('document', 'jsdom', selectorItems[2]); +}).add('patched-jsdom closest - document - 2', () => { + elementClosest('document', 'patched-jsdom', selectorItems[2]); +/* }).add('altdom closest - document - 2', () => { elementClosest('document', 'altdom', selectorItems[2]); }).add('dom-selector closest - document - 3', () => { elementClosest('document', null, selectorItems[3]); +*/ }).add('jsdom closest - document - 3', () => { elementClosest('document', 'jsdom', selectorItems[3]); +}).add('patched-jsdom closest - document - 3', () => { + elementClosest('document', 'patched-jsdom', selectorItems[3]); +/* }).add('altdom closest - document - 3', () => { elementClosest('document', 'altdom', selectorItems[3]); }).add('dom-selector closest - document - 4', () => { elementClosest('document', null, selectorItems[4]); +*/ }).add('jsdom closest - document - 4', () => { elementClosest('document', 'jsdom', selectorItems[4]); +}).add('patched-jsdom closest - document - 4', () => { + elementClosest('document', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom closest - document - 4', () => { elementClosest('document', 'altdom', selectorItems[4]); }).add('linkedom closest - document - 4', () => { elementClosest('document', 'linkedom', selectorItems[4]); }).add('dom-selector closest - fragment - 4', () => { elementClosest('fragment', null, selectorItems[4]); +*/ }).add('jsdom closest - fragment - 4', () => { elementClosest('fragment', 'jsdom', selectorItems[4]); +}).add('patched-jsdom closest - fragment - 4', () => { + elementClosest('fragment', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom closest - fragment - 4', () => { elementClosest('fragment', 'altdom', selectorItems[4]); }).add('linkedom closest - fragment - 4', () => { elementClosest('fragment', 'linkedom', selectorItems[4]); }).add('dom-selector closest - element - 4', () => { elementClosest('element', null, selectorItems[4]); +*/ }).add('jsdom closest - element - 4', () => { elementClosest('element', 'jsdom', selectorItems[4]); +}).add('patched-jsdom closest - element - 4', () => { + elementClosest('element', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom closest - element - 4', () => { elementClosest('element', 'altdom', selectorItems[4]); }).add('linkedom closest - element - 4', () => { elementClosest('element', 'linkedom', selectorItems[4]); }).add('dom-selector querySelector - document - 0', () => { refPointQuerySelector('document', null, selectorItems[0]); +*/ }).add('jsdom querySelector - document - 0', () => { refPointQuerySelector('document', 'jsdom', selectorItems[0]); +}).add('patched-jsdom querySelector - document - 0', () => { + refPointQuerySelector('document', 'patched-jsdom', selectorItems[0]); +/* }).add('altdom querySelector - document - 0', () => { refPointQuerySelector('document', 'altdom', selectorItems[0]); }).add('dom-selector querySelector - document - 1', () => { refPointQuerySelector('document', null, selectorItems[1]); +*/ }).add('jsdom querySelector - document - 1', () => { refPointQuerySelector('document', 'jsdom', selectorItems[1]); +}).add('patched-jsdom querySelector - document - 1', () => { + refPointQuerySelector('document', 'patched-jsdom', selectorItems[1]); +/* }).add('altdom querySelector - document - 1', () => { refPointQuerySelector('document', 'altdom', selectorItems[1]); }).add('dom-selector querySelector - document - 2', () => { refPointQuerySelector('document', null, selectorItems[2]); +*/ }).add('jsdom querySelector - document - 2', () => { refPointQuerySelector('document', 'jsdom', selectorItems[2]); +}).add('patched-jsdom querySelector - document - 2', () => { + refPointQuerySelector('document', 'patched-jsdom', selectorItems[2]); +/* }).add('altdom querySelector - document - 2', () => { refPointQuerySelector('document', 'altdom', selectorItems[2]); }).add('dom-selector querySelector - document - 3', () => { refPointQuerySelector('document', null, selectorItems[3]); +*/ }).add('jsdom querySelector - document - 3', () => { refPointQuerySelector('document', 'jsdom', selectorItems[3]); +}).add('patched-jsdom querySelector - document - 3', () => { + refPointQuerySelector('document', 'patched-jsdom', selectorItems[3]); +/* }).add('altdom querySelector - document - 3', () => { refPointQuerySelector('document', 'altdom', selectorItems[3]); }).add('dom-selector querySelector - document - 4', () => { refPointQuerySelector('document', null, selectorItems[4]); +*/ }).add('jsdom querySelector - document - 4', () => { refPointQuerySelector('document', 'jsdom', selectorItems[4]); +}).add('patched-jsdom querySelector - document - 4', () => { + refPointQuerySelector('document', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom querySelector - document - 4', () => { refPointQuerySelector('document', 'altdom', selectorItems[4]); }).add('linkedom querySelector - document - 4', () => { @@ -718,16 +912,24 @@ suite.on('start', async () => { refPointQuerySelector('document', 'xpath', selectorItems[4]); }).add('dom-selector querySelector - fragment - 4', () => { refPointQuerySelector('fragment', null, selectorItems[4]); +*/ }).add('jsdom querySelector - fragment - 4', () => { refPointQuerySelector('fragment', 'jsdom', selectorItems[4]); +}).add('patched-jsdom querySelector - fragment - 4', () => { + refPointQuerySelector('fragment', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom querySelector - fragment - 4', () => { refPointQuerySelector('fragment', 'altdom', selectorItems[4]); }).add('linkedom querySelector - fragment - 4', () => { refPointQuerySelector('fragment', 'linkedom', selectorItems[4]); }).add('dom-selector querySelector - element - 4', () => { refPointQuerySelector('element', null, selectorItems[4]); +*/ }).add('jsdom querySelector - element - 4', () => { refPointQuerySelector('element', 'jsdom', selectorItems[4]); +}).add('patched-jsdom querySelector - element - 4', () => { + refPointQuerySelector('element', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom querySelector - element - 4', () => { refPointQuerySelector('element', 'altdom', selectorItems[4]); }).add('linkedom querySelector - element - 4', () => { @@ -736,32 +938,52 @@ suite.on('start', async () => { refPointQuerySelector('element', 'xpath', selectorItems[4]); }).add('dom-selector querySelectorAll - document - 0', () => { refPointQuerySelectorAll('document', null, selectorItems[0]); +*/ }).add('jsdom querySelectorAll - document - 0', () => { refPointQuerySelectorAll('document', 'jsdom', selectorItems[0]); +}).add('patched-jsdom querySelectorAll - document - 0', () => { + refPointQuerySelectorAll('document', 'patched-jsdom', selectorItems[0]); +/* }).add('altdom querySelectorAll - document - 0', () => { refPointQuerySelectorAll('document', 'altdom', selectorItems[0]); }).add('dom-selector querySelectorAll - document - 1', () => { refPointQuerySelectorAll('document', null, selectorItems[1]); +*/ }).add('jsdom querySelectorAll - document - 1', () => { refPointQuerySelectorAll('document', 'jsdom', selectorItems[1]); +}).add('patched-jsdom querySelectorAll - document - 1', () => { + refPointQuerySelectorAll('document', 'patched-jsdom', selectorItems[1]); +/* }).add('altdom querySelectorAll - document - 1', () => { refPointQuerySelectorAll('document', 'altdom', selectorItems[1]); }).add('dom-selector querySelectorAll - document - 2', () => { refPointQuerySelectorAll('document', null, selectorItems[2]); +*/ }).add('jsdom querySelectorAll - document - 2', () => { refPointQuerySelectorAll('document', 'jsdom', selectorItems[2]); +}).add('patched-jsdom querySelectorAll - document - 2', () => { + refPointQuerySelectorAll('document', 'patched-jsdom', selectorItems[2]); +/* }).add('altdom querySelectorAll - document - 2', () => { refPointQuerySelectorAll('document', 'altdom', selectorItems[2]); }).add('dom-selector querySelectorAll - document - 3', () => { refPointQuerySelectorAll('document', null, selectorItems[3]); +*/ }).add('jsdom querySelectorAll - document - 3', () => { refPointQuerySelectorAll('document', 'jsdom', selectorItems[3]); +}).add('patched-jsdom querySelectorAll - document - 3', () => { + refPointQuerySelectorAll('document', 'patched-jsdom', selectorItems[3]); +/* }).add('altdom querySelectorAll - document - 3', () => { refPointQuerySelectorAll('document', 'altdom', selectorItems[3]); }).add('dom-selector querySelectorAll - document - 4', () => { refPointQuerySelectorAll('document', null, selectorItems[4]); +*/ }).add('jsdom querySelectorAll - document - 4', () => { refPointQuerySelectorAll('document', 'jsdom', selectorItems[4]); +}).add('patched-jsdom querySelectorAll - document - 4', () => { + refPointQuerySelectorAll('document', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom querySelectorAll - document - 4', () => { refPointQuerySelectorAll('document', 'altdom', selectorItems[4]); }).add('linkedom querySelectorAll - document - 4', () => { @@ -770,24 +992,38 @@ suite.on('start', async () => { refPointQuerySelectorAll('document', 'xpath', selectorItems[4]); }).add('dom-selector querySelectorAll - fragment - 4', () => { refPointQuerySelectorAll('fragment', null, selectorItems[4]); +*/ }).add('jsdom querySelectorAll - fragment - 4', () => { refPointQuerySelectorAll('fragment', 'jsdom', selectorItems[4]); +}).add('patched-jsdom querySelectorAll - fragment - 4', () => { + refPointQuerySelectorAll('fragment', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom querySelectorAll - fragment - 4', () => { refPointQuerySelectorAll('fragment', 'altdom', selectorItems[4]); }).add('linkedom querySelectorAll - fragment - 4', () => { refPointQuerySelectorAll('fragment', 'linkedom', selectorItems[4]); }).add('dom-selector querySelectorAll - element - 4', () => { refPointQuerySelectorAll('element', null, selectorItems[4]); +*/ }).add('jsdom querySelectorAll - element - 4', () => { refPointQuerySelectorAll('element', 'jsdom', selectorItems[4]); +}).add('patched-jsdom querySelectorAll - element - 4', () => { + refPointQuerySelectorAll('element', 'patched-jsdom', selectorItems[4]); +/* }).add('altdom querySelectorAll - element - 4', () => { refPointQuerySelectorAll('element', 'altdom', selectorItems[4]); }).add('linkedom querySelectorAll - element - 4', () => { refPointQuerySelectorAll('element', 'linkedom', selectorItems[4]); }).add('xpath querySelectorAll - element - 4', () => { refPointQuerySelectorAll('element', 'xpath', selectorItems[4]); +*/ }).on('cycle', evt => { - console.log(`* ${String(evt.target)}`); + const str = String(evt.target); + if (str.startsWith('jsdom')) { + console.log(`\n* ${str}`); + } else { + console.log(`* ${str}`); + } }).run({ async: true });