加载大量数据时网站变慢答案

【问题标题】：website gets slow when huge amount of data is being loaded加载大量数据时网站变慢
【发布时间】：2016-12-02 20:42:08
【问题描述】：

我有一个使用 python django 和 angularJS 构建的内部团队网站。当网站上的数据/内容较少时，该网站运行良好。当网站滚动并加载更多数据时。它变得缓慢。当我们尝试打开任何modal 或尝试在textarea 中写入文本时，就会出现主要问题。写入时文本滞后，modal 打开非常缓慢。

我使用了嵌套ng-repeat，有5个嵌套ng-repeat。

<div ng-repeat="x in xyz">
  <div ng-repeat="y in xyz">
  </div>
  <div ng-repeat="img in xyz">
  </div>
  <div ng-repeat="y in xyz">
    <div ng-repeat="z in xyz">
    </div>
  </div>
</div>

以上是网站中使用的结构示例。上面的 sn-p 在整个页面中重复了大约 100 次。这些具有图像、表单、文本、输入、用户标记，如 facebook。 ngCacheBuster、ui.bootstrap、ngTagsInput、ui.mention、monospaced.elastic 这些是网站中使用的外部库。该网站是使用引导程序构建的。网站变重是否有特定原因。每个图像的大小平均约为 100kb。

【问题讨论】：

这个问题太笼统了。从您的描述中，我想到了几种可能的性能影响。这包括从缺少数据库索引到 AngularJS 问题到太多的大图像。此外，您还没有提到您是否发现它在开发或生产模式下很慢。请注意，在开发模式下，collectstatic 没有运行，CSS/JS 资源没有被缩小，缓存也没有生效。 developers.google.com/speed/pagespeed/insights 可能有助于解决生产问题。

标签： javascript jquery angularjs django twitter-bootstrap

【解决方案1】：

真的吗？有大量数据时页面加载缓慢？ :D

无论如何，加速大数据应用程序的最简单方法是有条件地加载和渲染其中的一部分，例如：

<div ng-repeat="x in bla" ng-click="showL1 = true">
    <div ng-repeat="y in boo" ng-if="showL1  === true">
        //more...
    </div>
</div>

另一方面是仔细检查您的架构，因为人们可以从页面中获取的数据量非常有限，因此开始考虑选项卡和分页

【讨论】：

no 页面加载不慢。一旦页面完全加载。然后在页面上做一些动作是很乏味的。就像输入文本或打开任何模式
你确定页面真的完成了吗？听起来像是一些额外的背景事情要去那里。使用开发工具测试自己 -> 分析器
是的，后台没有运行任何内容。页面上有观察者的作用吗？？

【解决方案2】：

也许你需要在你的控制器中使用一些函数来为用户加载所有数据的一部分。例如：

app.constant('range' , 10); 

app.controller('example', ['$scope', function($scope) {
   $scope.loadRangeData = function(range) {
   //your way of loading data with using range
   }
}

]);

之后你可以使用 ng-repeat as

<div ng-repeat="x in loadRangeData">

但最好的方法是在你的 django 中找到答案

【讨论】：