fix(utils): greatly improve the speed of querySelectorAll

lib/core/base/virtual-node/virtual-node.js

@@ -2,6 +2,7 @@ import AbstractVirtualNode from './abstract-virtual-node';
 import { isXHTML, validInputTypes } from '../../utils';
 import { isFocusable, getTabbableElements } from '../../../commons/dom';
 import cache from '../cache';
+import { cacheNodeSelectors } from '../../utils/selector-cache';
 
 let isXHTMLGlobal;
 let nodeIndex = 0;
@@ -50,6 +51,8 @@ class VirtualNode extends AbstractVirtualNode {
     if (cache.get('nodeMap')) {
       cache.get('nodeMap').set(node, this);
     }
+
+    cacheNodeSelectors(this);
   }
 
   // abstract Node properties so we can run axe in DOM-less environments.

lib/core/core.js

@@ -46,6 +46,10 @@ import v2Reporter from './reporters/v2';
 
 import * as commons from '../commons';
 import * as utils from './utils';
+import {
+  cacheNodeSelectors,
+  getNodesMatchingExpression
+} from './utils/selector-cache';
 
 axe.constants = constants;
 axe.log = log;
@@ -70,6 +74,10 @@ axe._thisWillBeDeletedDoNotUse.base = {
 axe._thisWillBeDeletedDoNotUse.public = {
   reporters
 };
+axe._thisWillBeDeletedDoNotUse.utils =
+  axe._thisWillBeDeletedDoNotUse.utils || {};
+axe._thisWillBeDeletedDoNotUse.utils.cacheNodeSelectors = cacheNodeSelectors;
+axe._thisWillBeDeletedDoNotUse.utils.getNodesMatchingExpression = getNodesMatchingExpression;
 
 axe.imports = imports;
 

lib/core/utils/matches.js

@@ -128,6 +128,7 @@ function convertAttributes(atts) {
     return {
       key: attributeKey,
       value: attributeValue,
+      type: typeof att.value === 'undefined' ? 'attrExist' : 'attrValue',
       test: test
     };
   });
