6

テンプレートを使用して簡単なマークアップを作成しようとしています。何かのようなもの：

<div class="list" data-bind="template: {name: 'mytemplate', data: someData}"></div>

<script id="mytemplate">
  <div class="item" data-bind="text: someText"></div>
</script>

非常にうまく機能しますが、このテンプレートで多くの div をレンダリングする必要がある場合、非常に遅くなります。各 div を作成した後のノックアウトは、それをドキュメントに追加します。しかし、私がこのようなことをすると：

el = document.createElement("div");
applyBindings(myModel, el);

(div.list).innerHTML = el.innerHTML

はるかに高速に動作しますが、不便です。

ノックアウトには、要素のグループを作成し、その後このグループをドキュメントに追加するための機能が組み込まれているのでしょうか?

4

2 に答える 2

6

追加した DIV ごとに KO が DOM を操作しているようです。DOM トラバーサルはコストが高く、ページのレンダリングが遅くなります。これについては、KO Github で未解決の問題があります: https://github.com/SteveSanderson/knockout/issues/248

私の意見では、Knockout は現在、大規模な foreach データ セットを処理するタスクに対応していません。Chrome でのパフォーマンスはまずまずですが (Chrome は素晴らしいため)、Internet Explorer ではかなり悪い (古い IE ではさらに悪い): http://jsfiddle.net/StarcounterJack/FgSCw/

Knockout を使用する代わりに、手動のアプローチを試してください。最初にメモリ内に DIV を作成し、それらを一度に DOM に挿入します。これは、document.createElement() を使用した 2 番目の例で行っていることです。jQuery を使用すると、次のことができます。

var newDiv = $("<div>my new div</div>");
var newDiv2 = $("<div>my new div2</div>");
newDiv.append(newDiv2);
$('body').append(newDiv); //only this last step traverses the DOM

テンプレートには、Mustache.js を使用し、John Resig の<head><script type="text/templates"> テンプレート インクルード トリックを使用してテンプレートを読み込み、独自の JavaScript を使用して手動でレンダリングを処理することを好みます。要素のレンダリング方法をより詳細に制御できるため、現在発生しているようなパフォーマンスの問題が発生した場合は、さまざまなアプローチを試すことができます。

于 2012-08-01T17:52:42.443 に答える
3

現時点での最善の解決策は、私のknockout-fast-foreach pluginかもしれません。

他の機能の中でもO(1)、挿入と削除があり、特に高速になります (つまり、自分で簡単に実行できるよりも高速です)。

KO 3.5 (または 3.6) で現在の foreach バインディングを置き換えることは有力な候補です。

于 2015-11-20T16:19:33.447 に答える