如何优化jquery选择的插件以加载超过50k的结果

时间:2013-08-26 07:04:16

标签: php javascript jquery html jquery-plugins

我使用“select-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>

1 个答案:

答案 0 :(得分:2)

你应该做什么

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

你能做什么

你可以优化的唯一真正意义 - 不用自己重写jQuery插件 - 就是改善服务器端的东西。这可能包括(如Samuel Liew所述)缓存服务器响应,但也改善了与数据库的连接,即确保您正在处理本地数据库而不是远程数据库。一些简单的步骤可以帮助加快查询速度:

  

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

15 tips on optimising mysql queries

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

Optimal MySQL-configuration (my.cnf)

可能的一件事有用,但取决于您的数据库实例有多少内存,将在您的查询中构建HTML。我不建议复杂的查询,但你生成的很简单。以下假设使用MySQL:

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

一旦你让数据库将你想要的HTML带回PHP,你可以将这个结果缓存到另一个db表中,或者作为本地文件系统中的文件;然后在下一个对此选项列表的请求中,您应该从缓存的位置进行服务 - 并继续这样做,直到有前缀的到期时间(或缓存被删除)。

以下链接解释了粗略的过程,根据您的需要,您只需编写从数据库中返回的结果;而不是像他们的例子中的ob_get_contents() - 这只是服务器端缓存的一种方式。

Easy server-side caching in php

客户端缓存

根据您显示此输入的频率或用户可能遇到的频率,您还可以使用window.localStorage对象在客户端(对于支持它的浏览器)进行优化。这将允许您在发出AJAX选择请求之前检查localStorage,如果您已经存储了html选项,则可以使用该选项并完全删除请求。 localStorage似乎存在5M的非官方存储限制,但这应该涵盖您的50000项。这显然不会加快用户第一次访问的速度,但随后的访问应该会有所改善。您还应该记住,如果更新了数据库表,可以清除缓存。