Knockoutjs operates extremely slow in Internet Exp

Question

In brief: I've got a page with KO-code that operates absolutely cool in Google Chrome, Firefox, Safari, etc. But the performance is gone in Internet Explorer. I tried IE10, IE11. It takes from 10 to 25 seconds to render about 150 rows.

Details: There page represents a work queue for users, where their tasks are shown. The requirement is not to use any paging on that page. Each row of the table has at least a dozen of variants to display (links, buttons, inputs, css styling, handling user events, custom js plugins, etc.). The average number of rows on prod is 100-200+. User is able to apply different filters and sortings.

Things I've already tried:

• reduced the number of computed properties (changed to pureComputed, where possible)

• reduced the number of using the template, if and ifnot bindings (according to profiler they are the most time consuming task) - I use the visible, where possible

• tried to use the knockout-fast-foreach custom binding (https://github.com/brianmhunt/knockout-fast-foreach)

• profiled the code with IE and Chrome tools to eliminate the memory leaks

• profiled the code with ko.bindingReport.js (https://gist.github.com/kamranayub/65399fa247a6c182bc65)

The approaches specifed above tuned the code (according to ko.bindingReport.js) almost two times faster in Chrome. But IE is still too slow - about 10 seconds for rendering.

Chrome:

Internet Explorer:

Folks, any ideas?

Answer 1

"The table binding provides a fast method for displaying tables of data using Knockout. table is about ten times faster than nested foreach bindings."

This claims to be 10x faster. https://github.com/mbest/knockout-table

Answer 2

You reduced the amount of computed observables, but did you also reduce the amount of observables? I'm not seeing a lof of editable fields. The ones that are not being edited on the page probably don't need to be an observable? This has boosted my performance quite a lot of times.