javascript - Angular performance issue with ng-repeat and directives -

I am currently working on a table with 500 rows, each cell has 5 cells. Each cell is an instruction, it takes about 3 seconds to reproduce this table and it locks the browser.

99% time in the "Pars HTML" function Which I parsed HTML for instructions. (When I scroll down, the parse HTML function is very much estimated at around 2500, there is no way to calculate it).

A plnkr link where you can see this issue using Chrome Dev Tool (spend most of the time in pars HTML):

I have to manually How to customize it without including the HTML string.

  / / code here comes angular. Module ('app', []). Directive ('cellon', function () {return}: {data: '='}, templateUrl: 'cell.html'};}) directive ('cell to', function () {return: {data: 'data : '='}, Template: 'cell 2.html'}}}. Directive ('line', function ($ compilation) {return} function compile () {returns {pre: function prelink (scope, element) {var html = ''; html + = '& lt; cell-a data = row [0] & gt; & lt; / cell-one & gt; Html == '& lt; cell-2 data = line [1] & gt; & lt; / cell-two & gt;' html + = ' & Lt; cell-a data = line [2] & gt; & lt; / cell-one & gt; Html = = '& lt; cell-2 data = line [3] & gt; & lt; / cell- Two & gt; 'html + =' & lt; cell-2 data = line [4] & gt; & lt; / cell-2 & gt; Var el = angular.element (html); var linkFunction = $ compilation L); element.append (L); linkFunction (scope);}}}}}}. Controller ('defunct Fill the data map with random data {$ scope.data = []; // scope.refresh = function () {for (var i = 0; i & lt; 500; ++ I) {$ scope.data [i] = {}; for (var j = 0; j & lt; 5; ++ j) {$ scope.data [i] [j] = Math.random (); }}} $ Scope.refresh ()});  

This is quite well There is a known fact that when you have more then angular performance related problems start happening. ~ 2000 watchers (who are responsible for handling your data binding) in your case Not, you at least 2500 meet.

Reducing the number of data binding will definitely help Angelor have recently introduced data binding that you can take advantage of if the data being compelled is not completely dynamic .

I suggest taking a look for more information.