Kelebihan dan Kekurangan Rantai di JavaScript

Meskipun rantai mempersingkat kode, dalam sebagian besar kasus, memperkenalkan variabel ternyata lebih nyaman. Bandingkan dua contoh - sekarang saya telah memperkenalkan variabel elem dan saya bisa menulis sejumlah atribut apa pun, sementara querySelector hanya dipanggil sekali:

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

Sekarang saya tidak memperkenalkan variabel baru dan oleh karena itu saya harus memanggil querySelector dua kali:

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

Menurut saya, kode ini menjadi lebih rumit, meskipun menempati satu baris lebih sedikit. Selain itu, jika saya ingin mengubah nilai id dari 'elem' ke yang lain, saya harus melakukannya di banyak tempat, yang kurang nyaman.

Ada masalah lain - beban pada browser. Pencarian elemen di halaman, yang dilakukan oleh metode querySelector, adalah operasi yang cukup lambat (dan secara umum, pekerjaan apa pun dengan elemen halaman adalah operasi yang lambat - ingatlah ini).

Dalam kasus kami, jika kita setiap kali menggunakan querySelector, maka browser setiap kali akan memproses halaman HTML dan mencari elemen dengan id yang diberikan beberapa kali (tidak masalah bahwa id-nya sama - browser akan melakukan semua tindakan beberapa kali), melakukan operasi yang tidak berguna yang dapat memperlambat kerja browser.

Jika kita menggunakan variabel elem - tidak ada pencarian di halaman yang terjadi (elemen sudah ditemukan dan tautannya terletak di variabel).

Diberikan kode 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 kekurangan kode ini. Perbaikilah.