Ưu điểm và nhược điểm của chuỗi trong JavaScript

Dù chuỗi giúp rút ngắn mã code, trong hầu hết trường hợp việc giới thiệu biến vẫn tiện lợi hơn. Hãy so sánh hai ví dụ - bây giờ tôi đã giới thiệu biến elem và có thể thiết lập bất kỳ số lượng thuộc tính nào, trong khi querySelector chỉ được gọi một lần:

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

Còn bây giờ tôi không giới thiệu biến mới và do đó phải gọi querySelector hai lần:

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

Theo quan điểm của tôi, mã này đã trở nên phức tạp hơn, mặc dù chiếm ít hơn một dòng. Ngoài ra, nếu tôi muốn thay đổi giá trị id từ 'elem' thành một giá trị khác, tôi sẽ phải thực hiện điều đó ở nhiều vị trí, điều này không thực sự thuận tiện.

Vẫn còn một vấn đề nữa - tải lên trình duyệt. Việc tìm kiếm các phần tử trên trang mà phương thức querySelector thực hiện, là một thao tác khá chậm (và nói chung bất kỳ công việc nào với các phần tử trang - đều là thao tác chậm - hãy nhớ điều này).

Trong trường hợp của chúng ta, nếu mỗi lần chúng ta sử dụng querySelector, thì trình duyệt mỗi lần sẽ xử lý HTML trang và tìm kiếm phần tử với id được chỉ định vài lần (không quan trọng là id giống nhau - trình duyệt sẽ thực hiện tất cả các thao tác vài lần), thực hiện các hoạt động vô ích, có thể làm chậm hoạt động của trình duyệt.

Nếu chúng ta sử dụng biến elem - sẽ không xảy ra bất kỳ tìm kiếm nào trên trang (phần tử đã được tìm thấy và tham chiếu đến nó nằm trong biến).

Cho mã sau:

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

Chỉ ra những nhược điểm của mã này. Sửa chúng.