如何优化此算法的速度？ Django 和 Javascript

Question

我是 Javascript 的新手，并且对 Django 有很好的经验。 我为我的公司建立了一个图表平台来跟踪指标——它最初是一个学习 Javascript 的爱好项目，但后来演变成更多的东西。

该网站正确加载和显示数据，但在移动设备上速度慢得令人难以置信。 所有的计算都是在客户端完成的，是 JS。 有很多指标要计算，所以思考过程是“以 Object 格式向客户端发送所有 Django 查询，并在那里处理它们，以免降低服务器速度。” 我也不希望有一大块代码处理服务器上的每个指标（我这样做错了吗？）。

这里有一些问题：

• 一般来说，我应该在哪里处理数据，服务器端还是客户端？
• 如何优化此代码？ 我运行了 3 个查询，我需要找到每个指标每天的点击次数（页面浏览量、选择加入和预定呼叫）。

例如，我想显示一个图表，显示一个月内的页面浏览量，x 轴为日期，y 轴为计数。 为了做到这一点，我运行一个嵌套的 for 循环来迭代查询，然后计算该日期的页面浏览量。

当我针对三个不同的指标运行此 function 时，这非常慢。

数据在 ajax 调用中接收（这是最优的吗？）。 这是计算当天点击次数的 Javascript 代码：

var endpoint = "/my/url/";
        var opt_ins = [];
        var schedules = [];
        var page_views = [];
        $.ajax({
            method: "GET",
            url: endpoint,
            success: function (data) {
                opt_ins = data.opt_ins;
                schedules = data.audit_calls;
                page_views = data.page_views;
            },
            error: function (error) { console.log("ERROR -->  " + error); },
            async: false
        });


async function getDateCounts(data) {
            dates = [];
            count_dates = [];
            let i = 0;
            for (const element of data) {
                let date = new Date(element.date_created).toLocaleDateString("en-US");
                if (!dates.includes(date)) {
                    dates.push(date);
                    let count = 0;
                    for (const item of data) {
                        let check_date = new Date(item.date_created).toLocaleDateString("en-US");
                        if (check_date === date) {
                            count++;
                        }
                    }
                    count_dates.push(count);
                    count = 0;
                }
            }
            return [dates, count_dates];

这是 Django 视图：

class ChartData(APIView):
    authentication_classes = []
    permission_classes = []
    now = pendulum.now()
    time_period = now.subtract(months=1)

    def get(self, request, format=None):
        page_views = (
            models.AgentPageViews.objects.filter(date_created__gt=self.time_period)
            .order_by("date_created")
            .values()
        )
        opt_ins = (
            models.Client.objects.filter(date_created__gte=self.time_period)
            .order_by("date_created")
            .values()
        )
        audit_calls = (
            models.ScheduledCalls.objects.filter(date_created__gte=self.time_period)
            .filter(event__contains="Audit")
            .order_by("date_created")
            .values()
        )

        data = {
            "page_views": list(page_views),
            "opt_ins": list(opt_ins),
            "audit_calls": list(audit_calls),
        }

        return Response(data)

这些查询中的每一个都返回不同长度的 object。

这是最终图表与示例数据的示例

Answer 1

数据库是聚合这些数据的好地方，它将减少需要传递的数据量。

aggregate()方法将让您获得如下数据集：

[{'date':COUNT},{'date':COUNT},...]

如果您有日期时间，则TruncDate()允许按天分组。

from django.db.models import Sum
from django.db.models.functions import TruncDate


models.AgentPageViews.objects.filter(date_created__gt=self.time_period).
    values(date=TruncDate('date_created')).
    order_by("date_created").annotate(Sum('views')