Итак, почему мы должны кэшировать объекты jQuery?
В следующем сценарии:
var foo = $('#bar');
foo.attr('style','cool');
foo.attr('width','123');
$('#bar').attr('style','cool');
$('#bar').attr('width','123');
Почему первый вариант намного лучше, чем второй вариант?
Если это из-за производительности, как это уменьшает использование?
Поскольку функция jQuery содержит в себе много кода, что связано с ненужными накладными расходами, если вы выполняете его более одного раза с теми же входами, ожидающими одинаковые выходы. Кэшируя результат, вы храните ссылку на точный элемент или набор элементов, которые вы ищете, поэтому вам не нужно снова искать всю DOM (даже если это довольно быстрый поиск). Во многих случаях (простые страницы с небольшим количеством кода) вы не заметите разницы, но в тех случаях, когда вы это делаете, это может стать большой разницей.
Вы можете увидеть это в действии с помощью тестирования вашего примера в jsPerf.
Вы также можете подумать об этом как пример шаблона рефакторинга Представить объясняющую переменную для целей читаемости, особенно с более сложными примерами, чем в вопросе.
Селектор jQuery $('#foo') выполняет поиск по всей DOM для соответствующего элемента (ов), а затем возвращает результат (ы).
Кэширование этих результатов означает, что jQuery не нужно искать DOM каждый раз, когда используется селектор.
EDIT: document.getElementById() - это то, что jQuery использует для поиска DOM, но никогда не будет достаточно jQuery.