@@ -224,6 +225,10 @@ export function convertSelector(selector) {
  * @returns {Boolean}
  */
 function optimizedMatchesExpression(vNode, expressions, index, matchAnyParent) {
+  if (!vNode) {
+    return false;
+  }
+
   const isArray = Array.isArray(expressions);
   const expression = isArray ? expressions[index] : expressions;
   let matches = matchExpression(vNode, expression);

lib/core/utils/query-selector-all-filter.js

@@ -1,4 +1,5 @@
 import { matchesExpression, convertSelector } from './matches';
+import { getNodesMatchingExpression } from './selector-cache';
 
 function createLocalVariables(
   vNodes,
@@ -124,6 +125,17 @@ function matchExpressions(domTree, expressions, filter) {
 function querySelectorAllFilter(domTree, selector, filter) {
   domTree = Array.isArray(domTree) ? domTree : [domTree];
   const expressions = convertSelector(selector);
+
+  // see if the passed in node is the root node of the tree and can
+  // find nodes using the cache rather than looping through the
+  // the entire tree
+  const nodes = getNodesMatchingExpression(domTree, expressions, filter);
+  if (nodes) {
+    return nodes;
+  }
+
+  // if the selector cache is not set up or if not passed the
+  // top level node we default back to parsing the whole tree
   return matchExpressions(domTree, expressions, filter);
 }
 

lib/core/utils/selector-cache.js

@@ -0,0 +1,196 @@
+import { matchesExpression } from './matches';
+import tokenList from './token-list';
+
+// since attribute names can't contain whitespace, this will be
+// a reserved list for ids so we can perform virtual id lookups
+const idsKey = ' [idsMap]';
+let selectorMap = {};
+
+/**
+ * Non-tag selectors use `*` for the tag name so a global selector won't have any other properties of the expression.
+ * @param {Object} exp Selector Expression
+ * @returns {Boolean}
+ */
+function isGlobalSelector(exp) {
+  return exp.tag === '*' && !exp.attributes && !exp.id && !exp.classes;
+}
+
+/**
+ * Save a selector and vNode to the selectorMap
+ * @param {String} key
+ * @param {VirtualNode} vNode
+ * @param {Object} map
+ */
+function cacheSelector(key, vNode, map = selectorMap) {
+  map[key] = map[key] || [];
+  map[key].push(vNode);
+}
+
+/**
+ * Inner join two arrays (find all nodes in a that are also in b).
+ * @param {Mixed[]} a
+ * @param {Mixed[]} b
+ * @returns {Mixed[]}
+ */
+function innerJoin(a, b) {
+  if (!b.length) {
+    return a;
+  }
+
+  return a.filter(node => b.includes(node));
+}
+
+/**
+ * Cache selector information about a VirtalNode.
+ * @param {VirtualNode} vNode
+ */
+export function cacheNodeSelectors(vNode) {
+  if (vNode.props.nodeType !== 1) {
+    return;
+  }
+
+  // cache the selector map to the root node of the tree
+  if (vNode.nodeIndex === 0) {
+    selectorMap = {};
+    vNode._selectorMap = selectorMap;
+  }
+
+  cacheSelector(vNode.props.nodeName, vNode);
+  cacheSelector('*', vNode);
+
+  vNode.attrNames.forEach(attrName => {
+    // element ids are the only values we'll match
+    if (attrName === 'id') {
+      selectorMap[idsKey] = selectorMap[idsKey] || {};
+      tokenList(vNode.attr(attrName)).forEach(value => {
+        cacheSelector(value, vNode, selectorMap[idsKey]);
+      });
+    }
+
+    cacheSelector(`[${attrName}]`, vNode);
+  });
+}
+
+/**
+ * Get nodes from the selector cache that match the selector.
+ * @param {VirtualTree[]} domTree flattened tree collection to search
+ * @param {Object} expressions
+ * @param {Function} filter function (optional)
+ * @return {Mixed} Array of nodes that match the selector or undefined if the selector map is not setup
+ */
+export function getNodesMatchingExpression(domTree, expressions, filter) {
+  // check to see if the domTree is the root and has the selector
+  // map. if not we just return and let our QSA code do the finding
+  const selectorMap = domTree[0]._selectorMap;
+  if (!selectorMap) {
+    return;
+  }
+
+  const shadowId = domTree[0].shadowId;
+
+  // if the selector uses a global selector with a combinator
+  // (e.g. A *, A > *) it's actually faster to use our QSA code than
+  // getting all nodes and using matchesExpression
+  for (let i = 0; i < expressions.length; i++) {
+    if (
+      expressions[i].length > 1 &&
+      expressions[i].some(expression => isGlobalSelector(expression))
+    ) {
+      return;
+    }
+  }
+
+  const nodeSet = new Set();
+
+  // find nodes that match just a part of the selector in order
+  // to speed up traversing the entire tree
+  expressions.forEach(expression => {
+    // use the last part of the expression to find nodes as it's more
+    // specific. e.g. for `body h1` use `h1` and not `body`
+    const exp = expression[expression.length - 1];
+    let nodes = [];
+
+    // a complex selector is one that will require using
+    // matchesExpression to determine if it matches. these include
+    // pseudo selectors (:not), combinators (A > B), and any
+    // attribute value ([class=foo]).
+    let isComplexSelector =
+      expression.length > 1 || !!exp.pseudos || !!exp.classes;
+
+    if (isGlobalSelector(exp)) {
+      nodes = selectorMap['*'];
+    } else {
+      if (exp.id) {
+        // a selector must match all parts, otherwise we can just exit
+        // early
+        if (!selectorMap[idsKey] || !selectorMap[idsKey][exp.id]?.length) {
+          return;
+        }
+
+        // when using id selector (#one) we only find nodes that
+        // match the shadowId of the root
+        nodes = selectorMap[idsKey][exp.id].filter(
+          node => node.shadowId === shadowId
+        );
+      }
+
+      if (exp.tag && exp.tag !== '*') {
+        if (!selectorMap[exp.tag]?.length) {
+          return;
+        }
+
+        nodes = innerJoin(selectorMap[exp.tag], nodes);
+      }
+
+      if (exp.classes) {
+        if (!selectorMap['[class]']?.length) {
+          return;
+        }
+
+        nodes = innerJoin(selectorMap['[class]'], nodes);
+      }
+
+      if (exp.attributes) {
+        for (let i = 0; i < exp.attributes.length; i++) {
+          const attr = exp.attributes[i];
+
+          // an attribute selector that looks for a specific value is
+          // a complex selector
+          if (attr.type === 'attrValue') {
+            isComplexSelector = true;
+          }
+
+          if (!selectorMap[`[${attr.key}]`]?.length) {
+            return;
+          }
+
+          nodes = innerJoin(selectorMap[`[${attr.key}]`], nodes);
+        }
+      }
+    }
+
+    nodes.forEach(node => {
+      // for complex selectors we need to verify that the node
+      // actually matches the entire selector since we only have
+      // nodes that partially match the last part of the selector
+      if (isComplexSelector && !matchesExpression(node, expression)) {
+        return;
+      }
+
+      nodeSet.add(node);
+    });
+  });
+
+  // ie11 does not work with Array.from without a polyfill (missing
+  // `.entries`) but does have forEach. using a set saves time when
+  // wanting to make sure the same node isn't added twice (~3 seconds
+  // total over using array.includes)
+  let matchedNodes = [];
+  nodeSet.forEach(node => matchedNodes.push(node));
+
+  if (filter) {
+    matchedNodes = matchedNodes.filter(filter);
+  }
+
+  return matchedNodes.sort((a, b) => a.nodeIndex - b.nodeIndex);
+}

test/core/base/virtual-node/virtual-node.js

@@ -81,6 +81,20 @@ describe('VirtualNode', function() {
       assert.equal(vNode.props.nodeName, 'foobar');
     });
 
+    it('should add selectorMap to root element', function() {
+      node.setAttribute('data-foo', 'bar');
+      var vNode = new VirtualNode(node);
+
+      assert.exists(vNode._selectorMap);
+    });
+
+    it('should not add selectorMap to non-root element', function() {
+      node.setAttribute('data-foo', 'bar');
+      var vNode = new VirtualNode(node, new VirtualNode(node.cloneNode()));
+
+      assert.notExists(vNode._selectorMap);
+    });
+
     describe('attr', function() {
       it('should return the value of the given attribute', function() {
         node.setAttribute('data-foo', 'bar');