Vantaggi e Svantaggi delle Catene in JavaScript

Nonostante le catene riducano il codice, nella maggior parte dei casi l'introduzione di una variabile è comunque più conveniente. Confronta i due esempi - ora ho introdotto la variabile elem e posso impostare qualsiasi numero di attributi, mentre querySelector viene chiamato solo una volta:

let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type  = 'submit';

Ora, non introducendo una nuova variabile, sono costretto a chiamare querySelector due volte:

document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type  = 'submit';

A mio avviso, questo codice è diventato più complesso, sebbene occupi una riga in meno. Inoltre, se volessi cambiare il valore di id da 'elem' a un altro, dovrei farlo in più punti, il che non è molto pratico.

C'è un altro problema: il carico sul browser. La ricerca di elementi nella pagina, eseguita dal metodo querySelector, è un'operazione piuttosto lenta (e in generale, qualsiasi operazione con gli elementi della pagina è lenta - ricordatelo).

Nel nostro caso, se usiamo querySelector ogni volta, il browser elaborerà ogni volta l'HTML della pagina e cercherà l'elemento con il dato id più volte (non importa che l'id sia lo stesso - il browser ripeterà tutte le azioni più volte), eseguendo operazioni inutili che potrebbero rallentare il browser.

Se invece usiamo la variabile elem - non avviene alcuna ricerca nella pagina (l'elemento è già stato trovato e il riferimento ad esso è contenuto nella variabile).

Dato il seguente codice:

<img id="image" src="avatar.png" width="300" height="500">

console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);

Indica gli svantaggi di questo codice. Correggili.