可观察 vs 渲染方法 jsviews

Question

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

我尝试使用 $.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 数组，所以 newBets 的全部内容=14=] 块将完全重新渲染和重新链接 - 这将与原始渲染一样慢。

如果对数组的更改是增量的，并且可以表示为一个或多个insert or remove operations, then that will allow JsViews to know that only the added/removed/moved items should be re-rendered, and it will be much faster. Move 操作已在最近的更新中进行了优化。

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

要对数组进行更复杂的更改，您可以使用compiled View Models, and use the merge() feature. Since a recent update (78) the merge() operation has been optimized, and is usually much faster (including for arrays) provided you define identity, by a primary key field or similar. See http://www.jsviews.com/#jsvviewmodelsapi@mergeadvsample。

可观察 vs 渲染方法 jsviews

observable vs render methods jsviews

javascript

optimization

templates

jsrender

jsviews