JSON 数组使网站变慢。 AngularJS答案

【问题标题】：JSON array making website slow. AngularJSJSON 数组使网站变慢。 AngularJS
【发布时间】：2016-05-20 20:59:33
【问题描述】：

我有一个 MVS 项目，我在其中使用 AJAX 检索数组... 以下是我在 C# 上的课程...我检索了 19,500 条记录的列表...基本上我拉了一个 IEnumerable

public partial class VW_Suppliers
{
    public int SupplierID { get; private set; }
    public string Name { get; private set; }
    public int SolarNumber { get; private set; }
    public bool TpiClassification { get; private set; }

    public int ValueStreamID { get; private set; }
    public string ValueStream { get; private set; }

    public int StatusID { get; private set; }
    public string Status { get; private set; }

    public string SupplierCode { get; private set; }
    public int PurchaseSystemID { get; private set; }
    public string PurchaseSystem { get; private set; }

    public int AddressID { get; private set; }
    public int AddressTypeID { get; private set; }
    public string AddressType { get; private set; }
    public string Street1 { get; private set; }
    public string Street2 { get; private set; }
    public string PoBox { get; private set; }
    public string City { get; private set; }
    public string PostalCode { get; private set; }
    public int StateID { get; private set; }
    public string StateCode { get; private set; }
    public string State { get; private set; }
    public int CountryID { get; private set; }
    public string CountryCode { get; private set; }
    public string Country { get; private set; }
}


    [HttpGet]
    public ActionResult GetSuppliersData()
    {
        JsonObject jsonObject;
        IEnumerable<ViewSupplierVM> suppliers = _supplierService.GetAllSuppliers();

        JsonResult jsonResult = Json(suppliers, JsonRequestBehavior.AllowGet);
        jsonResult.MaxJsonLength = int.MaxValue;

        return jsonResult;
    }

但是，我注意到两件事......当使用断点时，我注意到在我点击返回后......当接收到数据时，AngularJS 需要大约 10 秒才能到达断点。第二个问题是，每当页面准备好所有数据时......整个网站都很慢......例如......你在文本框上输入，输入后0.5到4秒内所有内容都会出现......这让我相信这个包含 19,500 个元素的数组正在消耗大量内存...

要求所有供应商都出现在第一个屏幕上，所以没有办法扭转这个要求。

有什么建议吗？在 MVC 控制器上可以做哪些技巧来更快地发送到前端并防止网站变慢？

【问题讨论】：

耶稣，一口气19000。这将很好地扩展。分页、无限滚动、具有跳过获取机制的 api。

标签： arrays angularjs json asp.net-mvc-4

【解决方案1】：

加载和渲染 19,000 对我来说根本不可行。我也刚刚开发了一个应用程序，在该应用程序中，客户需要能够管理他们所有的产品 (15,000+)。最初的实现是使用分页完成的，this 的答案对我来说很好地解决了这个问题。但更优雅的解决方案是实现某种类型的infinite-scroll 机制，为此我使用了ngInfiniteScroll (https://sroze.github.io/ngInfiniteScroll/)。现在，这为您解决了部分问题，那就是您的页面由于大量 HTML 呈现而变慢，但在任何情况下一次性从服务器检索 19,000 个项目都不是一个好主意。它不仅给数据库带来了极大的压力，而且如果托管在实时服务器上，您会在请求数据时看到相当大的延迟。我建议一次提取 20、30、100 个数据。对于这个来自ngInfiniteScroll 的myPagingFunction 应该是实施的正确位置。

【讨论】：