在客户端模板引擎（Rivets.js）中渲染速度较慢

我渲染了大约1000个对象的数组。 html绑定非常重（见下文）。这需要大约5秒到rivets.bind()。在客户端模板引擎（Rivets.js）中渲染速度较慢

有关提高性能的任何建议？我不认为我可以负担大块地绑定，因为我正在使用分页/排序库结合，需要整个数组来排序/分页。

这里是我的HTML为每个对象（曲目）：

<div rv-each-track="tracks" class="track-row row has-hover" rv-download-url="track.direct_path.download_path" rv-api-key="track.track.apikey" rv-media-url="track.direct_path.audio" rv-track-title="track.track.name" rv-wave-data="track.direct_path.wave_default" rv-wave-progress-data="track.direct_path.wave_progress"> 
<div class="mobile-margin"> 
    <div class="track-hover desktop-only"> 
     <div class="hover-play icon-play inline-play"></div> 
     <div class="hover-title"><a href="#" class="track-link">{track.track.name}</a><span rv-class="track.track.staff_pick | staffPickClass" data-toggle="tooltip" data-original-title="Staff Pick"></span></div> 
     <div class="hover-links"> 
      <div class="item hamburger holds-tooltip main-hover-item icon-hamburger" data-toggle="tooltip" data-original-title="Alternate Versions"></div> 
      <div class="item share main-hover-item popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div> 
      <div class="item playlist icon-playlist-add popover-button holds-tooltip main-hover-item" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist"></div> 
      <div class="item download icon-download holds-tooltip main-hover-item" data-toggle="tooltip" data-original-title="Download Track"></div> 
      <div class="item cart last icon-cart-plus holds-tooltip main-hover-item popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div> 
      <div class="item remove last icon-x holds-tooltip main-hover-item" data-toggle="tooltip" data-original-title="Remove Track" rv-data-delete-track-id="track.track.apikey"></div> 
      <div class="clearfix"></div> 
     </div> 
     <div class="clearfix"></div> 
     <div class="track-variations"> 
      <div rv-each-variation="track.variations.tracks" class="row variation-row" rv-data-track-id="track.track.apikey" rv-api-key="variation.track.apikey" rv-media-url="variation.direct_path.audio" rv-track-title="variation.track.name" rv-wave-data="variation.direct_path.wave_default" rv-wave-progress-data="variation.direct_path.wave_progress"> 
       <div class="col-md-8 variation-title">{variation.track.name}</div> 
       <div class="col-md-2 variation-length">{variation.track.tracklength}</div> 
       <div class="track-hover variation"> 
        <div class="hover-play icon-play inline-play"></div> 
        <div class="hover-title"><a class="track-link">{variation.track.name}</a></div> 
        <div class="hover-links"> 
         <div class="item share popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div> 
         <div class="item playlist popover-button icon-playlist-add" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist" data-placement="left"></div> 
         <div class="item download icon-download" rv-data-media-url="track.direct_path.download_path" data-toggle="tooltip" data-original-title="Download Track" data-placement="left"></div> 
         <div class="item cart last icon-cart-plus holds-tooltip popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div> 
         <div class="item last remove main-hover-item icon-x"></div> 
         <div class="clearfix"></div> 
        </div> 
        <div class="clearfix"></div> 
       </div> 
      </div> 
      <div class="no-variations" rv-hide="track.variations.tracks | shouldHideNoVariations">There are no alternate versions of this track.</div> 
     </div> 
    </div> 
    <div class="col-md-4 first-title desktop-only"><a class="offset-left track-title-link track-link" href="">{track.track.name}</a><span rv-class="track.track.staff_pick | staffPickClass" data-toggle="tooltip" data-original-title="Staff Pick"></span></span></div> 
    <div class="col-md-3 genre desktop-only"><span class="offset-left">{track.genre}</span></div> 
    <div class="col-md-2 mood desktop-only"><span class="offset-left">{track.mood}</span></div> 
    <div class="col-md-2 canvas desktop-only"><div class="mini-wave offset-left" rv-style-background-image="track.direct_path.wave_canvas"></div></div> 
    <div class="col-md-1 last-title duration desktop-only"><span>{track.track.tracklength}</span></div> 
    <div class="col-md-1 last-title last-played pull-right desktop-only">{track.lastPlayed}</div> 

    <div class="mobile-play icon-play pull-left mobile-only inline-play"></div> 
    <div class="mobile-track-title mobile-only track-row-item-margin"><div class="track-title-link">{track.track.name}</div><span rv-class="track.track.staff_pick | staffPickClass"></span></div> 
    <div class="mobile-track-buttons pull-right"> 
     <div class="pull-right mobile-only mobile-button mobile-track-menu-button left-margin icon-plus"></div> 
     <div class="pull-right mobile-only mobile-button mobile-variations-button icon-hamburger"></div> 
    </div> 

    <div class="is-staff-pick hidden">{track.track.staff_pick | staffPickValue}</div> 
    <div class="instrument hidden">{track.instrument}</div> 
    <div class="industry hidden">{track.industry}</div> 
    <div class="tempo hidden">{track.tempo}</div> 
    <div class="aggregated-terms hidden">{track.tag_list} {track.track.name}</div> 
    <div class="date-last-played hidden">{track.dateLastPlayed}</div> 
    <div class="clearfix"></div> 
