Question

存在：2500个数组对象项。渲染方法花费了1347.783ms

我尝试使用$ .observable（array）.refresh（）方法优化计时，它需要：3382.213ms

更新视图的最佳方法是什么？我以为refresh（）方法只会影响那些不太多的可变项。

模板：

＆＃13;

<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>

＆＃13;

Answer 1

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

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

请参阅http://www.jsviews.com/#arrchange

对于数组的更复杂更改，您可以使用compiled View Models，并使用merge()功能。自最近的更新（78）以来，merge（）操作已经过优化，并且通常更快（包括数组），只要您通过主键字段或类似字段定义标识。请参阅http://www.jsviews.com/#jsvviewmodelsapi@mergeadvsample。

可观察vs渲染方法jsviews

1 个答案: