淘汰组件或模板的性能提升

本文介绍了淘汰组件或模板的性能提升的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个可观察的阵列.对于每个数组元素，我都会生成一些html形式，非常扩展，因为可观察数组项是具有可观察对象的大对象，依次是:

I have an observable array. For every array element I generate some html form, very extended, as the observable array items are large objects with observables in turn:

var records = ko.observableArray([ { p1: ko.observable("initProp1"), p2: ko.observable("initProp2"), // and so on pN: ko.observable("initPropN") }, //... ]);

html可以是大型的，复杂的和动态的，并且会根据某些属性本身进行更改:要实现此目的，我使用了ko:if绑定，这在计算上是很昂贵的( www.knockmeout/2012/03/knockoutjs-performance-gotcha- 1ifwith.html )，特别是对于有条件呈现的大型html.性能开始受到影响，尤其是在IE上.

The html can be large, complex and dynamic, changing on the basis of some of the properties themselves: to achieve this I make use of ko:if bindings, which are known to be expensive computationally speaking (www.knockmeout/2012/03/knockoutjs-performance-gotcha-1ifwith.html), especially for large html conditionally rendered. Performance is starting suffering, especially on IEs.

注意到重复的，即使是动态的结构，我正在考虑直接在html中使用绑定数据的模板或组件.对于每种动态配置，我都会使用不同的模板/组件.

Noted the repetitive, even if dynamic, structure, I am thinking about use templates or components intead of binding data directly in the html. I would use different templates/components for each dynamic configuration.

通常来说，使用组件或模板可以提高性能，或者Ko在内部完全可以像我不使用它们那样做吗?渲染模板和组件之间在性能上有区别吗?

Generally speaking, can be possible that using components, or templates, will give a performance gain, or internally Ko does exactly as I would do without using them? And there is difference in performance between rendering templates and components?

否则，我正在考虑通过JQuery生成每条记录的HTML，然后使用ko.applyBindingsToNode()动态绑定可观察对象-这样可以提高性能吗?

Otherwise, I am considering generating HTML via JQuery every record, and then dynamically bind observables with ko.applyBindingsToNode() - could this provide performance gains?

我做了一些(简化的)测试，但是我需要对该问题进行一些跨浏览器的通用评估.根据我使用的浏览器甚至我的数据集，测试似乎不一致，而且无论如何都不能正确反映我的复杂性.直接在应用程序上进行测试将意味着太多的工作，可能是无用的，而我却负担不起，因此，一般性的指导原则对于至少暗示使用哪种解决方案用于实际实现和测试非常有价值.

I did some (reduced) tests, but I need some cross-browser generic evaluation of the problem. Tests seem to be discordant depending on which browser I use and even on my dataSet, and anyway do not reflect properly the complexity I have. Testing directly on the application would mean too much work, possibly useless, which I can't afford, so general guidelines would be precious to have at least an hint on which solution to use for real-life implementation and test.

推荐答案

我制作了一个小提琴版本，它使用组件来提供输入字段.所使用的组件被命名为"my-"，加上任何type字段(这是将我的组件与input和select标记区分开的必要条件).我不知道它的执行效果如何，但是它很简单，您应该可以进行一些测试并查看.

I made a version of your fiddle that uses components to supply the input fields. The component used is named 'my-' plus whatever the type field is (this was necessary to distinguish my components from input and select tags). I don't know how well this will perform, but it's simple enough that you should be able to do some testing and see.

koponents.register('my-input', { viewModel: InputModel, template: { element: 'input-template' } }); koponents.register('my-select', { viewModel: InputModel, template: { element: 'select-template' } }); koponents.register('my-mu', { viewModel: InputModel, template: { element: 'mu-template' } }); function InputModel(params) { return params; } function Model() { records = ko.observableArray([ [{ type: "input", id: "Date", size: "100px", value: ko.observable() }, { type: "select", id: "Weather", size: "100px", value: ko.observable(), options: [{ optId: "w1", optTxt: "Cloudy" }, { optId: "w2", optTxt: "Sunny" }, { optId: "w3", optTxt: "Rainy" }, { optId: "w4", optTxt: "Snowy" }, { optId: "w5", optTxt: "Foggy" }] }, { type: "input", id: "Lat", size: "80px", value: ko.observable() }, { type: "input", id: "Long", size: "80px", value: ko.observable() }], [{ type: "input", id: "Date", size: "100px", value: ko.observable() }, { type: "select", id: "Temperature", size: "120px", value: ko.observable(), options: [{ optId: "t0", optTxt: "<-10" }, { optId: "t1", optTxt: "]-10 : 0]" }, { optId: "t2", optTxt: "]0 : 20]" }, { optId: "t3", optTxt: "]20 : 40]" }, { optId: "t4", optTxt: ">40" }] }, { type: "select", id: "Wind", size: "70px", value: ko.observable(), options: [{ optId: "wind1", optTxt: "Strong" }, { optId: "wind2", optTxt: "Weak" }] }], [{ type: "input", id: "Date", size: "100px", value: ko.observable() }, { type: "select", id: "Weather", size: "100px", value: ko.observable(), options: [{ optId: "w1", optTxt: "Cloudy" }, { optId: "w2", optTxt: "Sunny" }, { optId: "w3", optTxt: "Rainy" }, { optId: "w4", optTxt: "Snowy" }, { optId: "w5", optTxt: "Foggy" }] }, { type: "input", id: "Lat", size: "80px", value: ko.observable() }, { type: "input", id: "Long", size: "80px", value: ko.observable() }], [{ type: "input", id: "Date", size: "100px", value: ko.observable() }, { type: "select", id: "Temperature", size: "120px", value: ko.observable(), options: [{ optId: "t0", optTxt: "<-10" }, { optId: "t1", optTxt: "]-10 : 0]" }, { optId: "t2", optTxt: "]0 : 20]" }, { optId: "t3", optTxt: "]20 : 40]" }, { optId: "t4", optTxt: ">40" }] }, { type: "input", id: "Humidity", size: "70px", value: ko.observable(), options: [{ optId: "wind1", optTxt: "Strong" }, { optId: "wind2", optTxt: "Weak" }] }, { type: "mu", id: null, value: '%' } ] ]); } var myModel = new Model(); ko.applyBindings(myModel);

<script src="cdnjs.cloudflare/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <template id="select-template"> <select data-bind="style: {width: size}, value: value, options: options, optionsText: 'optTxt', optionsValue: 'optId'"></select> </template> <template id="input-template"> <input type="text" data-bind="style: {width: size}, value: value" /> </template> <template id="mu-template"> <span data-bind="text: value"></span> </template> <div data-bind="foreach: records"> <div data-bind="foreach: $data"> <label data-bind="text: id"></label> <!-- ko component:{name:'my-'+type, params:$data} --> <!-- /ko --> </div> </div>