Angularjs 改进性能

我是新来安格拉斯的。我开发了一个列表，在搜索框中键入时可以对其进行过滤。过滤器从数据库对象中获取许多字段，并搜索所有这些字段（例如：名称、id、注释等）。 当我加载所有queryset并使用（push）命令在angular方法中填充列表时，就会出现问题。 由于数据库中有大量记录，加载页面大约需要12秒，而且数据库正在增加，所以这段时间会增加！ 我使用时间线测试了性能，正如预期的那样，脚本花费了很长时间

下面是我的一段代码：

模板

<script type="text/javascript">

    ngApp.controller('FilterCtrl', function ($scope) {


        $scope.lines = [];

        {% for line in lines %}

            $scope.lines.push
            ({
                id:{{ line.id }},
                name: '{{ line.name }}',
                alias: '{{ line.alias }}',
                owners: '{{ line.print_owners }}',
                interested_in: '{{ line.print_interested_in }}',
                crosses_count: '{{ line.related_crosses_count }}',
                area: '{{ line.expressions }}',
            });

        {% endfor %}    
  });

</script>

有什么方法可以提高性能并加快列表的填写速度？

---

非常感谢。

没有“加速”的办法

最好的方法是对表进行分页，以便最初仅为第一页加载数据。比如说，你有1000个项目，把它分成几页，每页100个项目。因此，最初只提取前100个项目。当你转到另一个页面时，接下来的100个项目依此类推

此外，对于筛选，您需要编写一个api端点，该端点将接受筛选查询并从数据库返回项。然后在表格中显示这些项目。至于何时点击此api，请使用如下组合使用

ngChange

、

ngModel

和

ngModelOptions

（用于去盎司）：

<input type="text" ng-model="search.query" ng-change="getItems()" ng-model-options="{debounce: 1000}" />

---

在这里，当用户键入内容并等待1s（由debouce处理）时，将调用

getItems（）

。在该函数中，向api发送

search.query

。

一个快速成功的方法是停止将内容逐个推送到阵列

$scope.lines = [
{% for line in lines %}
   {
        id:{{ line.id }},
        name: '{{ line.name }}',
        alias: '{{ line.alias }}',
        owners: '{{ line.print_owners }}',
        interested_in: '{{ line.print_interested_in }}',
        crosses_count: '{{ line.related_crosses_count }}',
        area: '{{ line.expressions }}',
    },
{% endfor %}    
];

</EndUglyCode>

---

如果你真的觉得你需要返回所有的行，那么你应该考虑是否需要对它们进行排序，因为这可能会占用大量的时间。

你是否考虑过某种分页（即只返回第一个代码> x< /代码>记录）？在数据库端，明显的改进是为用于此类查询的字段添加索引。@jonrsharpe分页不符合网站的要求。这就是为什么我不能用它。过滤过程应该立即检查完整的数据。@Nikita我会立即检查您的建议，谢谢。@Nawwar Mokayes，您可以通过field option从Django方面执行此操作。索引有一个缺点-它们必须进行计算，这需要时间，这取决于数据库的大小—可能很重要，但查询的速度会更快。另外，你可能想看看。谢谢。实际上，分页对于搜索的想法来说是不够的，因为过滤应该立即通过完整的数据。是的，我正在检查你的建议，它似乎起作用了。非常感谢。

$scope.lines = [
{% for line in lines %}
   {
        id:{{ line.id }},
        name: '{{ line.name }}',
        alias: '{{ line.alias }}',
        owners: '{{ line.print_owners }}',
        interested_in: '{{ line.print_interested_in }}',
        crosses_count: '{{ line.related_crosses_count }}',
        area: '{{ line.expressions }}',
    },
{% endfor %}    
];

</EndUglyCode>

 lines = Line.objects.filter(deleted=False).order_by('name')[:10]