получить смещение каждого элемента DOM эффективно

Question

Чтобы определить маржу страницы в разных положениях страницы, мне нужно получить смещение, ширину и высоту каждого элемента DOM.

Я повторяю элементы DOM и сохраняю атрибуты каждого элемента. Я пробовал его с помощью JQuery $(el).offset(), но это было очень медленно. Я предполагаю, что создание объекта JQuery для каждого элемента с помощью $(...) происходит очень медленно.

Затем я попробовал старую реализацию, которую я получил из старого кода, который использует родной JS, и это было в 4 раза быстрее.

ТАК, что я действительно спрашиваю, есть ли другой способ сделать это? Я должен упомянуть, что мой скрипт работает на сайтах издателей, и я ничего не знаю о странице, на которой я работаю.

Answer 1

Я думаю, это одно решение, используя map() и getBoundingClientRect():

var elements = document.getElementsByClassName('someclass'); 

elements.map(function(val, i, arr) { 

    var doc = document.getBoundingClientRect(), 
     el = val.getBoundingClientRect(), 
     coordsX = el.left - doc.left, 
     coordsY = el.top - doc.top; 

    return {x: coordsX, y: coordsY}; 
}); 

Это возвращает массив всех координат данного класса. Вы можете изменить document.getElementsByClassName на querySelector, если он лучше подходит вашим потребностям.

Это также изменит getBoundingClientRect() как относительно документа вместо видового экрана.