Какой код лучше? Какие преимущества у 2 вариантов?

Question

[Roweb]

1 вариант

window.addEventListener('load', function() {
			let header = document.querySelector('.header');
			let content = document.querySelector('.content');
			let footer = document.querySelector('.footer');
			let btn = document.querySelector('.button');

			btn.addEventListener('click', function() {
				// манипуляции с header, content, footer
			})
		})

2 вариант

window.addEventListener('load', function() {
			let header = document.querySelector('.header');
			let content = document.querySelector('.content');
			let footer = document.querySelector('.footer');
			let btn = document.querySelector('.button');

			btn.addEventListener('click', function() {
				func(header, content, footer)
			})
		})

		function func(a, b, c) {
			// манипуляции с header, content, footer
		}

С точки зрения простоты написания и наглядности первый вариант выигрывает. Будет ли второй вариант производительнее, так как функции будут объявлены еще до загрузки страницы

Answer 1

[hzzzzl]

первый, нафик надо перекидывать объекты туда-сюда ради единственного onload

btn.addEventListener('load', function() - это когда кнопка загрузилась?

Comments

[Roweb]

Ошибся. Вместо load должен быть click

[Roweb]

Логика такая - во втором варианте сразу начинает исполняться код (объявляются функции), не дожидаясь загрузки страницы. Это должно быть производительнее нежели объявлять функции только после загрузки страницы. Сталкивался с такими приемами в чужом коде

Answer 2

[Пашенька]

1. Производительнее будет, если вы научитесь выбирать элементы в контексте, который вы уже некогда сохранили в переменную. Если требуется пояснение этого предложения - вперёд!

2. Зачем вам слушать load внутри load? Ликвидировать!
3. Замените на DOMContentLoaded, проку будет больше.

Пояснение п1.

let content = document.querySelector('.content'),
    btn = content.querySelector('.button'); // батон живёт внутри .content(к примеру). Так что нет
                                            // необходимости искать его внутри всего документа.

Comments

[Roweb]

1. Пояснение требуется)
2. Перепутал с click

[Пашенька]

Roweb, пояснил.