Ember.js 在 IE 7 中渲染缓慢答案

【问题标题】：Ember.js rendering slow in IE 7Ember.js 在 IE 7 中渲染缓慢
【发布时间】：2024-01-13 20:21:02
【问题描述】：

我们使用 EmberJS（版本 1.0.0-rc5）创建了一个 Web 应用程序。我们注意到 Chrome 的出色性能，遗憾的是我们必须支持 Internet Explorer 7 作为我们的主要平台。

我们注意到在 IE7 上的性能很糟糕。在调查了这个问题之后，归结为模板的渲染（尽管路由也非常慢）。我们不知道这是由于我们构建应用程序的方式有误，还是因为 Ember 的问题。

我创建了一个小型示例应用程序来重现该问题。您可以在http://manoswerts.be/playground/ember-performance 找到它。它渲染了一棵类似于我们在应用程序中所做的树。在 Chrome 中运行它时，结果会立即显示。在 IE7 中，渲染需要 30 秒到一分钟。在 IE8 中“仅”需要 7 秒。

有人熟悉这个吗？这个问题有解决办法吗？

非常感谢任何帮助。

【问题讨论】：

我不知道 Ember 是如何工作的，但看起来您正在为每个 li 元素添加一个事件侦听器。这是自愿的吗？不能使用事件委托吗？
恕我直言，“我们必须支持 IE7”有多强烈。这是因为您的用户实际上仍然停留在 IE7 上，还是仅仅因为有人决定将其指定为支持的基线？我的观点是，在过去的 12 个月里，IE7 的使用率已经一落千丈。几乎没有人还在使用它；当然不是自愿的。如果可能的话，我的建议是放弃对 IE7 的支持，因为是的，它确实很糟糕，是的，它的性能确实很糟糕。但最重要的是因为您将完成所有工作，而没有人会真正在 IE7 中使用它。真是浪费。
好吧，不管 IE7 支持如何，这都是一个问题，因为在 chrome 上渲染 80 个项目需要 200 毫秒，还是只有我一个人？ Core i5 在这里。
如果这有帮助。我在 IE8 中运行它只用了不到 2 秒。然后在 IE7（在 browserstack 上）运行它，花了 20 秒。
@Florian 我不知道这是否在我们的控制范围内。我可以检查一下。 @Spudley 我同意 IE7 是一个糟糕的浏览器这一事实。但是我们在这里真的没有选择。我们正在为其构建它的整个公司都在 IE7 上，他们不打算很快升级。 @ jessegavin 尽管我也在 Browserstack 和虚拟机上进行了测试，但您的测试似乎有更好的性能。尽管如此，这些数字仍然是不可接受的。

标签： javascript performance internet-explorer ember.js internet-explorer-7

【解决方案1】：

尝试添加以下内容以获取有关花费这么长时间的更多详细信息：

Ember.subscribe('render', {
  before: function(name, start, payload){
    return start;
  },
  after: function(name, end, payload, start){
    var duration = Math.round(end - start);
    var template = payload.template || '';
    //console.log(Ember.inspect(payload));
    //var title;
    var view = payload.object.toString();
    console.log('rendered', template, view, 'took', duration, 'ms');
  }
});

这将为您提供每个渲染视图的时间。当我在 Chrome 中运行您的示例时，每个人模板需要大约 2 毫秒来呈现。还有一些与嵌套的 {{each}} 助手和渲染这些 {{each}} 块中的“虚拟”视图相关的开销。列表渲染时间总共为 104 毫秒。该总时间将是您点击Show results 按钮后写入的最后一个console.log 行。

因此，根据您所说的，我预计 ie7 和 ie8 的总时间会慢一个数量级。如果是这种情况，想知道是均匀分布还是存在渲染速度慢得多的特定视图。

【讨论】：

感谢您的提示。我会试试这个，看看输出是否能启发我。我忘了提到在原生 Handlebars（不是通过 Ember）中渲染嵌套的 {{each}} 块似乎非常快。最重要的是，视图还增加了开销，使其无法接受。我会及时通知你测试结果。
快速更新：我们突然获得了使用 IE 8 作为目标浏览器的绿灯。所以目前这对我们来说不再是问题。不过，我会在业余时间尝试给@Mike Grassotti 他的调查方法。

【解决方案2】：

对于 IE7 和 IE8，我需要相同的时间，大约 4-5 秒。

其他 ember js 示例应用程序

https://github.com/dgeb/ember_data_example

在 IE7 上根本无法使用。

【讨论】：