AngularJS - Which scope is better performance wise? Object.key or Some Variable?
Let's say I have to store customer information, and to manage two-way binding I'll use $scope
here.
So my doubt here is, which approach is better?
$scope.firstname = "foo";
$scope.lastname = "bar";
$scope.cellno = "1234567890";
$scope.email = "foobar@example.com";
OR
$scope.customerDetailsObj = {};
$scope.customerDetailsObj.firstname = "foo";
$scope.customerDetailsObj.lastname = "bar";
$scope.customerDetailsObj.cellno = "1234567890";
$scope.customerDetailsObj.email = "foobar@example.com";`
I've been wondering about this because I have a large angular application and sometimes the scope watchers count goes beyond 1500. I'm using a chrome extension to see watchers count.
Please share your views. Thank You.
javascript angularjs performance
|
show 4 more comments
Let's say I have to store customer information, and to manage two-way binding I'll use $scope
here.
So my doubt here is, which approach is better?
$scope.firstname = "foo";
$scope.lastname = "bar";
$scope.cellno = "1234567890";
$scope.email = "foobar@example.com";
OR
$scope.customerDetailsObj = {};
$scope.customerDetailsObj.firstname = "foo";
$scope.customerDetailsObj.lastname = "bar";
$scope.customerDetailsObj.cellno = "1234567890";
$scope.customerDetailsObj.email = "foobar@example.com";`
I've been wondering about this because I have a large angular application and sometimes the scope watchers count goes beyond 1500. I'm using a chrome extension to see watchers count.
Please share your views. Thank You.
javascript angularjs performance
1
This may help: stackoverflow.com/questions/18128323/…
– Rameez Raja
Nov 20 at 8:10
1
@RameezRaja The answer there is true for readability and code structure management, but performance is another issue
– CertainPerformance
Nov 20 at 8:41
Yes, my concern is about the performance.
– R J
Nov 20 at 10:54
1
Whether a watcher is watching a property of $scope or a property of a scope object, it is still performing a watch function. The watch count will be the same. The name of the item being watched is only parsed once, when it is added the watch list. Look elsewhere to improve performance.
– georgeawg
Nov 20 at 12:33
1
check this out stackoverflow.com/questions/8789969/…
– holydragon
Nov 28 at 9:09
|
show 4 more comments
Let's say I have to store customer information, and to manage two-way binding I'll use $scope
here.
So my doubt here is, which approach is better?
$scope.firstname = "foo";
$scope.lastname = "bar";
$scope.cellno = "1234567890";
$scope.email = "foobar@example.com";
OR
$scope.customerDetailsObj = {};
$scope.customerDetailsObj.firstname = "foo";
$scope.customerDetailsObj.lastname = "bar";
$scope.customerDetailsObj.cellno = "1234567890";
$scope.customerDetailsObj.email = "foobar@example.com";`
I've been wondering about this because I have a large angular application and sometimes the scope watchers count goes beyond 1500. I'm using a chrome extension to see watchers count.
Please share your views. Thank You.
javascript angularjs performance
Let's say I have to store customer information, and to manage two-way binding I'll use $scope
here.
So my doubt here is, which approach is better?
$scope.firstname = "foo";
$scope.lastname = "bar";
$scope.cellno = "1234567890";
$scope.email = "foobar@example.com";
OR
$scope.customerDetailsObj = {};
$scope.customerDetailsObj.firstname = "foo";
$scope.customerDetailsObj.lastname = "bar";
$scope.customerDetailsObj.cellno = "1234567890";
$scope.customerDetailsObj.email = "foobar@example.com";`
I've been wondering about this because I have a large angular application and sometimes the scope watchers count goes beyond 1500. I'm using a chrome extension to see watchers count.
Please share your views. Thank You.
javascript angularjs performance
javascript angularjs performance
asked Nov 20 at 6:03
R J
144115
144115
1
This may help: stackoverflow.com/questions/18128323/…
– Rameez Raja
Nov 20 at 8:10
1
@RameezRaja The answer there is true for readability and code structure management, but performance is another issue
– CertainPerformance
Nov 20 at 8:41
Yes, my concern is about the performance.
– R J
Nov 20 at 10:54
1
Whether a watcher is watching a property of $scope or a property of a scope object, it is still performing a watch function. The watch count will be the same. The name of the item being watched is only parsed once, when it is added the watch list. Look elsewhere to improve performance.
– georgeawg
Nov 20 at 12:33
1
check this out stackoverflow.com/questions/8789969/…
– holydragon
Nov 28 at 9:09
|
show 4 more comments
1
This may help: stackoverflow.com/questions/18128323/…
– Rameez Raja
Nov 20 at 8:10
1
@RameezRaja The answer there is true for readability and code structure management, but performance is another issue
– CertainPerformance
Nov 20 at 8:41
Yes, my concern is about the performance.
– R J
Nov 20 at 10:54
1
Whether a watcher is watching a property of $scope or a property of a scope object, it is still performing a watch function. The watch count will be the same. The name of the item being watched is only parsed once, when it is added the watch list. Look elsewhere to improve performance.
– georgeawg
Nov 20 at 12:33
1
check this out stackoverflow.com/questions/8789969/…
– holydragon
Nov 28 at 9:09
1
1
This may help: stackoverflow.com/questions/18128323/…
– Rameez Raja
Nov 20 at 8:10
This may help: stackoverflow.com/questions/18128323/…
– Rameez Raja
Nov 20 at 8:10
1
1
@RameezRaja The answer there is true for readability and code structure management, but performance is another issue
– CertainPerformance
Nov 20 at 8:41
@RameezRaja The answer there is true for readability and code structure management, but performance is another issue
– CertainPerformance
Nov 20 at 8:41
Yes, my concern is about the performance.
– R J
Nov 20 at 10:54
Yes, my concern is about the performance.
– R J
Nov 20 at 10:54
1
1
Whether a watcher is watching a property of $scope or a property of a scope object, it is still performing a watch function. The watch count will be the same. The name of the item being watched is only parsed once, when it is added the watch list. Look elsewhere to improve performance.
– georgeawg
Nov 20 at 12:33
Whether a watcher is watching a property of $scope or a property of a scope object, it is still performing a watch function. The watch count will be the same. The name of the item being watched is only parsed once, when it is added the watch list. Look elsewhere to improve performance.
– georgeawg
Nov 20 at 12:33
1
1
check this out stackoverflow.com/questions/8789969/…
– holydragon
Nov 28 at 9:09
check this out stackoverflow.com/questions/8789969/…
– holydragon
Nov 28 at 9:09
|
show 4 more comments
2 Answers
2
active
oldest
votes
In my opinion and as-per angularjs guide first approach (binding to properties directly) will be more efficient. Excerpt from the guide:
Dirty checking can be done with three strategies: By reference, by
collection contents, and by value. The strategies differ in the kinds
of changes they detect, and in their performance characteristics.
- Watching by reference (scope.$watch (watchExpression, listener)) detects a change when the whole value returned by the watch expression
switches to a new value. If the value is an array or an object,
changes inside it are not detected. This is the most efficient
strategy.
- Watching collection contents (scope.$watchCollection (watchExpression, listener)) detects changes that occur inside an
array or an object: When items are added, removed, or reordered. The
detection is shallow - it does not reach into nested collections.
Watching collection contents is more expensive than watching by
reference, because copies of the collection contents need to be
maintained. However, the strategy attempts to minimize the amount of
copying required.
- Watching by value (scope.$watch (watchExpression, listener, true)) detects any change in an arbitrarily nested data structure. It is the
most powerful change detection strategy, but also the most expensive.
A full traversal of the nested data structure is needed on each
digest, and a full copy of it needs to be held in memory.
Thank you. This clears the doubt.
– R J
Nov 28 at 9:30
add a comment |
Talking only about performance, I think option 1 (having plain variables) it's more efficient.
Watching plain properties
the $watch() function, by default only checks object reference equality. So within each $digest it will check to see if the new and old values pointing to the same object.
Watching objects and arrays
If you want to $watch() an object, you have to switch to the deep watch and that means that within each $digest, it will check the whole tree to see if the structure or values are changed. So, bigger the object, more expensive the check.
$watchGroup(), an alternative to objects/array watchers
If you have a group of related properties like ie a person (name, surname, age), you could define it like plain properties, and use $watchGroup(), that works on the same way like a common $watch() but taking a list of properties to watch rather than one.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387118%2fangularjs-which-scope-is-better-performance-wise-object-key-or-some-variable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
In my opinion and as-per angularjs guide first approach (binding to properties directly) will be more efficient. Excerpt from the guide:
Dirty checking can be done with three strategies: By reference, by
collection contents, and by value. The strategies differ in the kinds
of changes they detect, and in their performance characteristics.
- Watching by reference (scope.$watch (watchExpression, listener)) detects a change when the whole value returned by the watch expression
switches to a new value. If the value is an array or an object,
changes inside it are not detected. This is the most efficient
strategy.
- Watching collection contents (scope.$watchCollection (watchExpression, listener)) detects changes that occur inside an
array or an object: When items are added, removed, or reordered. The
detection is shallow - it does not reach into nested collections.
Watching collection contents is more expensive than watching by
reference, because copies of the collection contents need to be
maintained. However, the strategy attempts to minimize the amount of
copying required.
- Watching by value (scope.$watch (watchExpression, listener, true)) detects any change in an arbitrarily nested data structure. It is the
most powerful change detection strategy, but also the most expensive.
A full traversal of the nested data structure is needed on each
digest, and a full copy of it needs to be held in memory.
Thank you. This clears the doubt.
– R J
Nov 28 at 9:30
add a comment |
In my opinion and as-per angularjs guide first approach (binding to properties directly) will be more efficient. Excerpt from the guide:
Dirty checking can be done with three strategies: By reference, by
collection contents, and by value. The strategies differ in the kinds
of changes they detect, and in their performance characteristics.
- Watching by reference (scope.$watch (watchExpression, listener)) detects a change when the whole value returned by the watch expression
switches to a new value. If the value is an array or an object,
changes inside it are not detected. This is the most efficient
strategy.
- Watching collection contents (scope.$watchCollection (watchExpression, listener)) detects changes that occur inside an
array or an object: When items are added, removed, or reordered. The
detection is shallow - it does not reach into nested collections.
Watching collection contents is more expensive than watching by
reference, because copies of the collection contents need to be
maintained. However, the strategy attempts to minimize the amount of
copying required.
- Watching by value (scope.$watch (watchExpression, listener, true)) detects any change in an arbitrarily nested data structure. It is the
most powerful change detection strategy, but also the most expensive.
A full traversal of the nested data structure is needed on each
digest, and a full copy of it needs to be held in memory.
Thank you. This clears the doubt.
– R J
Nov 28 at 9:30
add a comment |
In my opinion and as-per angularjs guide first approach (binding to properties directly) will be more efficient. Excerpt from the guide:
Dirty checking can be done with three strategies: By reference, by
collection contents, and by value. The strategies differ in the kinds
of changes they detect, and in their performance characteristics.
- Watching by reference (scope.$watch (watchExpression, listener)) detects a change when the whole value returned by the watch expression
switches to a new value. If the value is an array or an object,
changes inside it are not detected. This is the most efficient
strategy.
- Watching collection contents (scope.$watchCollection (watchExpression, listener)) detects changes that occur inside an
array or an object: When items are added, removed, or reordered. The
detection is shallow - it does not reach into nested collections.
Watching collection contents is more expensive than watching by
reference, because copies of the collection contents need to be
maintained. However, the strategy attempts to minimize the amount of
copying required.
- Watching by value (scope.$watch (watchExpression, listener, true)) detects any change in an arbitrarily nested data structure. It is the
most powerful change detection strategy, but also the most expensive.
A full traversal of the nested data structure is needed on each
digest, and a full copy of it needs to be held in memory.
In my opinion and as-per angularjs guide first approach (binding to properties directly) will be more efficient. Excerpt from the guide:
Dirty checking can be done with three strategies: By reference, by
collection contents, and by value. The strategies differ in the kinds
of changes they detect, and in their performance characteristics.
- Watching by reference (scope.$watch (watchExpression, listener)) detects a change when the whole value returned by the watch expression
switches to a new value. If the value is an array or an object,
changes inside it are not detected. This is the most efficient
strategy.
- Watching collection contents (scope.$watchCollection (watchExpression, listener)) detects changes that occur inside an
array or an object: When items are added, removed, or reordered. The
detection is shallow - it does not reach into nested collections.
Watching collection contents is more expensive than watching by
reference, because copies of the collection contents need to be
maintained. However, the strategy attempts to minimize the amount of
copying required.
- Watching by value (scope.$watch (watchExpression, listener, true)) detects any change in an arbitrarily nested data structure. It is the
most powerful change detection strategy, but also the most expensive.
A full traversal of the nested data structure is needed on each
digest, and a full copy of it needs to be held in memory.
answered Nov 28 at 4:15
Dipen Shah
7,17011428
7,17011428
Thank you. This clears the doubt.
– R J
Nov 28 at 9:30
add a comment |
Thank you. This clears the doubt.
– R J
Nov 28 at 9:30
Thank you. This clears the doubt.
– R J
Nov 28 at 9:30
Thank you. This clears the doubt.
– R J
Nov 28 at 9:30
add a comment |
Talking only about performance, I think option 1 (having plain variables) it's more efficient.
Watching plain properties
the $watch() function, by default only checks object reference equality. So within each $digest it will check to see if the new and old values pointing to the same object.
Watching objects and arrays
If you want to $watch() an object, you have to switch to the deep watch and that means that within each $digest, it will check the whole tree to see if the structure or values are changed. So, bigger the object, more expensive the check.
$watchGroup(), an alternative to objects/array watchers
If you have a group of related properties like ie a person (name, surname, age), you could define it like plain properties, and use $watchGroup(), that works on the same way like a common $watch() but taking a list of properties to watch rather than one.
add a comment |
Talking only about performance, I think option 1 (having plain variables) it's more efficient.
Watching plain properties
the $watch() function, by default only checks object reference equality. So within each $digest it will check to see if the new and old values pointing to the same object.
Watching objects and arrays
If you want to $watch() an object, you have to switch to the deep watch and that means that within each $digest, it will check the whole tree to see if the structure or values are changed. So, bigger the object, more expensive the check.
$watchGroup(), an alternative to objects/array watchers
If you have a group of related properties like ie a person (name, surname, age), you could define it like plain properties, and use $watchGroup(), that works on the same way like a common $watch() but taking a list of properties to watch rather than one.
add a comment |
Talking only about performance, I think option 1 (having plain variables) it's more efficient.
Watching plain properties
the $watch() function, by default only checks object reference equality. So within each $digest it will check to see if the new and old values pointing to the same object.
Watching objects and arrays
If you want to $watch() an object, you have to switch to the deep watch and that means that within each $digest, it will check the whole tree to see if the structure or values are changed. So, bigger the object, more expensive the check.
$watchGroup(), an alternative to objects/array watchers
If you have a group of related properties like ie a person (name, surname, age), you could define it like plain properties, and use $watchGroup(), that works on the same way like a common $watch() but taking a list of properties to watch rather than one.
Talking only about performance, I think option 1 (having plain variables) it's more efficient.
Watching plain properties
the $watch() function, by default only checks object reference equality. So within each $digest it will check to see if the new and old values pointing to the same object.
Watching objects and arrays
If you want to $watch() an object, you have to switch to the deep watch and that means that within each $digest, it will check the whole tree to see if the structure or values are changed. So, bigger the object, more expensive the check.
$watchGroup(), an alternative to objects/array watchers
If you have a group of related properties like ie a person (name, surname, age), you could define it like plain properties, and use $watchGroup(), that works on the same way like a common $watch() but taking a list of properties to watch rather than one.
answered Nov 22 at 20:28
DobleL
1,474513
1,474513
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387118%2fangularjs-which-scope-is-better-performance-wise-object-key-or-some-variable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
This may help: stackoverflow.com/questions/18128323/…
– Rameez Raja
Nov 20 at 8:10
1
@RameezRaja The answer there is true for readability and code structure management, but performance is another issue
– CertainPerformance
Nov 20 at 8:41
Yes, my concern is about the performance.
– R J
Nov 20 at 10:54
1
Whether a watcher is watching a property of $scope or a property of a scope object, it is still performing a watch function. The watch count will be the same. The name of the item being watched is only parsed once, when it is added the watch list. Look elsewhere to improve performance.
– georgeawg
Nov 20 at 12:33
1
check this out stackoverflow.com/questions/8789969/…
– holydragon
Nov 28 at 9:09