Question

我使用了23k的两列名称id的数组。 $information['localidades']然后我有一个23行($information['provincias'])的数组，它通过外键匹配23k的几行。

问题是页面加载23k行需要这么长时间，比如20秒，还有什么方法可以让它更快？

我使用带有AJAX的jQuery来引入23行的每个选择以带来23k的依赖性，但我想通过没有AJAX的jQuery来实现它。

   <select name="provincia" class="form-control" id="provincias">
                                                <option value="">Seleccione Provincia</option>
                                                <?php
                                                foreach ($information['provincias'] as $provincia) {
                                                    echo '<option value="' . $provincia['id'] . '">' . $provincia['nombre'] . '</option>';
                                                }
                                                ?>
                                            </select>


   <select name="localidad" class="form-control" id="localidades_select" >
                                                <option>Capital Federal</option>
                                            </select>

 <script>
                $("#provincias").change(function() {
                    var provincia_id = $(this).val();
                    var localidades = new Array();
                    localidades = <?php echo json_encode($information['localidades']); ?>;
                    $('#localidades_select').find('option').remove().end();
                    $.each(localidades, function(key, valor) {
                        if (valor.id_provincia == provincia_id) {
                            $("#localidades_select").append('<option value="' + valor.id + '">' + valor.nombre + '</option>');
                        }
                    });
                });
            </script>

Answer 1

23k DOM节点当然会使网页渲染速度变慢。 PHP中实际生成的HTML并不需要花费时间（应该少于2秒） - 这是浏览器用于呈现页面的时间，这是此处的瓶颈。

我不认为你的方法很好。你需要通过AJAX进行某种延迟加载。为什么没有自动填充文本字段，用户写入前几个字符，然后将匹配的行加载到建议框中？有很多解决方案。

尝试查看Typeahead.js。

Answer 2

根据我自己的经验，使用JavaScript操作巨大的<select>控件非常慢。特别是较旧的Internet Explorer版本使用起来非常痛苦。

一些提示：

避免单个节点处理。相反，生成HTML标记并使用.innerHTML一次插入。
不要重新计算静态内容。例如，$("#localidades_select")将永远不会更改，因此您可以在页面加载时运行它并将结果存储在变量中。
尝试其他数据结构。例如，如果您按省份对$information['localidades']进行分组，则循环中不需要if (valor.id_provincia == provincia_id) {。
在PHP中尽可能多地做。例如，您可以尝试在服务器上生成完整的HTML标记，而不是仅包含原始数据的数组。
在多个浏览器中测试。浏览器A中可接受的代码可能会删除浏览器B.

通过一些繁重的优化，您可以将时间减少到几秒钟，这仍然很慢但无论如何都可以使用，但它永远不会像AJAX一样快。

Answer 3

通过提供一个php脚本来对网页做更多的事情使得加载速度变慢，因为创建响应所花费的时间会很长。确保您网站的所有网页加载速度更快。

即使我必须认真对待这个案例的ajax。如果数据库中的行不断增加，则加载的时间也会增加如果你改变使用ajax的想法然后获取两个数据，即外键和数据作为单个查询，以使其更快。

PHP带来的数组需要很长时间

3 个答案: