Kebaikan dan Keburukan Rantai dalam JavaScript

Walaupun rantai memendekkan kod, dalam kebanyakan kes, memperkenalkan pembolehubah masih lebih mudah. Bandingkan dua contoh - sekarang saya telah memperkenalkan pembolehubah elem dan boleh mencatat sebarang jumlah atribut, sementara querySelector dipanggil hanya sekali:

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

Sekarang saya tidak memperkenalkan pembolehubah baru dan oleh itu saya terpaksa memanggil querySelector dua kali:

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

Pada pandangan saya, kod ini menjadi lebih kompleks, walaupun mengambil satu baris kurang. Selain itu, jika saya ingin menukar nilai id dari 'elem' kepada yang lain, saya terpaksa melakukannya di banyak tempat, yang tidak begitu mudah.

Ada lagi masalah - beban pada pelayar. Mencari elemen pada halaman, yang dilakukan oleh kaedah querySelector, adalah operasi yang agak perlahan (dan secara umumnya sebarang kerja dengan elemen halaman adalah operasi yang perlahan - ingat ini).

Dalam kes kami, jika kami setiap kali menggunakan querySelector, maka pelayar setiap kali akan memproses halaman HTML dan mencari elemen dengan id yang diberikan beberapa kali (tidak kira bahawa id adalah sama - pelayar akan melakukan semua tindakan beberapa kali), melakukan operasi yang tidak berguna yang boleh melambatkan kerja pelayar.

Jika kami menggunakan pembolehubah elem - tiada carian pada halaman berlaku (elemen sudah ditemui dan rujukan kepadanya terletak dalam pembolehubah).

Diberi kod berikut:

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

Tunjukkan kelemahan kod ini. Betulkannya.