Снизить затраты производительности на работу с DOM таким методом возможно?

Question

[Don2Quixote]

Я могу менять стили див-блоков таким способом:

document.getElementById("back").style.opacity = "1";
// И еще несколько раз тот же элемент менять разными функциями в разных ситуациях.

А если я сделаю так:

var backgroundImage = document.getElementById("back");
// А потом с помощью созданной переменной так же менять стили в разных ф-иях в разных ситуациях
backgroundImage.style.opacity = "1";
//...

Будет ли так работать быстрее? Или всё же это сделано исключительно для читаемости и удобства в написании кода? Будет ли по этой переменной скрипт лезть в DOM, что бы взять этот блок так же, как и без переменной?

Answer 1

[Павел Корнилов]

А если я сделаю так:

var backgroundImage = document.getElementById("back").style.opacity = "1";
// А потом с помощью созданной переменной так же менять стили в разных ф-иях в разных ситуациях
= "1";
//...

Это, конечно, не сработает. Поскольку в переменную backgroundImage сворачивается значение opacity , а не ссылка на целеовй объект. Следовательно, backgroundImage.style.opacity выдаст ошибку.

Comments

[Don2Quixote]

Я имел ввиду document.getElementById(id)
Ошибся, извиняйте

[Пычев Анатолий]

var backgroundImage = document.getElementById("back")
Теперь в backgroundImage будет ссылка на элемент с id="back"
Теоретически, ссылка работает быстрее чем поиск по ДОМ
Но что если какой-нибудь другой скрипт удалит элемент с этим id. Тогда ваша ссылка будет указывать на несуществующий элемент и скрипт выдаст ошибку.
Я думаю что использование ссылки имеет место только в пределах одного потока команд. Т.е. если например отработало какое-то событие и в обработчике вы создаете ссылку, проверяете ее, и при вызове из этого обработчика какой-нибудь функции вы можете передавать ссылку и быть уверены, что она истинна ( ссылается на существующий элемент)
Но при следующем входе в обработчик надо снова создавать ссылку и проверять ее.

[Don2Quixote]

Анатолий, эти ссылки у меня на кнопки Log In и Register, даже представить себе не могу, как они у меня исчезнут, а ссылки останутся. У меня переходы на другие страницы по ним.

[Павел Корнилов]

Да, ввиду всего сказанного выше, этот вариант будет чуть быстрее.

[Пычев Анатолий]

эти ссылки у меня на кнопки Log In и Register, даже представить себе не могу, как они у меня исчезнут, а ссылки останутся.

Я не знаю где у вас будет это работать. Я предложил конструкцию, которая будет стабильна и не вызовет проблем в случае отсутствия элемента для ссылки. Использовать ее или нет это Ваша ответственность.
Для GoogleChrome например, если скрипт вызвал ошибку, то все остальные фоновые скрипты останавливаются (таймеры там всякие)

[Don2Quixote]

Анатолий, Просто похвастаюсь

[Павел Корнилов]

Don2Quixote, круто, но кулер на ноуте сразу ускорился при переходе на сайт =)

[Пычев Анатолий]

мне нравится

[Don2Quixote]

KorniloFF, css свойство rotate3d. Заставляет работать аппаратное ускорение :)

[Павел Корнилов]

Don2Quixote, вот по-этому я склонен к аккуратному использованию CSS3 - в сторону минимализма.

[Don2Quixote]

KorniloFF, я же не сайт делаю)) У меня игрушка, которая требует красоты)

[Павел Корнилов]

Don2Quixote, значит, такое использование вполне оправдано.