perf: use querySelector* for pure CSS selectors (#9835)

This commit is contained in:
jrandolf 2023-03-13 15:37:30 +01:00 committed by GitHub
parent e5b5645a0a
commit 8aea8e0471
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 4 deletions

View File

@ -170,6 +170,10 @@ class PQueryEngine {
} }
} }
type QueryableNode = {
querySelectorAll: typeof Document.prototype.querySelectorAll;
};
/** /**
* Queries the given node for all nodes matching the given text selector. * Queries the given node for all nodes matching the given text selector.
* *
@ -180,8 +184,9 @@ export const pQuerySelectorAll = async function* (
selector: string selector: string
): AwaitableIterable<Node> { ): AwaitableIterable<Node> {
let selectors: ComplexPSelectorList; let selectors: ComplexPSelectorList;
let isPureCSS: boolean;
try { try {
selectors = parsePSelectors(selector); [selectors, isPureCSS] = parsePSelectors(selector);
} catch (error) { } catch (error) {
if (!isErrorLike(error)) { if (!isErrorLike(error)) {
throw new SelectorError(selector, String(error)); throw new SelectorError(selector, String(error));
@ -189,6 +194,11 @@ export const pQuerySelectorAll = async function* (
throw new SelectorError(selector, error.message); throw new SelectorError(selector, error.message);
} }
if (isPureCSS) {
yield* (root as unknown as QueryableNode).querySelectorAll(selector);
return;
}
// If there are any empty elements, then this implies the selector has // If there are any empty elements, then this implies the selector has
// contiguous combinators (e.g. `>>> >>>>`) or starts/ends with one which we // contiguous combinators (e.g. `>>> >>>>`) or starts/ends with one which we
// treat as illegal, similar to existing behavior. // treat as illegal, similar to existing behavior.

View File

@ -75,10 +75,13 @@ const unquote = (text: string): string => {
return text; return text;
}; };
export function parsePSelectors(selector: string): ComplexPSelectorList { export function parsePSelectors(
selector: string
): [selector: ComplexPSelectorList, isPureCSS: boolean] {
let isPureCSS = true;
const tokens = tokenize(selector); const tokens = tokenize(selector);
if (tokens.length === 0) { if (tokens.length === 0) {
return []; return [[], isPureCSS];
} }
let compoundSelector: CompoundPSelector = []; let compoundSelector: CompoundPSelector = [];
let complexSelector: ComplexPSelector = [compoundSelector]; let complexSelector: ComplexPSelector = [compoundSelector];
@ -89,6 +92,7 @@ export function parsePSelectors(selector: string): ComplexPSelectorList {
case 'combinator': case 'combinator':
switch (token.content) { switch (token.content) {
case '>>>': case '>>>':
isPureCSS = false;
if (storage.length) { if (storage.length) {
compoundSelector.push(storage.toStringAndClear()); compoundSelector.push(storage.toStringAndClear());
} }
@ -97,6 +101,7 @@ export function parsePSelectors(selector: string): ComplexPSelectorList {
complexSelector.push(compoundSelector); complexSelector.push(compoundSelector);
continue; continue;
case '>>>>': case '>>>>':
isPureCSS = false;
if (storage.length) { if (storage.length) {
compoundSelector.push(storage.toStringAndClear()); compoundSelector.push(storage.toStringAndClear());
} }
@ -110,6 +115,7 @@ export function parsePSelectors(selector: string): ComplexPSelectorList {
if (!token.name.startsWith('-p-')) { if (!token.name.startsWith('-p-')) {
break; break;
} }
isPureCSS = false;
if (storage.length) { if (storage.length) {
compoundSelector.push(storage.toStringAndClear()); compoundSelector.push(storage.toStringAndClear());
} }
@ -132,5 +138,5 @@ export function parsePSelectors(selector: string): ComplexPSelectorList {
if (storage.length) { if (storage.length) {
compoundSelector.push(storage.toStringAndClear()); compoundSelector.push(storage.toStringAndClear());
} }
return selectors; return [selectors, isPureCSS];
} }