Knockoutjs 在 Internet Explorer 中运行极慢

Question

简述: 我有一个包含KO代码的页面，在Google Chrome、Firefox、Safari等浏览器中运行非常顺畅，但在Internet Explorer中性能下降。我尝试了IE10、IE11，渲染大约150行需要10到25秒的时间。

细节: 该页面代表用户的工作队列，显示他们的任务。要求不在该页面使用任何分页。表格的每一行至少有十几种变体来显示（链接、按钮、输入框、CSS样式、处理用户事件、自定义JS插件等）。生产环境中平均每页100-200+行。用户可以应用不同的过滤和排序。

我已经尝试过的事情:

• 减少计算属性的数量（在可能的情况下改为使用pureComputed）

• 减少使用template、if和ifnot绑定的次数（根据分析，它们是最耗时的任务）- 在可能的情况下使用visible绑定。

• 尝试使用knockout-fast-foreach自定义绑定（https://github.com/brianmhunt/knockout-fast-foreach）

• 使用IE和Chrome工具对代码进行分析以消除内存泄漏

• 使用ko.bindingReport.js对代码进行分析（https://gist.github.com/kamranayub/65399fa247a6c182bc65）

这些方法（根据 ko.bindingReport.js）在 Chrome 中使代码优化了近两倍。但是 IE 仍然太慢了 - 大约需要 10 秒才能呈现页面。 Chrome: Internet Explorer：

大家有什么想法吗？

- godspeed

---

你使用的 KO 版本是哪个？ - Rango

@Jeroen，我明白了。但是我发现一个问题 - IE在基本的更新DOM操作上速度很慢。我已经尽量减少计算值的数量，以减少绑定的更新函数调用。我在应用程序方面找不到其他瓶颈。所以，我不确定哪些代码示例会有所帮助。 :( - godspeed

@Jeroen，无论如何 - 谢谢。 - godspeed

任何能够重现问题的简短代码示例都足够了。它不必执行任何有意义的操作，只要它在没有异常的情况下运行即可。只需不断删除应用程序代码，直到剩下一个简短的片段为止。 （我意识到这通常是调试中最难的部分，但除了猜测解决方案外，真正需要的可能是一个可重现的示例...）。无论如何：祝你好运追踪它！ - Jeroen

@godspeed - 众所周知，IE11在兼容模式（IE7仿真）下渲染表格非常缓慢，并且没有DTD（文档类型声明）...使用IE的开发工具（F12）上的仿真选项卡来确定您的开发环境正在假定哪个仿真模式（也称为文档模式）...它还会告诉您如何建立。例如，x-ua元数据、MS兼容性列表、内部网站、EMSL。文件>属性对话框将告诉您您的开发环境映射到哪个IE安全区域...（预期的是Internet，可能是Intranet）。 - Rob Parsons

Answer 1

"表格绑定提供了一种使用 Knockout 快速显示数据表格的方法。相比于嵌套的 foreach 绑定，表格绑定大约快十倍。"

"这声称是快10倍的。https://github.com/mbest/knockout-table"

- idlehands23

---

非常感谢@idlehands23！目前问题的解决方案是我们决定在用户滚动页面时动态渲染行的部分。这解决了问题。下次我会尝试使用knockout-table！ - godspeed

Answer 2

你减少了计算可观察对象的数量，但你也减少了可观察对象的数量吗？我没有看到很多可编辑字段。那些在页面上没有被编辑的可能不需要成为可观察对象？这已经多次提高了我的性能。

- Yan