可观察 vs 渲染方法 jsviews

Question

存在：2500 个数组对象项。 渲染方法耗时 1347.783ms

我尝试使用 $.observable(array).refresh() 方法优化时间，它需要：3382.213ms

更新视图的最佳方式是什么？我认为 refresh() 方法只影响不大的可变项目。

模板：

<script id="betTMPL" type="text/x-jsrender">
<div class="bet_group">
    <div class="bet-title {{if hideGroup}}min{{/if}}" id="group_{{:groupID}}" data-gid="{{:groupID}}" data-gameid="{{:gameID}}">
        <div class="groupName">{^{:groupName}}
            <span id="kolG_{{:groupID}}" {{if !hideGroup}}style="display: none;"{{/if}}> ({{:betsLen}})</span>
            {^{if allowMyMarkets}}
                {^{if actionMyMarket}}
                    <span class="addToMarket" title="<?=__('Add')?>"></span>
                {{else}}
                    <span class="addToMarket active" title="<?=__('Del')?>"></span>
                {{/if}}
            {{/if}}
        </div>
    </div>
    <div class="bets" {{if hideGroup}}style="display: none"{{/if}}>
        {^{for bets ~cols=cols ~mainGame=mainGame ~idd=idd ~gameID=gameID ~groupID=groupID}}

            {{if !(#getIndex() % (~cols))}}
                {{if #getIndex() != 0}}
                    </div>
                {{/if}}
                <div>
            {{/if}}

            {^{if #data}}
                <div id="z_{{:T}}">
                    <span class="bet_type {{:spanBetClass}}">{^{:betName}}
                        <span class="koeff {{:classLight}}"
                                {{if ~mainGame}}mainGame="{{:~mainGame}}"{{/if}}
                                {{if DopName}}dopName="{{:DopName}}"{{/if}}
                                bl="{{:B}}"
                                u="{{:~idd}}"
                                idgamecfg="{{:~gameID}}"
                                v="{{:sobID}}"
                                g="{{:~groupID}}"
                                d="{{:P}}"
                                dn="upcoming_events"
                                pl="{{:Pl.Id}}"
                                data-type="{{:T}}"
                                data-coef="{{:C}}"
                                id="b_{{:newID}}"><i>{^{:CV}}</i></span>
                    </span>
                </div>
            {{else}}
                <div>&nbsp</div>
            {{/if}}

            {{if #getIndex() == #get("array").data.length - 1}}
                </div>
            {{/if}}
        {{/for}}
    </div>
</div>
</script>

Answer 1

如果您有 {^{for bets ...}}...{{/for}} 并调用 $.observable(bets).refresh(newBets)，那么您将用新的 newBets 数组替换整个 bets 数组，因此该 {{for}} 块的全部内容将被完全重新渲染并重新链接 - 这将与原始渲染一样慢。

如果对数组的更改是增量的，并且可以表示为一个或多个insert 或remove 操作，那么这将允许 JsViews 知道只有添加/删除/移动的项目应该重新-渲染，它会更快。 Move 操作在最近的更新中得到了优化。

见http://www.jsviews.com/#arrchange

要对数组进行更复杂的更改，您可以使用compiled View Models，并使用merge() 功能。由于最近的更新 (78)，merge() 操作已经过优化，如果您通过主键字段或类似字段定义身份，通常更快（包括数组）。见http://www.jsviews.com/#jsvviewmodelsapi@mergeadvsample。