Имеет ли смысл такая оптимизация?

Ниже часть кода для реализации табов в двух вариантах.
При создании класса в конструкторе сохраняется ссылка на активные кнопку и таб с контентом
class Tabs {
	constructor(el) {
		this.activeBtn = el.querySelector('.btn_active')
		this.activePane = el.querySelector('.pane_active')

		el.addEventListener('click', this.change.bind(this))
	}
	change() {
		// do stuff with this.activeBtn and this.activePane
	}
}
new Tabs()

Проблема в том, что большинство пользователей сайта могут вообще не пользоватся табами и нет смысла каждый раз при загрузке страницы выполнять querySelector
Поэтому код можно переписать так
class Tabs {
	constructor(el) {
		this.el = el
		this.activeBtn = null
		this.activePane = null
		this.refSaved = false

		el.addEventListener('click', this.change.bind(this))
	}
	saveRef() {
		this.activeBtn = this.el.querySelector('.btn_active')
		this.activePane = this.el.querySelector('.pane_active')
		this.refSaved = true
	}
	change() {
		if(!this.refSaved) {
			this.saveRef()
		}
		
		// do stuff with this.activeBtn and this.activePane
	}
}
new Tabs()

Здесь мы сохраняем ссылки на элементы непосредственно перед тем, как они будут нужны, то есть после клика пользователя по кнопке таба. Таким образом мы сокращаем обращение к dom

Мой вопрос в следующем: в теории это даст плюсы в быстродействии за счет логики вызова querySelector или с увеличившимся размером файла будет еще хуже?
Понятно, что это все экономия на спичках. Но в тех же гайдах по js рекомендуют сохранять ссылку на dom-элемент, если он используется повторно. А тут похожая ситуация.
  • Вопрос задан
  • 496 просмотров
Пригласить эксперта
Ответы на вопрос 3
WisconEnvirotech
@WisconEnvirotech
Промышленный измельчитель и дробилка для пластмасс
Как по мне это не оптимизация, а поедание памяти пользователя.
Ответ написан
Комментировать
teknik2008
@teknik2008
Расскажите про GOLANG. Мне интересно
Как по мне это не оптимизация, а поедание памяти пользователя. Что будет если будет 100 элементов?
js построен на событиях, и следуйте этой парадигме. Случился клик, через event.target - извлеките нужные элементы, и делайте что нужно с ними.
А слушатель можно повесить 1 на всех, через всплытие события.

Сейчас вы тупо забиваете память лишней информацией, которая мне как пользователю - не нужна.
Берегите ресурсы пользователя - это вклад в экологию )))
Ответ написан
@dragonesis
Пример выглядит синтетическим. Зачем держать ссылку на активный таб, для меня вопрос. Более того, получается то псевдоэкономия. Класс, вместо функции, querySelector вместо getElementsByClassName.

Если очень хочется, то почему не сделать так: вешается разовый слушатель на родителя, по клику по потомку собирается весь пул табов, активный таб добавляется в переменную.
Далее клик по любому табу будет перезаписывать переменные с активными табами.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
Rocket Брянск
от 60 000 до 100 000 ₽
27 мая 2024, в 12:26
30000 руб./за проект
27 мая 2024, в 12:25
5000 руб./за проект
27 мая 2024, в 11:51
100000 руб./за проект