JavaScript 功能缓慢，如何改进？

Question

我有以下 JavaScript 函数似乎执行得很慢。

这个函数在一个循环中被多次调用

function _matches(el, selectors) {

    var result = selectors.filter(function (selector) {
          return [].indexOf.call(document.querySelectorAll(selector), el) !== -1;
    });

    return result.length > 0;
}

这是如何调用此函数的示例

// Vertical Loop
rows.map(function (element, row) {

    if (_matches(element, '.ignore')) {
        // do something A
    }

    if (_matches(element, '.empty')) {
        // do something B
    }

    var cols = element.querySelectorAll("th, td");
    // Horizontal Loop
    return cols.map(function (element, ic) {

        if (_matches(element, '.ignore')) {
            // do something A
        }
        if (_matches(element, '.empty')) {
            // do something B
        }
    });
});

我不确定[].indexOf.call(document.querySelectorAll(selector), el)行的作用或含义，因此我不确定如何提高此函数的性能。

Answer 1

您在 DOM 中查找与给定选择器匹配的所有元素，然后询问您已经拥有的元素是否出现在该集合中。 这是一种非常低效的方式来判断您已经拥有的元素是否与给定的选择器匹配。

只需使用element.matches(selector) 。

// No:
if (_matches(element, '.ignore')) {
  // do something A
}

// Yes:
if (element.matches('.ignore')) {
  // do something A
}