Ember JS - 提高选择视图的性能答案

【问题标题】：Ember JS - Improving Performance of Select ViewEmber JS - 提高选择视图的性能
【发布时间】：2015-06-02 09:57:10
【问题描述】：

我有一个选择框，其中包含 350-400 <option> 元素的列表。元素数据通过 ajax 加载。加载正常。

但是当我 ember 尝试创建列表时。浏览器因 RAM 高而挂起，CPU 使用最终无响应的脚本错误显示在浏览器中。给它足够的时间渲染。

ember 似乎也没有真正缓存渲染的元素，因为每次我回到同一页面时，问题都会重复。

那么，有什么办法可以提高视图select 的性能？

选择视图的示例代码：

{{view "select" prompt="-- select --" content=controllers.application.companies
            optionValuePath="content.id" optionLabelPath="content.name_abbr"
            classNames="form-control" value=dailyId}}

我知道其中一种选择是使用文本框的预输入脚本。但我现在想将其保存为 B 计划。

【问题讨论】：

我之前已经通过创建一个扩展它的组件来处理这个问题，但是我摆脱了模板和所有东西，并实现了render 方法，“用我自己的双手”构建 html 类型的东西.用大约 500 个选项在 40 毫秒内完成。我不知道该代码保存在哪里（用 select2 代替了我的），但我会尝试在此处查找并链接。
我的建议基于过去的经验：避免 Ember 的 select 视图。它很慢，很笨重，而且已经过时了。只需编写您自己的组件，这将是非常值得的。
谢谢大家！我将尝试编写一个组件，看看它是如何执行的。 @MilkyWayJoe 也会关注这个 Q 以获得您的进一步回复
Ember.Select view rendering performance 的可能重复项
相关票证github.com/emberjs/ember.js/issues/5259

标签： javascript ember.js

【解决方案1】：

警告：根据this 博客条目，该解决方案自 Ember 2.0 起将被弃用：

移除

....

在视图中手动将字符串渲染到缓冲区中

我想我没有给你答案，而且我没有回到这个问题，因为我找不到我前一段时间所做的完整实现。它本质上是当前选择组件的副本，除了，就像我说的，我已经实现了render 方法。类似this:

App.CustomSelectComponent = Em.Component.extend({
  
  tagName: 'select',
  
  optionValuePath: '',
  
  optionLabelPath: '',
  
  content: [],
  
  render: function(buffer) {
    var selfie = this,
        options = this.get('content'),
        idPath = this.get('optionValuePath'),
        valPath = this.get('optionLabelPath');
    
    options.forEach(function(option) {  
      buffer.push('<option value=\'' +  option[idPath.replace(/^content\.?/, '')] + '\'>');
      buffer.push(option[valPath.replace(/^content\.?/, '')]);
      buffer.push('</option>');
    });
  }
});

这不是我之前的实现，如果您花几秒钟的时间查看它，您会发现此解决方案存在一些问题，然而，@987654326 @ implementation 是您可能想要研究的。

按原样执行，我已经可以获得更好的性能。在 jsbin 上，我为 Ember.Select 和示例自定义选择添加了一小部分记录：

但同样，这个实现缺少几个特性，可能不足以回答这个问题。几分钟前我刚刚这样做是为了说明您是否会开始在您的组件中实现render 以及如何实现。

抱歉，如果这不是您想要的答案。

【讨论】：