膨大な量のデータがロードされていると、Webサイトが遅くなる

Question

python djangoとangularJSを使用して内部チームのWebサイトを構築しています。データ/コンテンツの量が少ない場合、ウェブサイトは正常に動作します。 ウェブサイトがスクロールしてより多くのデータが読み込まれると、それは遅くなります。 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>

ウェブサイトで使用されている構造の一例です。 上記のスニペットは、そのページを100回繰り返しています。 これは、画像、フォーム、テキスト、入力、facebookのようなユーザータギングを持っています。 ngCacheBuster、ui.bootstrap、ngTagsInput、ui.mention、monospaced.elasticこれらは、ウェブサイトで使用されている外部ライブラリです。 ウェブサイトはブートストラップを使用して構築されています。 ウェブサイトが重くなる具体的な理由はありますか？ 画像の各サイズは平均して約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 
    } 
} 

]); 

およびuは

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

が、最善の方法、それはあなたのジャンゴで答えを見つけることだとNGリピートを使用することができた後、多分