Fördelar och nackdelar med kedjor i JavaScript

Trots att kedjor förkortar koden, är det i de flesta fall ändå bekvämare att införa en variabel. Jämför två exempel - nu har jag infört variabeln elem och kan skriva in valfritt antal attribut, samtidigt som querySelector endast anropas en gång:

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

Nu inför jag ingen ny variabel och därför måste jag anropa querySelector två gånger:

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

Enligt min åsikt blev den här koden mer komplex, även om den tar upp en rad mindre. Dessutom, om jag vill ändra värdet på id från 'elem' till något annat, måste jag göra det på många ställen, vilket inte är särskilt bekvämt.

Det finns också ett annat problem - belastningen på webbläsaren. Sökningen efter element på sidan, som görs av metoden querySelector, är en ganska långsam operation (och generellt sett är allt arbete med sidens element en långsam operation - kom ihåg detta).

I vårt fall, om vi använder querySelector varje gång, kommer webbläsaren varje gång att behöva bearbeta HTML-sidan och söka efter elementet med angivet id flera gånger (oavsett att id är samma - webbläsaren kommer att utföra alla åtgärder flera gånger), vilket leder till onödiga operationer som kan sakta ner webbläsarens arbete.

Om vi däremot använder variabeln elem - sker ingen sökning på sidan (elementet är redan hittat och en referens till det ligger i variabeln).

Följande kod ges:

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

Ange nackdelarna med denna kod. Råtta dem.