2009-05-03 38 views
45

我打算爲一個站點使用jquery自動完成功能,並且已經實現了一個測試版本。我現在使用ajax調用來爲每個字符輸入檢索一個新的字符串列表。問題在於它在新的列表填充之前變得相當慢,1.5s。什麼是快速實現自動填充的最佳方式?我使用cakephp,只是做了一個查找,並有10個項目的限制。如何提高Jquery自動完成的性能

+0

是否包括1.5秒的自動完成的等待時間(即,它會等待,以確保你不會打字額外字符的時間)? – Powerlord 2009-05-04 16:34:01

+0

這個查詢是什麼樣的? 1.5個10個項目的速度非常慢。看到我下面關於SOLR的其他評論。像數百萬行的魅力一樣爲我們工作。 – Ligemer 2013-04-23 02:05:47

+0

最好的改進...使用選定的jquery插件! – 2016-10-18 15:57:08

回答

52

This article - 關於如何flickr自動完成是一個很好的閱讀。我有幾個「哇」的閱讀經驗。

「這個小工具下載的200ms下您的聯繫人,在JavaScript中的所有 的列表,在 (這是真實的,即使對於 成員10000個聯繫人)。在 爲了獲得這個級別的 性能,我們必須完全重新考慮 服務器向客戶端發送數據的方式。「

4

在這種情況下速度的真正問題我相信是在數據庫上運行查詢所花費的時間。如果沒有辦法提高查詢速度,那麼也許可以擴展搜索範圍,使其包含更多具有高度排名結果的項目,您可以對每個其他字符執行一次搜索,並在客戶端過濾20-30個結果。

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

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

祝你好運!

+0

是的,我也打算提出這個建議。在客戶端做一些過濾。 – Niyaz 2009-05-03 18:04:11

+0

老兄!使用SOLR。您可以直接點擊該網址。我剛剛完成將它集成到一個項目中,這將解決您的分貝查詢問題。您甚至可以將數據從MySQL加載到SOLR(我從cakephp中假設)。 – Ligemer 2013-04-23 02:04:14

11

1.5秒間隔是非常廣泛的差距,爲自動完成服務提供服務。

  1. 首先優化您的查詢和db 連接。嘗試保持你的數據庫連接 與內存緩存存活。
  2. 如果您的 服務被高度用於忽略重新提取,請使用結果緩存方法。
  3. 使用客戶端緩存(JS列表)來保留客戶端上的舊請求。如果用戶輸入並擦除,它將很有用。結果將來自前端緩存而不是後端點。
  4. 正則表達式在客戶端過濾不會很貴,你可以給它一個機會。
5

在做一些優化之前,您應該首先分析瓶頸在哪裏。嘗試找出每個步驟(輸入→請求→數據庫查詢→響應→顯示)需要多長時間。也許CakePHP實現有一個延遲,不會爲輸入的每個字符發送請求。

4

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

請勿使用PHP/SQL。我用C++編寫的自動完成,並使用哈希表進行查找。見表現here

這是Celeron-300電腦,FreeBSD,Apache/FastCGI。

而且,你看,在巨大的字典上運行得很快。 10,000,000條記錄不是問題。

此外,支持優先級,動態轉換和其他功能。

1

自動完成本身並不慢,儘管您的實現當然可以。我首先要檢查的是延遲選項的值(請參閱jQuery文檔)。接下來,我會檢查你的查詢:你可能只會帶回10條記錄,但你是否正在做一個巨大的表掃描來獲得這10條記錄?你是否將數據庫中的大量記錄帶回集合,然後從集合中取出10個項目,而不是在數據庫上進行服務器端分頁?一個簡單的索引可能會有所幫助,但是您必須進行一些測試才能確定。

36

嘗試預加載您的列表對象,而不是實時查詢。

此外,默認情況下,自動完成延遲時間爲300毫秒。
也許去除延遲

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