</div> 
<div class="track-variations mobile-only"> 
    <div rv-each-variation="track.variations.tracks" class="row variation-row" rv-api-key="track.track.apikey" rv-media-url="variation.direct_path.audio" rv-track-title="variation.track.name"> 
     <div class="mobile-margin"> 
      <div class="col-md-8 variation-title desktop-only">{variation.track.name}</div> 
      <div class="col-md-2 variation-length desktop-only">{variation.track.tracklength}</div> 
      <div class="track-hover variation"> 
       <div class="hover-play icon-play inline-play"></div> 
       <div class="hover-title"><a href="" class="track-link">{variation.track.name}</a></div> 
       <div class="hover-links"> 
        <div class="item share popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div> 
        <div class="item playlist popover-button icon-playlist-add" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist" data-placement="left"></div> 
        <div class="item download icon-download" data-toggle="tooltip" data-original-title="Download Track" data-placement="left"></div> 
        <div class="item cart last icon-cart-plus holds-tooltip popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div> 
        <div class="item last remove main-hover-item icon-x"></div> 
        <div class="clearfix"></div> 
       </div> 
       <div class="clearfix"></div> 
      </div> 

      <div class="mobile-play icon-play pull-left mobile-only inline-play"></div> 
      <div class="mobile-track-title mobile-only track-row-item-margin"><div class="track-title-link">{variation.track.name}</div></div> 
      <div class="mobile-track-buttons pull-right"> 
       <div class="pull-right mobile-only mobile-button mobile-track-menu-button left-margin icon-plus"></div> 
      </div> 

     </div> 
    </div> 
    <div class="no-variations" rv-hide="track.variations.tracks | shouldHideNoVariations">There are no alternate versions of this track.</div> 
</div>

来源

2015-06-06 Micah

我已经来到了这样的结论是，有轻微的性能改进，我可能实施结合1000+（大HTML）使用铆钉对象到DOM。然而，根本问题是，我试图将1000个以上的铆钉绑定到DOM，并且使用任何技术（我已经使用React，jQuery，Rivets等进行了测试）会变得很慢。）。

此问题的解决方案是简单地找到另一种方法。我已经选择预渲染服务器上的html，并通过API响应提供服务。这将页面加载时间从〜5秒减少到〜1秒。

来源

2016-02-23 17:54:04 Micah

不要做铆钉事件例如：RV-单击否则会影响你的表现，因为你会通过你的整个查看回调方法。
不要将整个视图传递给rivets.bind（）
只传递必要的模型并执行它。
如果有可能首先绑定100个元素，然后用户滚动一半的页面再次绑定100个元素，这肯定会提高你的性能。

我在活页夹中做了以下更改，使其即使在低端移动设备中运行也更快。

 
rivets.binders.text = function(el, value) { 
if (el.textContent != null) { 
    return el.textContent; 
} 
else { 
    return el.innerText; 
} 
};

来源

2016-02-22 09:33:24 Yuvaraj

这个答案有一般提示，但它不适用于我的问题，如果你仔细阅读。 – Micah

我在活页夹中做了以下更改，以使其即使在低端移动设备中运行也更快。\ n rivets.binders.text = function（el，value）if（el.textContent！= null）{ return el.textContent;其他{ return el.innerText; } }; – Yuvaraj

我已经更新了答案，请让我知道它是否有用 – Yuvaraj

在客户端模板引擎（Rivets.js）中渲染速度较慢

回答

相关问题