关于自动完成性能的建议

Question

我需要提高自动完成脚本的性能。我需要的是，当我单击输入框 elementID 时，它将填充来自 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", " ");
});     

在 search.php 中

   $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

首先，您应该检查缓慢的根源在哪里。在 Chrome 开发者工具中，转到网络选项卡，查看加载自动完成列表需要多长时间：

这将告诉您问题是在服务器端还是在客户端。如果时间或延迟加起来大于 300 毫秒，那么服务器的等待可能非常明显。然后，您可能希望对服务器端代码进行基准测试，看看瓶颈在哪里。从您的代码中，您可能希望在数据库中而不是在 PHP 代码中强制执行唯一性。

如果服务器及时响应，那么问题可能出在您的 JavaScript 上。尝试寻找不同的自动完成库或尝试使其缓存 DOM 元素，而不是每次都重新创建它们。

一般来说，某种缓存和可能的预取（在用户请求之前加载初始结果集）在典型场景中应该会有所帮助。