Как я могу быстрее проанализировать DOM-узлы? - PullRequest
0 голосов
/ 25 июня 2019

У меня есть скрипт содержимого расширения chrome, который пытается сопоставить строки из массива объектов с textcontent из узлов html.Если есть совпадение, расширение заменит html, содержащий совпадение, новым html.

У меня проблемы с соответствием.Массив, содержащий строки, состоит из 2367 объектов, каждый из которых содержит свойство name.

Я реализовал TreeWalker, чтобы сузить узлы, которые я анализирую, до тех, которые содержат текст со словами.

По сути, я пытаюсь найти пересечение узлов, содержащих совпадения строк.Однако каждый подход, который я выбрал для этой проблемы, приводит к временам выполнения, которые занимают 5 минут или больше, и / или к узким местам ЦП.Я надеюсь, что вы, ребята, сможете указать, что я делаю неправильно, или направить меня в другом направлении.Заранее спасибо!

До сих пор все мои попытки найти совпадения включали некоторую реализацию RegEx.replace() кажется самым сложным, но test() не дает особых улучшений.

Для циклического перемещения по массиву узлов и массиву строковых объектов я пробовал for..of loop, for loop, forEach() с вложенным forEach() и filter() с вложенным some().

Вот простая версия скрипта содержимого.

const test = (players) => {
  let body = document.body;
  let bodyCopy = body.cloneNode(true)
  let treeWalker = document.createTreeWalker(
    bodyCopy,
    NodeFilter.SHOW_TEXT,
    node => {

      let regex = /\w+/gi
      if (regex.test(node.textContent)) {
        return NodeFilter.FILTER_ACCEPT;
      } else {
        return NodeFilter.FILTER_SKIP;
      }
    }
  );

  let nodes = [];

  while (treeWalker.nextNode()) {
    nodes.push(treeWalker.currentNode);
  }
  const intersection = (_players, _nodes) => {
    let matchedPlayers = [];
    matchedPlayers = _players.filter(player => {
      return _nodes.some((node) => {
        let re = new RegExp(player.name.full, 'i')
        return re.test(node.textContent)
      })
    })
    console.log (matchedPlayers);
  }
  return intersection(players, nodes)
}

chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {
    if (request.message === "test") {
      console.log(request.players)
      test(request.players)
      sendResponse({ gotIt: "Got it!" })
    }
  }
)

Вот как выглядит объект из массива request.players


{
    "name": {
        "full": "Austin Adams",
        "first": "Austin",
        "last": "Adams",
        "ascii_first": "Austin",
        "ascii_last": "Adams",
    },
    "owned": false
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...