Считается такое кешированием в JS
 

Будет ли правильным, если document сначала записать в переменную, а потом обращаться к ней. Типа вот так:

let doc = document;

let title = doc.querySelectorAll('h2');
doc.querySelector('.class').innerHTML = 'Hello World';
doc.querySelector('.test').addEventListener('click', ...)

Вроде где то в видео на ютубе услышал, а может приснилось, что это можно считать как кеширование и типа это значительно уменьшает нагрузки на браузер.
Или это неправильно?

если и уменьшает, то на копейки
обращение к doc слегка быстрее, поскольку он в текущем скоупе, а за document надо ходить по всей цепочке скоупов на самый верх.

однако первый же querySelector делает такую оптимизацию смехотворной (поскольку в разы дольше обращения к переменной), не говоря уж об изменении DOM

Я правильно понял что этим можно пренебречь и не заморачиваться, если после идёт querySelector и оставлять document.querySelector ?
Изменённый DOM не беру во внимание. Изначально всё прописано в HTML.

MC-XOBAHCK,
если ты пишешь какую-то логику чисто на js и хочешь упороться и совсем всё оптимизировать, то да, вполне можно глобальные переменные в текущий скоуп подтянуть (особенно если к ним много обращений, внутри цикла, например).

А если на фронте ты работаешь с DOM, то понятное дело такие оптимизации будут вообще незаметны на фоне операций с элементами.

Alexandroppolus,
Спасибо за разъяснения, я суть понял - буду знать.

А можно ещё спросить в этой теме такой вопрос:
инпуты с тайпом нумбер, если мышкой на родные стрелочки инпута жать (изменять значения), то очень долго уходит сигнал на событие - секунды 2-3 пока скрипт отреагирует.
Если стрелочками с клавиатуры (клавиши вверх-вниз) менять значения, то скрипт реагирует моментально на событие.
Это так и есть с такими инпутами или это уже я в скрипте накосячил?

MC-XOBAHCK,
почитайте "Выразительный JavaScript" автор на протяжении всей книги пытается раскрыть тему баланса между выразительность кода и скоростью, где стоит использовать абстракции, а где опереться на более фундаментальные вещи. (хотя между строк читается что топит больше за красоту)

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

Допустимым значением будет. т.е. код будет работать без ошибок. Но смысла в таком кешировании практически 0.
кеширование хорошо работает когда можно избежать многократного поиска одного и того же элемента документа сохранив на него ссылку (найдено поиском по форуму)

Rise, хороший паттерн, буду пользоваться.
Единственное 9-ая строка в вашем коде, где querySelector объявлен как строка. В этом случае нельзя как и document объявить:
let q = querySelector;
, чтобы потом обращаться через точку d.q('h1') ? Или сокращение допустимо только как Вы написали?
Я пробовал когда то подобное делать, но у меня что то не заработало и я бросил тогда эту затею и писал портянку полностью.

MC-XOBAHCK,

d.q('#selector');//Обращение к методу "q"
d[q]('#selector');//Обращение к методу "querySelector" из переменной "q"

https://developer.mozilla.org/ru/doc...g_with_Objects

хоть и не 'кеширование' если нужно много переменных объявить, бывает использую такую конструкцию.

['block1','block2','block22','block23'].forEach(el=> window[el] = document.querySelectorAll('.'+el));

Не знаю является ли это самым оптимальным решением, но мне оно нравится. Я логику понял и тестово обкатал на All и просто querySelector - работает.
Спасибо что поделились, давно ломал голову в поиске подобного решения.

MC-XOBAHCK, Так вы захламите глобальный объект window, да и к чему делать подобные переменные глобальными?
По-моему код j0hnik'а лучше так переписать:

const concreteBlocks=['block1','block2','block22','block23'].reduce(function(result,className){
	return result[className]=[].slice.call(document.querySelectorAll('.'+className)), result;
},{});

concreteBlocks.block1.forEach(function(node){
  node.style.background='#F00';
});

Nexus, да, есть такое

window == document  // => false

window > document          // => true

Открыл в консоле window и увидел что document является свойством window.


А можно спросить, а то у меня проблемы с пониманием и я теряюсь.
У вас в начале строки идут квадратные скобки [] (у меня есть подобное в решениях подсказанных здесь на форуме):

[].slice.call(document.querySelector......

Мне вот только мысль пришла - квадратные скобки это пустой массив? Или это что то другое?

по феншую тут должно быть Array.prototype

MC-XOBAHCK,
document.querySelectorAll -это коллекция, не вполне массив. Многие методы массивов с коллекцией не работают.
Поэтому их приходится использовать с такой конструкцией

[].slice.call(document.querySelectorAll......

т.е метод slice применяется к настоящему пустому массиву и вызывается для коллекции

Надо сказать, что коллекция NodeList (результат document.querySelectorAll и т.п.) постепенно становится "как массив", например, тот же forEach в ней давно есть почти во всех браузерах, да и полифилится в одну строку.

Потому превращать её в массив, имхо, незачем. Если что, можно и на самой коллекции через call использовать любой метод из Array.prototype.

Вот если бы это было, например, document.getElementsBy***, то да, смысл был бы, ибо там "живая коллекция", и вдруг её надо будет зафиксировать. Но все эти методы, по моему, отмирающая ветвь эволюции. А понадобиться они могут, если нам нужна как раз именно "живая колекция", т.е. slice опять не при делах..

Спасибо всем за науку.
Дочитаю книгу которую посоветовали и буду дальше продолжать учить и практиковать JS.