Hộp thoại giao diện người dùng JQuery chậm

Question

Gần đây tôi đã gặp phải một chút đau đớn. Tôi đã sử dụng hộp thoại JQuery Dialog để hiển thị một số màn hình cấu hình trong một ứng dụng web. Không có gì quá đặc biệt. Tuy nhiên tôi có một vài trường hợp cạnh mà hình thức cấu hình này sẽ hiển thị một thả xuống của một số ... 11.000 tùy chọn. [DODGES ROTTEN TOMATOES]

Không cần phải nói, nó chậm. Có thể mất tối đa 9 giây để Hộp thoại JQuery hiển thị (và init cũng chậm).

Câu hỏi đầu tiên là: Có cách nào tăng tốc hộp thoại không? Từ những gì nó có vẻ, nó sao chép tất cả các nội dung mỗi khi nó mở ra. Nếu có cách nào để tránh điều đó, nó sẽ giúp ích một chút.

Câu hỏi thứ hai: Có hộp thoại jQuery nào khác hoạt động tốt hơn khi được yêu cầu hiển thị lượng lớn dữ liệu không?

Và như mọi khi, các giải pháp khác được hoan nghênh. Một số ajax tự động hoàn thành sẽ không tệ, nhưng có lẽ vẫn còn chậm, trừ khi nó yêu cầu ít nhất một vài ký tự ban đầu.

Answer 1

Được quản lý để cải thiện hiệu suất một chút. Tôi đi lạc từ giao diện người dùng JQuery và tạo ra một phiên bản nhẹ hơn nhiều. Thay vì sao chép nội dung của mục tiêu của tôi vào hộp thoại của tôi, tôi xây dựng hộp thoại của mình xung quanh nội dung.

Hiệu suất khôn ngoan, hộp thoại đi từ khoảng 10 giây để 2.

Answer 2

Làm thế nào về một lựa chọn với tất cả các chữ cái đầu tiên có thể nhận được thông qua AJAX tùy chọn duy nhất bắt đầu bằng chữ cái đó vào lựa chọn thứ hai?

Answer 3

2 giây âm thanh tốt hơn rất nhiều, nhưng có thể bạn sẽ thấy nó rất phụ thuộc nhiều vào trình duyệt người dùng và hệ thống cấu hình - nó có thể là tồi tệ hơn nhiều trên một hệ thống chậm hơn trong IE ...

Tôi sẽ cân nhắc việc sử dụng cái gì khác thay vì trình đơn thả xuống khổng lồ (chắc chắn không thân thiện với người dùng) - nó giống như một ứng cử viên tốt cho hộp tìm kiếm tự động hoàn thành hoặc có thể là các trình đơn thả xuống nhiều tầng.

Bạn cũng có thể tạo ra các hộp thoại khi tải trang, và chỉ mở khi cần thiết (thiết lập AutoOpen: false trong các tùy chọn)

Answer 4

Nếu bạn phải làm một danh sách thả xuống trong một hộp thoại như vậy, sau đó tôi đề nghị tải thông tin vào phong cách div ajax ẩn sau khi tải trang và sau đó hiển thị div ẩn đó trong bất kỳ hộp đèn/hộp thoại nào bạn đang sử dụng khi cần. Bằng cách đó, nội dung sẽ được tải trong khi người dùng đang làm những việc khác và hy vọng sẽ sẵn sàng vào thời điểm đó.

Answer 5

tùy thuộc vào html bạn đang sử dụng để hiển thị dữ liệu, tức là có thể siêu chậm so với chrome hoặc firefox.

đặc biệt là khi bạn đang hiển thị các bảng lớn. các liên kết này có thể hữu ích - thậm chí bạn có thể bỏ thêm một chút thời gian nữa.

http://jquery-howto.blogspot.com/2009/02/5-easy-tips-on-how-to-improve-code.html

http://www.artzstudio.com/2009/04/jquery-performance-rules/

Answer 6

Tôi đã gặp phải vấn đề này và tìm thấy giải pháp ở đây: http://forum.jquery.com/topic/select-in-dialog-causes-slowness-in-ie8

Chỉ cần phải thiết lập các hộp thoại draggable và resizable tùy chọn để false.

Answer 7

Cài đặt có thể kéo và thay đổi kích thước thành sai.

Answer 8

Tôi vừa gặp sự cố này bằng hộp thoại được gắn thẻ với hàng trăm hộp kiểm. Tôi thấy this link rất hữu ích. Đã 17 tuổi để mở hộp thoại trước đây, nhưng giờ đã giảm xuống còn khoảng 1,3 giây. (Tôi đang sử dụng một hộp thoại resizeable không kéo)

Bí quyết là để tách html trước khi bạn mở hộp thoại, và sau đó sử dụng mở chức năng cho hộp thoại để lắp lại nội dung.

$('#triggerDialogFast').click(function() { 
    var $dialogContainer = $('#dialogContentFast'); 
    var $detachedChildren = $dialogContainer.children().detach(); 
    $dialogContainer.dialog({ 
     width: 425, 
     height: 400, 
     draggable: false, 
     resizable: false, 
     open: function() { 
      $detachedChildren.appendTo($dialogContainer); 
     }, 
    }); 
}); 

Tôi không chắc nhưng có lẽ nó sẽ làm việc chỉ bằng cách gắn các html trong mở chức năng nếu đó là có thể có trong kịch bản của bạn.