Есть ли способ найти следующий похожий тег, не запрашивая сразу все теги? - PullRequest
0 голосов
/ 02 мая 2019

Я пытаюсь реализовать свой собственный скрипт хинтинга ссылок для браузера серфинга, и Я сталкивался с заметными проблемами с производительностью на страницах с огромное количество ссылок. Например, на подсказку уходит около 2 секунд видимые ссылки на https://gunther.suckless.org/patches/ и 3 секунды на https://en.wikipedia.org/wiki/Japan. Я думаю, проблема в том, что я пытаясь найти все теги ссылки, используя querySelectorAll("a") (или getElementsByTagName("a") - у меня почти такая же производительность у меня случай), а затем фильтрует все эти теги через функцию, которая проверяет находится ли ссылка в окне просмотра или нет (другими словами, поиск ссылки процедура тратит большую часть времени на ссылки, которые не будут отображаться в любом случае):

var all_elems = document.body.querySelectorAll("a");
for (var i = 0; i < all_elems.length; i++) {
  if (isHintDisplay(all_elems[i])) {
    hint_elems.push(all_elems[i]);
  }
}

Я подумал, что, возможно, «ручные» итерации тегов ссылок, которые обрабатывают один тег за раз и останавливаются при обнаружении невидимых ссылок, были бы более оптимальным решением. Я пытался реализовать эти итерации, используя querySelector("a") / parentElement / nextElementSibling, но в итоге получился некрасивый и абсолютно ненадежный код ...

Есть ли другой способ найти предыдущие / следующие похожие теги без использования querySelectorAll / getElementsByTagName? Или эти проблемы с производительностью присущи самому Javascript, и мало что можно сделать для улучшить ситуацию?

P.S. Предполагается, что обработанные теги не будут содержать идентификаторов и классов.

ДОБАВЛЕНО

Реализация isHintDisplay:

function isHintDisplay(elem) {
  var pos = elem.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight,
                            window.innerHeight);
  return !(pos.bottom < 0 || pos.top - viewHeight >= 0);
}
...