Question

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

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

＆＃13;

<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>

＆＃13;

以上是网站中使用的结构示例。上面的代码片段在页面上重复了100次左右。它们具有图像，表格，文本，输入，用户标记，如Facebook。 ngCacheBuster，ui.bootstrap，ngTagsInput，ui.mention，monospaced.elastic这些是网站中使用的外部库。该网站使用bootstrap构建。网站变得沉重的具体原因是什么？图像的每个尺寸平均约为100kb。

Answer 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>

另一方面是仔细检查你的架构，因为一个人可以从一个页面获取非常有限的数据，因此开始考虑标签和分页

Answer 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作为

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

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

加载大量数据时网站变慢

2 个答案: