Business Console 10.7 | webMethods Business Console Documentation | Developing Gadgets for Business Console | Improving Gadget Performance | Techniques for Improving Gadget Performance
 
Techniques for Improving Gadget Performance
Paginating
Ensure that all RESTful services that return huge data sets are well paginated on the server side. For example, if you are trying to load a grid with 1000 records, paginate 10-20 records at a time. You can have grid control, and lazy load data sets as and when users scroll through the grid. This will ensure that less data is processed by the user interface, and will improve performance.
Minimizing the use of watchers
AngularJS scans and keeps track of all the changes in the application. This means that every watcher is monitored for update requests (digest cycle). If one of the watchers relies on another watcher, AngularJS re-runs the digest cycle to make sure that all of the changes are propagated. Digest cycle runs continuously until all the watchers are updated and the application is stabilized. Even though JavaScript execution is really fast in modern browsers, if you add too many watchers in AngularJS, your gadget might slow down. Although it is impossible to avoid watchers, minimizing watchers will definitely help performance.
For example, when use bind once where possible watchers are set, AngularJS adds the :: notation to allow one time binding. AngularJS will wait for a value to stabilize after the first series of digest cycles, and will use that value to render the DOM element. After that, AngularJS will remove the watcher and forget about that binding. You can use this to bind constant values which do not change throughout the application.
$scope.$watch
{{ }} type bindings
Most directives (i.e. ng-show)
Scope variables scope: { bar: '='}
Filters {{ value | myFilter }}
ng-repeat
Using ng-if
Use ng-if instead of ng-show wherever possible. ng-show will add the display:none style to your HTML code depending on the condition. So your HTML will always be part of the DOM even if it is hidden. ng-if will not add the HTML code to your DOM if the condition is not satisfied, thus minimizing the size of the DOM object. Make sure that your use case is satisfied by ng-if.