如何优化jquery选择的插件加载超过5万个结果

How to optimize jquery chosen plugin for loading more than 50k results

本文关键字：加载 插件 5万 结果 选择 何优化 优化 jquery      更新时间：2023-09-26

我使用类"selected select"加载所有产品名称。当用户单击product_select时，加载会花费大量时间。可以做些什么来提高性能。

<select class='chosen-select' data-placeholder="Choose a product..." id="product_select">
  <option></option>
         <?php
          include 'connection.php';
           $query = "SELECT * FROM " . $table_name;
           $result = mysqli_query($con, $query);
           $results = array();
           while ($line = mysqli_fetch_assoc($result))
           {
                   $results[] = $line;
           }
           $i = 0;
           foreach ($results as $r)
           {
               $i++;
               echo "<option value=" . $r['id'] . ">" . $r['Product_name'] . "</option>";
           }
          ?>
</select>
<script>
     $('#product_select').chosen({max_selected_options: 1});
</script>

您应该做什么

为了用户的理智，一次提供这么多选项可能不是一个好主意。如果是我，我可能会切换到自动完成模型，或者用户在请求之前将选项请求缩小到一个子集的一种方式，然而，这里有一些关于可以用来优化的提示。

你能做什么

您唯一可以优化的真正点—而无需自己重写jQuery插件—就是在服务器端改进。这可能包括（正如Samuel Liew所说）缓存服务器响应，但也可以改善与数据库的连接，即确保处理的是本地数据库而不是远程数据库。一些可以帮助更快查询的简单步骤：

通过指定目标字段而不是使用*，它可能有助于处理大量的行。

优化mysql查询的15个技巧

即使更改数据库/表的类型也会有所帮助；例如，如果硬件的磁盘写入速度/效率较低，请尝试完全从内存中运行表。然而，这些类型的选项要求您必须对数据库服务器和数据库配置有很大的控制权，如果您使用共享主机，则不太可能做任何事情。。。不过，您可以在使用MySQL或SQLite之间进行选择，这足以在基于磁盘的数据库和更基于内存的数据库之间切换。如果你正在运行一个专用服务器，但是你可以做很多事情来优化MySQL，但这需要大量的阅读（这是一个复杂的主题），这个SO线程暗示了你可以为MySQL做的一些事情：

MySQL优化配置（my.cnf）

可能有帮助的一件事是在查询中构建HTML，但这取决于数据库实例的内存大小。对于复杂的查询，我不建议这样做，但您生成的内容非常简单。以下假设MySQL使用情况：

SELECT 
  GROUP_CONCAT(
    '<option value="',id,'">', name, '</option>' SEPARATOR ''
  ) AS html
  FROM $table_name 
  GROUP BY NULL

一旦数据库将您想要的HTML带回PHP，您就可以将结果缓存在另一个数据库表中，或者作为本地文件系统中的文件；那么在下一次请求此选项列表时，您应该从缓存位置提供服务—并且继续这样做，直到前缀的到期时间（或者高速缓存被删除）。

下面的链接解释了粗略的过程，根据您的需要，您只需编写从数据库中带回的结果；而不是如他们的例子中的CCD_ 2；不过，这只是服务器端缓存的一种方式。

php 中的轻松服务器端缓存

客户端缓存

根据您显示此输入的频率或用户可能遇到它的频率，您还可以使用window.localStorage对象在客户端（对于支持它的浏览器）进行优化。这将允许您在发出AJAX选择请求之前检查localStorage，如果您已经在那里存储了选项html，那么您可以使用它来完全删除请求。localStorage似乎有一个500万的非官方存储限制，但这应该涵盖你的50000件物品。这显然不会加快用户第一次访问的速度，但后续访问应该会有很大的改进。您还应该记住，如果数据库表被更新，那么缓存将被清除。

相关文章：