Cách cải thiện hiệu suất của Jquery tự động hoàn thành

Question

Tôi đã lên kế hoạch sử dụng tính năng tự động hoàn thành jquery cho một trang web và đã triển khai phiên bản thử nghiệm. Bây giờ tôi đang sử dụng một cuộc gọi ajax để lấy một danh sách các chuỗi mới cho mỗi đầu vào ký tự. Vấn đề là nó được khá chậm, 1.5s trước khi danh sách mới được phổ biến. Cách tốt nhất để thực hiện tự động hoàn thành nhanh là gì? Im sử dụng cakephp và chỉ cần tìm và với giới hạn 10 mục.

Answer 1

This article - về cách flickr thực hiện tự động hoàn thành là đọc rất tốt. Tôi đã có một vài kinh nghiệm "wow" đọc nó.

"phụ tùng này sẽ download một danh sách tất cả địa chỉ liên lạc của bạn, trong JavaScript, trong dưới 200ms (điều này là đúng ngay cả đối với thành viên với 10.000 địa chỉ liên lạc). Trong để có được mức độ hiệu suất , chúng tôi đã hoàn toàn suy nghĩ lại cách chúng tôi gửi dữ liệu từ máy chủ cho khách hàng. "

Answer 2

Vấn đề thực sự cho tốc độ trong trường hợp này tôi tin là thời gian cần để chạy truy vấn trên cơ sở dữ liệu. Nếu không có cách nào để cải thiện tốc độ truy vấn của bạn thì có thể mở rộng tìm kiếm của bạn để bao gồm nhiều mục hơn với một số kết quả được xếp hạng cao trong đó bạn có thể thực hiện tìm kiếm một nhân vật khác và lọc qua 20-30 kết quả ở phía máy khách.

Điều này có thể cải thiện hiệu suất, nhưng sau 1,5 giây, trước tiên tôi sẽ cố gắng cải thiện tốc độ truy vấn.

Ngoài ra, nếu bạn có thể cung cấp cho chúng tôi một số thông tin khác, tôi có thể cung cấp cho bạn câu trả lời cụ thể hơn.

Chúc may mắn!

Answer 3

Khoảng thời gian 1,5 giây là khoảng trống rất rộng để phục vụ dịch vụ tự động hoàn tất.

1. Trước hết hãy tối ưu hóa truy vấn của bạn và kết nối db . Hãy thử giữ kết nối db của bạn còn sống với bộ nhớ đệm.
2. Sử dụng các phương pháp lưu trong bộ nhớ cache kết quả nếu dịch vụ của bạn được sử dụng cao để bỏ qua tìm nạp lại.
3. Sử dụng bộ nhớ cache của khách hàng (danh sách JS) để giữ các yêu cầu cũ trên máy khách. Nếu người dùng gõ lại và xóa, nó sẽ hữu ích. Kết quả sẽ đến từ bộ nhớ cache của giao diện người dùng thay vì điểm phụ trợ.
4. Lọc Regex ở phía khách hàng sẽ không tốn kém, bạn có thể cho nó cơ hội.

Answer 4

Trước khi thực hiện một số tối ưu hóa, trước tiên bạn nên phân tích vị trí của cổ chai. Hãy thử tìm hiểu xem mỗi bước (đầu vào → yêu cầu → truy vấn db → phản hồi → hiển thị) mất bao lâu. Có lẽ việc triển khai CakePHP có một sự chậm trễ không gửi yêu cầu cho mỗi ký tự được nhập vào.

Answer 5

Phía máy chủ trên PHP/SQL chậm.

Không sử dụng PHP/SQL. Tự động hoàn thành của tôi được viết trên C++ và sử dụng hashtables để tra cứu. Xem hiệu suất here.

Đây là máy tính Celeron-300, FreeBSD, Apache/FastCGI.

Và, bạn thấy đấy, chạy nhanh trên các từ điển lớn. 10.000.000 hồ sơ không phải là một vấn đề.

Ngoài ra, hỗ trợ các ưu tiên, bản dịch động và các tính năng khác.

Answer 6

Tự động hoàn thành không chậm, mặc dù việc triển khai của bạn chắc chắn có thể xảy ra. Điều đầu tiên tôi sẽ kiểm tra là giá trị của tùy chọn chậm trễ của bạn (xem tài liệu jQuery). Tiếp theo, tôi sẽ kiểm tra truy vấn của bạn: bạn chỉ có thể mang lại 10 bản ghi nhưng bạn có đang thực hiện quét bảng lớn để có được 10 bản ghi đó không? Bạn đang mang lại một tấn hồ sơ từ cơ sở dữ liệu vào một bộ sưu tập và sau đó lấy 10 mặt hàng từ bộ sưu tập thay vì làm phân trang phía máy chủ trên cơ sở dữ liệu? Một chỉ mục đơn giản có thể giúp đỡ, nhưng bạn sẽ phải làm một số thử nghiệm để chắc chắn.

Answer 7

Thử tải trước đối tượng danh sách của bạn thay vì thực hiện truy vấn khi đang di chuyển.

Đồng thời, tính năng tự động hoàn tất có độ trễ 300 mili giây theo mặc định.
Có lẽ loại bỏ sự chậm trễ

$(".selector").autocomplete({ delay: 0 });