Thực hành tốt hơn cho ứng dụng web HTML5: sử dụng getElementByID hoặc lưu trữ tham chiếu?

Question

Tôi đang xây dựng một trong những ứng dụng web đầu tiên của mình bằng HTML5, nhắm mục tiêu cụ thể đến iPhone.

Vì tôi khá mới mẻ với điều này, tôi đang cố gắng phát triển một số thói quen mã hóa tốt, thực hiện theo các phương pháp hay nhất, tối ưu hóa hiệu suất và giảm thiểu tải trên iPhone bị hạn chế tài nguyên.

Một trong những điều tôi cần làm thường xuyên ... Tôi có nhiều div (mỗi ID có một id duy nhất) mà tôi thường xuyên cập nhật (ví dụ, với innerHTML) hoặc sửa đổi (ví dụ: thuộc tính kiểu với chuyển đổi và chuyển đổi webkit).

Nói chung - tôi có sử dụng getElementByID tốt hơn mỗi lần tôi cần xử lý với div hay tôi nên lưu trữ các tham chiếu đến từng div tôi truy cập trong biến "toàn cục" khi bắt đầu?

(Tôi sử dụng "toàn cục" trong dấu ngoặc kép vì tôi thực sự chỉ có một biến số toàn cầu - đó là một đối tượng lưu trữ tất cả biến "chung" của tôi dưới dạng thuộc tính).

Tôi giả sử sử dụng getElementByID mỗi lần phải có một số chi phí, vì hàm cần duyệt qua DOM để tìm div. Nhưng, tôi không chắc chắn cách tính thuế hoặc hiệu quả chức năng này.

Sử dụng các biến toàn cầu để lưu trữ xử lý cho từng phần tử phải tiêu thụ một số bộ nhớ, nhưng tôi không biết liệu các tham chiếu này có yêu cầu số lượng RAM nhỏ hay nhiều hơn thế.

Vì vậy - điều nào tốt hơn? Hoặc, cả hai tùy chọn tiêu thụ một lượng tài nguyên tầm thường như vậy mà tôi chỉ nên lo lắng về việc tạo ra mã dễ đọc hơn, dễ bảo trì hơn?

Rất cám ơn trước!

Answer 1

"Nói chung - tôi tốt hơn bằng cách sử dụng getElementByID mỗi khi tôi cần một xử lý cho một div, hay tôi nên lưu trữ tài liệu tham khảo cho mỗi div"

Khi bạn đang gọi điện thoại getElementById, bạn đang yêu cầu nó thực hiện một nhiệm vụ. Nếu bạn không mong đợi một kết quả khác khi gọi cùng một phương thức với cùng một đối số, thì có vẻ như sẽ có ý nghĩa để lưu kết quả.

"tôi giả sử dụng getElementByID mỗi lần phải có một số chi phí, vì các chức năng cần phải đi qua DOM để tìm ra div. Nhưng, tôi không chắc chắn cách đánh thuế hoặc hiệu quả chức năng này."

Trong các trình duyệt hiện đại, rất nhanh, nhưng không nhanh như tìm kiếm thuộc tính trên đối tượng toàn cầu của bạn.

"Sử dụng các biến toàn cầu để lưu trữ xử lý cho mỗi phần tử phải tiêu thụ một số bộ nhớ, nhưng tôi không biết liệu những tham chiếu này có yêu cầu RAM nhỏ hay không."

Không đáng kể. Nó chỉ là một con trỏ tới một đối tượng đã tồn tại. Nếu bạn xóa phần tử khỏi DOM mà không có ý định sử dụng lại nó, thì tất nhiên bạn sẽ muốn giải phóng phần tử của bạn trên nó.

"Vì vậy, - đó là tốt hơn Hoặc, làm cả hai lựa chọn tiêu thụ một lượng nhỏ tài nguyên mà tôi chỉ nên lo lắng về nơi sản xuất dễ đọc hơn, mã duy trì?"

Phụ thuộc hoàn toàn vào tình huống. Nếu bạn chỉ tìm nạp nó một vài lần, thì bạn có thể không thấy nó đáng giá để thêm vào đối tượng toàn cầu của bạn. Bạn càng cần phải tìm nạp cùng một phần tử, càng có nhiều ý nghĩa để tạo bộ nhớ cache.

---

Here's a jsPerf test để so sánh. Tất nhiên kích thước của DOM của bạn cũng như chiều dài của phạm vi chuyển đổi phạm vi và số lượng/chiều sâu của các thuộc tính trong đối tượng toàn cầu của bạn sẽ đóng một số vai trò.

Answer 2

Sử dụng biến cục bộ hoặc thậm chí thuộc tính đối tượng nhanh hơn nhiều so với getElementById(). Tuy nhiên, cả hai đều nhanh đến mức hiệu suất của chúng thường không liên quan so với bất kỳ hoạt động nào khác mà bạn có thể thực hiện khi bạn có phần tử. Sự kiện thiết lập một thuộc tính duy nhất trên phần tử là các đơn đặt hàng có cường độ chậm hơn so với việc lấy nó bằng một trong hai phương thức.

Vì vậy, lý do chính để cache một yếu tố là để tránh những thay dài dòng document.getElementById (... cú pháp, hoặc để tránh việc các chuỗi yếu tố ID rải rác khắp nơi trên mã của bạn.