angular


Angular2 terrible performance with ngFor assigning variable to “index”


Consider the following 2d array:
myLabels = [[45, 56, 63],
[31, 67, 27],
[89, 23, 61]]
Now in a template, iterate over this array like:
<template ngFor let-row_ [ngForOf]=myLabels let-i="index">
<template ngFor let-labelid [ngForOf]=row_ let-j="index">
...
</template>
</template>
When I increase my array to something larger, the performance tanks pretty hard. A modestly-sized 40x40 array takes almost 40 seconds to render with Chromium 50. It's a little faster on Firefox 47, but not by much.
If I eliminate the index assignments (let-i="index"...), then the performance is just fine
<template ngFor let-row_ [ngForOf]=myLabels>
<template ngFor let-labelid [ngForOf]=row_>
...
</template>
</template>
So, the question is, what can be done to mitigate this issue? Is there something that I'm missing regarding ngFor? Is there a different way?
Did you try to change your change detection strategy to: ChangeDetectionStrategy.OnPush ?
Also, consider creating Immutable arrays.(See immutable.js)
Check this article: http://jvandemo.com/how-i-optimized-minesweeper-using-angular-2-and-immutable-js-to-make-it-insanely-fast/

Related Links

Browser back button only works on Chrome (not IE 11 or Safari or Firefox)
The new Router Component for Angular2 does not seem to have provision for templateUrl .
Using Angular 2 Material 2 Alpha 5 with Angular 2 RC 2
FormControl in Angular 2
Angular2 http json request
Angular 2 John Papas' Seed Project with simple Apache Server
Angular2 is converting an Array to String
Show page not found in Angular2
Angular2 SELECT OPTION after pipe executes
Angular2 - EXCEPTION: TypeError: Cannot read property 'screen' of undefined
Angular 2: onChanges() is not reflecting Object value changes
How to call ViewChild in runtime?
Angular2 not detecting change to object value
Getting values of looped template using angular2 forms
Breeze and Angular2
Angular 2 hide/show template

Categories

HOME
excel
dll
recaptcha
graphite
binary
google-places-api
unity5
geoserver
ejb
directshow
ios8
netfilter
spark-dataframe
widget
shoutem
sourceforge
corba
double
moshi
multiline
media
cdb
qtspim
ssrs-2016
packet-capture
python-datetime
filepicker.io
ddos
git-clone
provider
gtm-database
webm
aspose-cells
netbanx-api
scada
youtube-analytics
cachemanager
data-compression
smartassembly
xc8
enterprise-library-6
lpc
showdown
webrole
crypto++
docker-registry
prime-factoring
csla
istanbul
libtool
ember-cli-mirage
slug
rollbar
code-signing-entitlements
smart-pointers
turtle-rdf
code-collaborator
rouge
typing
oracle-streams
http-accept-header
jcarousel
execution-time
singularitygs
jlist
angular-ui-tree
undefined-symbol
xcode-bots
wordpress-4.5
bitarray
ms-query
nstablecolumn
materialized-views
apache-roller
rich-snippets
wpftoolkit
sequel
swift-protocols
impactjs
rails-i18n
chaplinjs
stubs
sencha-touch-2.2
stackmob
jnetpcap
ipad-2
visual-assist-x
nservicebus3
springmockito
viewstack
memory-profiling
abpeoplepickerview
codeigniter-datamapper
assetslibrary
looper
web-setup-project
openflashchart2
www-mechanize
xml-comments
widechar
uint32
vmwaretasks
nice

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App