Knockoutjs在Internet Explorer中运行速度极慢

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.