Bạn có nên kiểm tra khả năng hiển thị của phần tử DOM trước khi chuyển đổi chế độ hiển thị của nó không? Hoặc là tối ưu hóa sớm này?

Question

Vui lòng xem xét mã jQuery sau:

if ($(this).is(':hidden')) { 
    $(this).show(); 
} 

Câu hỏi của tôi:

• là nó đáng giá để kiểm tra khả năng hiển thị của yếu tố trước khi ban hành chương trình) lệnh (?
  • tức là DOM viết đắt hơn so với lần đọc DOM và mẫu này có bao gồm tối ưu hóa hiệu suất nhỏ không?
• Hoặc là kiểm tra khả năng hiển thị không có tiện ích nào và nó có phải là mã sạch hơn đối với lệnh show() đơn giản, vô điều kiện không?

Answer 1

Nếu bạn muốn nó được hiển thị, tôi sẽ không bận tâm kiểm tra xem nó có bị ẩn hay không - tôi sẽ chỉ hiển thị nó. Tôi cho rằng sẽ có một lợi thế hoàn hảo nhỏ để không thực hiện kiểm tra có điều kiện để bắt đầu, nhưng tôi cũng tự tin rằng nó có thể khá không đáng kể.

Tôi đã tạo thử nghiệm hiệu suất cho biết không có kết quả kiểm tra nào trong thực thi nhanh hơn 25%. Bạn có thể xem trực tuyến (và thử nghiệm nó trong một vài trình duyệt) tại http://jsperf.com/is-hidden-check.

Answer 2

kiểm tra hiển thị của bạn có thể tiết kiệm một số nỗ lực vì nó sẽ không phát hành .show() nếu nó không thực sự bị ẩn.

Vì vậy, tôi nghĩ rằng đi với nó

Answer 3

Ngoài đem lại cho bạn sự gia tăng rất tối thiểu trong tốc độ tốt nhất, có thể của nó điều này có thể không phải luôn luôn cư xử như bạn muốn nó:

Source:

Cách thức: ẩn được xác định đã được thay đổi trong jQuery 1.3.2. Một phần tử là giả định bị ẩn nếu nó hoặc bất kỳ phụ huynh nào của nó không tiêu thụ không gian trong tài liệu. Khả năng hiển thị CSS không được tính đến (do đó $(elem).css('visibility','hidden').is(':hidden') == false).

Kiểm tra khả năng hiển thị không phải là vô cùng phức tạp, nhưng IMHO thậm chí trích đoạn này cho thấy nó không phải là chính xác tầm thường. Mặc dù bạn có thể giải quyết vấn đề đảm bảo khả năng hiển thị của bạn hoạt động bình thường khi sử dụng :hidden mỗi khi bạn muốn đảm bảo mã này hoạt động chính xác, bạn có thể quên 5 mili giây mà bạn có thể có một cơ hội khi lưu tiết kiệm cho mình thời gian để hiểu mã và kiểm tra tài liệu mỗi lần có thể có vấn đề với khu vực này.

Chỉ cần sử dụng đồng bằng cũ show(); nếu có lý do để thực hiện kiểm tra trước, tôi tin rằng những người tốt làm jQuery sẽ cung cấp đề xuất làm như vậy trong tài liệu ở đâu đó hoặc chỉ kiểm tra mã vạch vào phương thức show /: D