웹 사이트에서 자동 완성을보다 반응이 좋게 만드는 기술

StackOverflow https://stackoverflow.com/questions/625432

  •  05-07-2019
  •  | 
  •  

문제

내 웹 사이트의 고급 검색 화면에는 자동 완성 필드가 필요한 약 15 개의 필드가 있습니다.
그들의 내용은 서로의 값에 따라 다릅니다 (따라서 하나가 채워지면 상대방의 내용은 첫 번째 값에 따라 변경됩니다).
대부분의 필드에는 많은 가능성이 있습니다 (최소한 1000 개 항목).

사용자가 반 초 동안 입력을 중지하면 현재 Ajax 호출을합니다. 이 Ajax 호출은 내 Lucene 지수를 빠르게 호출하고 많은 JSON 객체를 반환합니다. 메소드 자체는 실제로 빠르지 만 너무 느린 데이터의 연결 및 전송입니다.

다른 사이트 (Facebook)를 보면 자동 완성이 즉각적입니다. 나는 그들이 가능한 값을 그들의 HTML에 넣었으므로 왕복 여행을 할 필요가 없습니다. 그러나 나는 내가 처리하는 데이터의 양을 두려워합니다. 이것은 옵션이 아닙니다.

어떤 아이디어?

도움이 되었습니까?

해결책

  1. 상위 X 결과 만 반환합니다.
  2. 사용자가 무엇을 선택하는지에 대한 트렌드를 얻고 바람직하게는 자동으로 주문하십시오.
  3. 모든 URL 및 Keystroke 조합에 대한 캐시 결과는 이전에 이미 결과를 가져 왔을 때 왕복 할 필요가 없습니다.
  4. 동일한 URL 및 KeyStroke 조합을 사용하는 모든 AutoCompletes 와이 캐시를 공유하십시오.
  5. 물론 JSON의 GZIP 압축을 활성화하고 캐시 헤더를 한동안 캐시로 설정하십시오. 시간은 자동 완성 응답의 변화율에 따라 다릅니다.
  6. JSON을 최적화하여 최소값을 보내십시오. 필요하지 않은 것을 보내지 마십시오.

다른 팁

JSON 객체로서 가능성에 대한 모든 결과를 반환하고 있습니까?

많은 사람들이 많은 수의 결과를 화면으로 다시 보내지 만 처음 몇 개만 표시합니다. 적은 수의 결과를 다시 보내면 데이터 전송을 줄일 수 있습니다.

옵션 수를 줄이려면 전체 목록이 아닌 상단 "X"결과를 반환합니까? 또한 사용자가 목록에서 선택한 내용을 추적하여 가장 많이 사용되는/가장 잘 알려진 "X"를 시도하고 만들 수 있습니다. 항상 가장 관련성이 높은 목록을 먼저 반환 한 다음 여전히 어려움을 겪고있는 경우 전체 목록을 반환 할 수 있습니다.

결과 세트를 상단 X 세트로 제한하는 것 외에도 AJAX 요청의 응답에 대한 캐싱을 활성화하는 것을 고려하십시오 (GET 및 URL을 간단하게 유지하는 것을 의미합니다).

사용자가 얼마나 자주 백 스페이스를 백 스페이스 할 것인지 놀랍습니다. 또한 공개 및 서버 측 캐싱을 허용함으로써 전체 왕복 시간을 가속화 할 수 있습니다.

  • system.web.cache의 결과를 캐시합니다
  • 루센 캐시를 사용하십시오
  • IE 캐시로 게시하지 마십시오
  • 결과의 하위 집합 만 가져옵니다 (10 명이 제안한대로 10 명)
  • 괜찮은 제 3 자 자동 완성 위젯을 사용해보십시오 Yui 하나

Top-N 항목을 반환하는 것은 좋은 접근법입니다. 그러나 당신이 원하거나 돌아와야한다면 모두 데이터를 사용하면 전송되는 데이터와 JSON 객체 자체를 제한하려고합니다.

예를 들어:

"긴 이름을 가진이 회사"는 "이 회사가 여기 회사 ..."가된다 (당신은 점을 클라이언트 쪽이라는 이름에 넣고, 최소한의 데이터를 전송한다).

그리고 JSON 객체가 진행되는 한 :

{n: "This Here Company", v: "1"}

... 여기서 "n"은 이름이고 "V"는 가치가 될 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top