如何提高Jquery自動完成的性能

Question

我計划在網站上使用jquery自動完成功能並實現了測試版本。 我現在使用ajax調用來檢索每個字符輸入的新字符串列表。 問題是它在填充新列表之前1.5秒變得相當慢。 快速自動完成的最佳方法是什么？ 我正在使用cakephp，只是做了一個發現，並限制了10個項目。

Answer 1

這篇文章 - 關於flickr如何自動完成是一個非常好的閱讀。 我有一些閱讀它的“哇”經歷。

“這個小部件在不到200毫秒的時間內以JavaScript的形式下載所有聯系人的列表（即使對於擁有10,000多個聯系人的成員也是如此）。為了獲得這種性能水平，我們必須徹底重新思考我們如何從服務器到客戶端。“

Answer 2

嘗試預加載列表對象，而不是動態執行查詢。

此外，自動完成默認情況下有300毫秒的延遲。
也許消除延遲

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

Answer 3

1.5秒間隔是非常寬的間隙，以提供自動完成服務。

1. 首先優化查詢和數據庫連接。 嘗試使用內存緩存使數據庫連接保持活動狀態。
2. 如果您的服務被高度用於忽略重新獲取，請使用結果緩存方法。
3. 使用客戶端緩存（JS列表）來保留客戶端上的舊請求。 如果用戶輸入並刪除，它將是有用的。 結果將來自前端緩存而不是后端點。
4. 在客戶端進行正則表達式過濾不會很昂貴，您可以給它一個機會。

Answer 4

在做一些優化之前，你應該首先分析瓶頸的位置。 嘗試找出每個步驟（輸入→請求→數據庫查詢→響應→顯示）需要多長時間。 也許CakePHP實現延遲不發送輸入的每個字符的請求。

Answer 5

PHP / SQL上的服務器端很慢。

不要使用PHP / SQL。 我的自動完成在C ++上編寫，並使用哈希表進行查找。 看這里的表現。

這是Celeron-300計算機，FreeBSD，Apache / FastCGI。

並且，你看，在巨大的詞典上快速運行。 10,000,000條記錄不是問題。

此外，還支持優先級，動態翻譯和其他功能。

Answer 6

在這種情況下，速度的真正問題我認為是在數據庫上運行查詢所需的時間。 如果沒有辦法提高查詢速度，那么可能會擴展搜索以包含更多具有高排名結果的項目，您可以在其他角色執行一次搜索，並在客戶端過濾20-30個結果。

這可能會改善性能的外觀，但在1.5秒時，我會首先嘗試提高查詢速度。

除此之外，如果你能給我們更多的信息，我可能會給你一個更具體的答案。

祝好運！

Answer 7

自動完成本身並不慢，盡管您的實現肯定可以。 我要檢查的第一件事是你的延遲選項的價值（參見jQuery文檔）。 接下來，我會檢查您的查詢：您可能只會帶回10條記錄，但是您是否正在進行大量的表掃描以獲取這10條記錄？ 您是否將數據庫中的大量記錄帶回到集合中，然后從集合中獲取10個項目而不是在數據庫上進行服務器端分頁？ 一個簡單的索引可能會有所幫助，但您必須進行一些測試才能確定。