javascript - Performance issue with lots of knockout nested writeable computeds -

i have knockout application have hierarchy of writeable computed observables below:

function invoicevm() {    self.isselected = ko.observable()    self.selectedamount = ko.computed(function() {        if (self.isselected())             return self.usdbalance;         else             return 0;    } } function companyvm() {      self.invoices = ko.observablearray()      self.totalselectedamount = ko.computed(function () {         var total = 0;         (var = 0; < self.invoices().length; i++) {             total += self.invoices()[i].selectedamount();         }         return total;     });       self.isselected = ko.computed({         read: function () {             var isselected = true;             (var = 0; < self.invoices().length; i++) {                 if (!self.invoices()[i].isselected())                     isselected = false;             }             return isselected;         },         write: function (value) {             (var = 0; < self.invoices().length; i++)                 self.invoices()[i].isselected(value);         },         deferevaluation: true,         owner: self     }) } function parentvm() {     self.companies = ko.observablearray()     self.isselected = ko.computed({         read: function () {             var isselected = true;             (var = 0; < self.funds().length; i++) {                 if (!self.companies()[i].isselected()) {                     isselected = false;                     break;                 }             }             return isselected;         },         write: function (value) {             (var = 0; < self.companies().length; i++) {                 var currentcompany = self.companies()[i];                 (var j = 0; j < currentcompany.invoices().length; j++)                     currentcompany.invoices()[j].isselected(value);             }          },          deferevaluation: true     }); } 

the problem when parentvm selected (via checkbox) takes 30-40 seconds render checkboxes , update total amounts. there 4500 invoices , 274 companies (but companies being shown, invoices hidden using display:none). have tried rate limiting observables, using deferred updates plugin, both , without deferevaluation option, manually selecting checkboxes via jquery (which didn't work 2 way binding). have suggestions on speeding process up? in advance help!

i noticed few things:

• in writes isselected, since updating values dependencies of read function, triggering computed on , on while updating each isselected. can use throttle (or ratelimit in 3.1) extender ensure read function doesn't keep getting called.

• in read functions, can quit find false value. not need loop through of values in case.

• the totalselectedamount getting re-computed when each isselected gets updated. 1 throttle / ratelimit well.

with said, still lot of data update synchronously. might worthwhile updating isselected each company (or chunk of companies) in settimeout ensure browser not frozen during entire processing.

here sample includes many of these changes: http://jsfiddle.net/rniemeyer/k4vj8/ . might @ updating chunk of companies on each settimeout rather 1 @ time.