Tăng tốc jQuery AutoComplete (danh sách dài không thể tránh khỏi)

Question

Tôi bắt đầu cuộc hành trình của mình để tăng tốc độ tự động hoàn thành của jQuery vào đầu giờ chiều này và quyết định là bắt đầu memcaching mọi thứ. Như được đề xuất trong bài viết này: Speeding up autocomplete.

Tuy nhiên, tôi vẫn đang xử lý thời gian phản hồi chậm ngay cả sau khi cài đặt và sử dụng Ghi nhớ.

Vấn đề trong trường hợp của tôi là tôi đang xử lý danh sách dài đột xuất, trong trường hợp của tôi, trên thành viên riêng lẻ. (Tất cả các chi hoặc các cây thuộc tất cả các cây)

Nút cổ chai dường như đang xây dựng bảng và điền vào danh sách phía máy khách và không gây ra bởi việc truy xuất thông tin từ Memcached.

Nếu bất kỳ ai khác đã gặp sự cố cụ thể này, tôi rất thích nghe một cách thông minh để giải quyết vấn đề đó. Tôi sẽ đăng mã của tôi dưới đây.

Lưu ý: Trang cụ thể này không khả dụng cho công chúng và tôi biết rằng có một số lỗ hổng bảo mật định hình.

---

require_once 'oo/Database.php'; 

$mysqldb = new Database; 

$memcache = new Memcache; 
$memcache->connect('localhost', 11211) or die ("Could not connect to memcache"); 

$sql = "SELECT DISTINCT `Genus` FROM importlist.plants"; 

$key = md5('query'.$sql); 

$result = $memcache->get($key); 


//check if we got something back 
if($result == null) { 

    //fetch from database 
    $result = $mysqldb->rawSelect($sql)->getResult(); 

    //set to memcache, expires after 1 hour 
    $memcache->set($key,$result,0,3600); 
} 

//Result array 
$Genera = ($memcache->get($key)); 

//Add required "quotation marks" for autocomplete 
foreach ($Genera as &$Genus){ 
    $Genus = '"'.$Genus[Genus].'"'; 
} 
$Genera = implode($Genera,','); 

//PHP to generate jQuery  
echo <<< EOT 

    <script> 
    $(function() { 
     var availableTags = [$Genera]; 
     $("#tags").autocomplete({ 
      source: availableTags 
     }); 
    }); 
    </script> 
EOT; 

?> 

<input id="tags" /> 

Answer 1

$(document).ready(function() { 

    // once page loads, make AJAX request to get your autocomplete list and apply to HTML 
    $.ajax({ url: '/path-to-get-tags-as-json.php', 
     type: "GET", 
     contentType: "application/json", 
     success: function(tags) { 
      $("#tags").autocomplete({ 
       source: tags 
      }); 
     } 
    }); 
}); 

Đặt URL đến file PHP của bạn tại tạo ra các danh sách autocomplete trong tham số trên AJAX url giữ chỗ. Trong mã PHP của bạn, thay đổi thế hệ danh sách để nó trả về một mảng JSON các giá trị như sau:

[ "first" , "second" , "anotherEntry" , "in" , "the" , "array" ]  

này sẽ chắc chắn không phải tăng tốc độ bên quá trình máy chủ, nhưng nó sẽ bảo vệ của bạn người dùng từ một số sự chậm trễ trong việc áp dụng danh sách tự động hoàn thành. Điều này phần lớn giả định rằng người dùng không ngay lập tức thực hiện hành động yêu cầu tự động hoàn tất, bạn vẫn có thể tải trang và cho phép người dùng thực hiện các tác vụ khác. Việc tải danh sách tự động hoàn tất nên phần lớn xuất hiện im lặng và liền mạch.

Điều này rất tốt cho thời gian tải ít hơn một vài giây, nhưng nếu bạn mất nhiều thời gian hơn thời gian đó thì người dùng của bạn vẫn có thể gặp phải sự cố về khả năng sử dụng.

Nếu vẫn còn trì hoãn phía máy chủ, hãy xem xét sử dụng một số câu lệnh định thời gian để thử và xác định vị trí nút cổ chai.

Answer 2

Vì bạn không thể tìm kiếm bất kỳ thứ gì cho đến khi người dùng nhập ít nhất 1 ký tự, bạn có thể tạo 26 danh sách khác nhau. Mỗi danh sách tự động hoàn tất chỉ chứa các mục bắt đầu bằng chữ cái đó. Danh sách của bạn sẽ nhỏ hơn đáng kể và tải nhanh hơn.

Để làm cho nó nhanh hơn nữa, hãy tạo nhiều danh sách hơn. Bạn có thể chỉ cần 30-40 mục đầu tiên để hiển thị. Nếu mục không nằm trong danh sách rút gọn, người dùng rất có thể sẽ nhập một chữ cái khác. Sau đó, bạn có thể chia danh sách của mình thành 26 * 26 danh sách duy nhất. Mỗi danh sách chỉ chứa các mục bắt đầu bằng 2 chữ cái đầu tiên.

Bạn có thể chia các mục của mình thành nhiều danh sách nếu cần. Chúng tôi làm điều này trên một trang web tôi quản lý nơi chúng tôi có hơn 500 nghìn mặt hàng có sẵn trong typeahead của chúng tôi.