Оптимизация производительности JS / jQuery (getBoundingClientRect) и устранение перерисовки макета

Question

Итак, у меня есть проект, в котором я пытаюсь максимально оптимизировать довольно сложную функцию Javascript - отчасти это связано с тем, что она должна работать на смартфонах (Webkit), и каждый маленький бит учитывается.

Я использовал различные методы отладки и синхронизации, чтобы пройтись по моему коду и переписать все, что может быть медленным - как части вещей на основе jQuery, где native может работать лучше и так далее.Функция в основном берет строку HTML-текста и разрезает ее так, чтобы она точно вписывалась в 3 DIV, которые не имеют фиксированной позиции или размера (клиентский шаблонный механизм).

В настоящий момент для выполнения всей функции в браузере iPads требуется около 100 мс (но в производственной среде мне нужно в идеале выполнить ее 200 раз), и проблема заключается в том, что из этих 100 мс по меньшей мере 20 мс обусловленыэта единственная строка кода (в 3 циклах):

var maxTop = $(cur).offset().top + $(cur).outerHeight();

"cur" - это просто ссылка на элемент DIV контейнера, а строка выше вычисляет его нижнюю позицию (поэтому, где мой текст должен разбиться).Глядя на смещенный код jQuery, я понимаю, что он использует getBoundingClientRect, и даже устранение смещения / размера jQuery и его непосредственный вызов ничего не делают для его ускорения - поэтому его ошибка getBoundingClientRect (по крайней мере в Webkit).Я провел небольшое исследование и понял, что это вызывает перерисовку макета.

Но все же - не могу поверить, что я делаю несколько DOM-очисток / клонов / добавлений, и все они гораздо быстрее, чем простой элементпоиск позиции?Есть идеи?Может быть, что-то конкретное вебкит?Или что-то, что не вызывает перерисовку?

Будет очень признателен!

Answer 1

вы пробовали:

var maxTop = cur.offsetTop + cur.offsetHeight;

point is, offsetTop и offsetHeight являются собственными свойствами dom, поэтому доступ должен быть быстрее, чем через функцию.

Answer 2

Поскольку я также столкнулся с подобной проблемой, у меня был цикл, в котором я исправлял серию (иногда 1000+) элементов DOM (от плавающего до абсолютного). Я немедленно применил фиксированный стиль к элементам, что было большой ошибкой: каждый раз, когда что-то записывается в DOM, стиль должен пересчитываться, когда ваш скрипт запрашивает позицию элемента. Следовательно, делайте все чтение, а затем всю запись, даже если это означает два отдельных цикла (вы можете безопасно записать свойство dataset вашего элемента DOM).

Смотри также: http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html