A láncolás előnyei és hátrányai a JavaScript-ben

Annak ellenére, hogy a láncolás lerövidíti a kódot, a legtöbb esetben egy változó bevezetése mégis kényelmesebb. Hasonlítsd össze a két példát - most bevezettem egy elem változót és bármennyi attribútumot hozzárendelhetek, miközben a querySelector csak egyszer hívódik meg:

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

Most nem vezetek be új változót, ezért két alkalommal kell meghívnom a querySelector metódust:

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

Véleményem szerint ez a kód bonyolultabbá vált, bár egy sorral kevesebb. Továbbá, ha meg akarom változtatni a id értékét a 'elem'-ről egy másikra, akkor ezt több helyen is meg kell tennem, ami nem túl kényelmes.

Van egy másik probléma is - a böngésző terhelése. A querySelector által végzett elemek keresése az oldalon egy meglehetősen lassú művelet (és általában minden munka az oldal elemeivel - lassú művelet - jegyezd ezt meg).

Esetünkben, ha minden alkalommal a querySelector-t használjuk, akkor a böngésző minden alkalommal feldolgozza a HTML oldalt, és többször keresi a megadott id-val rendelkező elemet (az nem számít, hogy a id ugyanaz - a böngésző minden műveletet többször elvégzett, haszontalan műveleteket hajtva végre, ami lelassíthatja a böngésző működését.

Ha viszont az elem változót használjuk - nem történik keresés az oldalon (az elem már megvan találva, és a rá mutató hivatkozás a változóban van tárolva).

Adott a következő kód:

<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);

Mutass a kód hiányosságaira. Javítsd ki őket.