Оптимизирует ли браузер/javascript исполнение кода в этом случае?

Question

[ilovemaryjane]

К примеру, при скролле вниз выполняется такой код

el.style.position = 'fixed'

Естественно не имеет смысла добавлять 'fixed' к элементу который уже 'fixed'. Да еще и на каждый скролл, т.е. сотни, тысячи операций.

Имеет ли смысл это как-то оптимизировать? Или браузер сам это делает?
Если да, то как оптимизировать? Если навесит туда еще прежде проверку есть ли стиль, то выглядит как двойная работа теперь. Как вариант, думал делать флаг fixed = true после успешного добавления стиля, и потом выполнять простую if проверку, но все равно получается эта проверка будет проводится каждый раз, и лишняя лапша в коде...

Answer 1

[Stalker_RED]

Да еще и на каждый скролл, т.е. сотни, тысячи

Можно прикрутить throttle

Да, с флагом отличный план, это дешевле чем throttle.

Возможно еще лучше подойдет intersection observer, но это не точно. Смотря что вы делаете.

Comments

[ilovemaryjane]

У меня там и так raf. Попробую флаг, правда не уверен как проверить эффект...Девтулз непонятный, особенно вкладка Перфоманс вообще))

Answer 2

[Владимир]

Слишком мало исходных.
Если вы при начале скрола вешаете класс и потом не должны слушать скролл вообще, то можно просто убрать слушатель removeEventListener если конечно вешали его при помощи addEventListener

Comments

[ilovemaryjane]

Исходных достаточно, потому что я спрашиваю не об этом конкретном случае.

[Владимир]

ilovemaryjane, Еще раз, если в этом событии только добавляется класс, то убирайте слушатель, если там еще есть логика, до делайте тротлинг используя setTimeout

[Stalker_RED]

Владимир, у него уже есть троттлинг, и он не о этом конкретном случае, а о подходе вообще. просто в профайлер пока не умеет, и не может нормально сформулировать вопрос.

[ilovemaryjane]

Владимир, где было хоть слово о добавлении классов вообще? Вам так хочется привязатся к какому-то случаю?

Answer 3

[Kim_Soal]

Оптимизировать события можно, написав обертки над слушателями, и давать срабатывать событиям не чаще чем time.
По идее, обработка проверки условия из простых переменных незначительна. Трудоемка перерисовка, обращение к Dom, и т.д.

Comments

[ilovemaryjane]

давать срабатывать событиям не чаще чем time

Не понял? Троттлинг что-ли?

Answer 4

[Александр Косицын]

Если срабатывает только это молификация на скроле то браузер минимизирует его если будет перед эти if проверка на isFixed. Т к js меняет dom представление сеттером fixed , то будет вызываться перерасчет css стилей. Лучше проверку сделать на isFixed , тогда браузер не будет мутировать dom дерево, а а будет только выполнять js код.
Тротрилг можно тоже поставить. Но от анимации зависит. Если нужно top менять на каждый скролл , то тротлинг не нужен. Будет все прыгать