JavaScript ķēžu priekšrocības un trūkumi

Lai gan ķēdes saīsina kodu, vairumā gadījumu mainīgā ieviešana ir ērtāka. Salīdziniet divus piemērus - tagad esmu ieviesis mainīgo elem un varu pievienot jebkuru daudzumu atribūtu, kamēr querySelector tiek izsaukts tikai vienu reizi:

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

Tagad es neieviešu jaunu mainīgo, un tāpēc man ir jāizsauc querySelector divas reizes:

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

Manuprāt, šis kods kļuva sarežģītāks, lai gan aizņem vienu rindu mazāk. Turklāt, ja es gribēšu nomainīt id vērtību no 'elem' uz kādu citu, man būs jādara tas daudzās vietās, kas nav īpaši ērti.

Ir vēl viena problēma - slodze pārlūkprogrammai. Elementu meklēšana lapā, ko veic metode querySelector, ir diezgan lēna operācija (un vispār jebkura darbība ar lapas elementiem - ir lēna operācija - atcerieties to).

Mūsu gadījumā, ja mēs katru reizi izmantojam querySelector, tad pārlūkprogramma katru reizi apstrādās HTML lapu un meklēs elementu ar norādīto id vairākas reizes (vienalga, ka id ir identisks - pārlūkprogramma veiks visas darbības vairākas reizes), veicot bezmantīgas operācijas, kas var palēlināt pārlūkprogrammas darbību.

Ja mēs izmantojam mainīgo elem - nekādas meklēšanas lapā nenotiek (elements jau ir atrasts un saite uz to atrodas mainīgajā).

Dots šāds kods:

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

Norādiet uz šī koda trūkumiem. Izlabojiet tos.