자동 완성 성능에 대한 조언

Question

자동 완성 스크립트의 성능을 향상시켜야합니다. 필요한 것은 입력 상자 elementID를 클릭하면 search.php에서 선택 목록을 채울 것입니다. 반환 값은 json_encode입니다. 다음 스크립트가 작동 중입니다. 그러나 입력 상자를 클릭 할 때마다 목록을 생성하는 데 시간이 걸립니다. search.php에서

("#elementID") 
.autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
     url: "search.php", 
     dataType: "json", 
     success: function(data){ 
     response(data[0]);         
     } 
    }); 
    }, 
    minLength: 0, 
    delay: 0, 
    select: function(event, ui){ 
    $(this).val(ui.item.value); 
    }, 
    change: function(event, ui) { //remove if not click from drop down 
    if (!ui.item) { 
     $(this).val(""); 
    } 
    }        
})  
.click(function() { //Click to activate 
    $("#elementID").autocomplete("search", " "); 
});  

$ocidb ->strTable  = "table"; 
    $ocidb ->strField  = "column1"; 
    $ocidb ->strCondition = "coulmn1 is not null"; 
    $result    = $ocidb->ORASelectRecord(); 
    echo json_encode(filter_unique_array($result, 'coulmn1')); 
    return; 

내가 제대로 일을하고 있거나 할 또 다른 적절한 방법이 있는지처럼 밖으로 찾는 방법은?

Answer 1

우선 무엇이 속도 저하의 원인인지 확인해야합니다. 크롬 개발자 도구는 네트워크 탭으로 이동하고 당신의 자동 완성 목록을로드하는 데 걸리는 시간 참조 : 문제가 서버 측 또는 클라이언트 측에있는 경우

가

이 당신을 말할 것이다. 시간 또는 대기 시간이 함께 300ms보다 길면 서버 대기 시간이 상당히 길어질 가능성이 있습니다. 그런 다음 서버 측 코드를 벤치마킹하여 병목 현상이 어디인지 확인할 수 있습니다. 코드에서 PHP 코드가 아닌 데이터베이스에 고유성을 적용 할 수 있습니다.

서버가 즉시 응답하면 JavaScript에 문제가있는 것 같습니다. 다른 자동 완성 라이브러리를 찾아 보거나 매번 다시 작성하지 말고 DOM 요소를 캐시하도록하십시오.

일반적으로 일종의 캐시와 가능하면 사용자가 요청하기 전에 초기 결과 세트를로드하는 프리 페칭은 일반적인 시나리오에서 도움이됩니다.