{"action":"created","issue":{"url":"https://api.github.com/repos/mikeric/rivets/issues/495","labels_url":"https://api.github.com/repos/mikeric/rivets/issues/495/labels{/name}","comments_url":"https://api.github.com/repos/mikeric/rivets/issues/495/comments","events_url":"https://api.github.com/repos/mikeric/rivets/issues/495/events","html_url":"https://github.com/mikeric/rivets/issues/495","id":85660987,"number":495,"title":"Tips on heavy rendering","user":{"login":"micahlisonbee","id":1928295,"avatar_url":"https://avatars.githubusercontent.com/u/1928295?v=3","gravatar_id":"","url":"https://api.github.com/users/micahlisonbee","html_url":"https://github.com/micahlisonbee","followers_url":"https://api.github.com/users/micahlisonbee/followers","following_url":"https://api.github.com/users/micahlisonbee/following{/other_user}","gists_url":"https://api.github.com/users/micahlisonbee/gists{/gist_id}","starred_url":"https://api.github.com/users/micahlisonbee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/micahlisonbee/subscriptions","organizations_url":"https://api.github.com/users/micahlisonbee/orgs","repos_url":"https://api.github.com/users/micahlisonbee/repos","events_url":"https://api.github.com/users/micahlisonbee/events{/privacy}","received_events_url":"https://api.github.com/users/micahlisonbee/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-06-06T00:11:13Z","updated_at":"2015-11-25T18:24:39Z","closed_at":null,"body":"I'm rendering an array of of about 1000 objects. The html bindings are very heavy (see below). It's taking about 5 seconds to <code>rivets.bind()</code>.\r\n\r\nAny suggestions on improving performance? I don't think I can afford to bind in chunks as I'm using a pagination/sorting library in conjuction that needs the entire array in order to sort/paginate.\r\n\r\nHere is my HTML for each object (tracks):\r\n\r\n    <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\">\r\n\t<div class=\"mobile-margin\">\r\n\t\t<div class=\"track-hover desktop-only\">\r\n\t\t\t<div class=\"hover-play icon-play inline-play\"></div>\r\n\t\t\t<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>\r\n\t\t\t<div class=\"hover-links\">\r\n\t\t\t\t<div class=\"item hamburger holds-tooltip main-hover-item icon-hamburger\" data-toggle=\"tooltip\" data-original-title=\"Alternate Versions\"></div>\r\n\t\t\t\t<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>\r\n\t\t\t\t<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>\r\n\t\t\t\t<div class=\"item download icon-download holds-tooltip main-hover-item\" data-toggle=\"tooltip\" data-original-title=\"Download Track\"></div>\r\n\t\t\t\t<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>\r\n\t\t\t\t<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>\r\n\t\t\t\t<div class=\"clearfix\"></div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"clearfix\"></div>\r\n\t\t\t<div class=\"track-variations\">\r\n\t\t\t\t<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\">\r\n\t\t\t\t\t<div class=\"col-md-8 variation-title\">{variation.track.name}</div>\r\n\t\t\t\t\t<div class=\"col-md-2 variation-length\">{variation.track.tracklength}</div>\r\n\t\t\t\t\t<div class=\"track-hover variation\">\r\n\t\t\t\t\t\t<div class=\"hover-play icon-play inline-play\"></div>\r\n\t\t\t\t\t\t<div class=\"hover-title\"><a class=\"track-link\">{variation.track.name}</a></div>\r\n\t\t\t\t\t\t<div class=\"hover-links\">\r\n\t\t\t\t\t\t\t<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>\r\n\t\t\t\t\t\t\t<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>\r\n\t\t\t\t\t\t\t<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>\r\n\t\t\t\t\t\t\t<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>\r\n\t\t\t\t\t\t\t<div class=\"item last remove main-hover-item icon-x\"></div>\r\n\t\t\t\t\t\t\t<div class=\"clearfix\"></div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"clearfix\"></div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"no-variations\" rv-hide=\"track.variations.tracks | shouldHideNoVariations\">There are no alternate versions of this track.</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<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>\r\n\t\t<div class=\"col-md-3 genre desktop-only\"><span class=\"offset-left\">{track.genre}</span></div>\r\n\t\t<div class=\"col-md-2 mood desktop-only\"><span class=\"offset-left\">{track.mood}</span></div>\r\n\t\t<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>\r\n\t\t<div class=\"col-md-1 last-title duration desktop-only\"><span>{track.track.tracklength}</span></div>\r\n\t\t<div class=\"col-md-1 last-title last-played pull-right desktop-only\">{track.lastPlayed}</div>\r\n\t\t\r\n\t\t<div class=\"mobile-play icon-play pull-left mobile-only inline-play\"></div>\r\n\t\t<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>\r\n\t\t<div class=\"mobile-track-buttons pull-right\">\r\n\t\t\t<div class=\"pull-right mobile-only mobile-button mobile-track-menu-button left-margin icon-plus\"></div>\r\n\t\t\t<div class=\"pull-right mobile-only mobile-button mobile-variations-button icon-hamburger\"></div>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"is-staff-pick hidden\">{track.track.staff_pick | staffPickValue}</div>\r\n\t\t<div class=\"instrument hidden\">{track.instrument}</div>\r\n\t\t<div class=\"industry hidden\">{track.industry}</div>\r\n\t\t<div class=\"tempo hidden\">{track.tempo}</div>\r\n\t\t<div class=\"aggregated-terms hidden\">{track.tag_list} {track.track.name}</div>\r\n\t\t<div class=\"date-last-played hidden\">{track.dateLastPlayed}</div>\r\n\t\t<div class=\"clearfix\"></div>\r\n\t</div>\r\n\t<div class=\"track-variations mobile-only\">\r\n\t\t<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\">\r\n\t\t\t<div class=\"mobile-margin\">\r\n\t\t\t\t<div class=\"col-md-8 variation-title desktop-only\">{variation.track.name}</div>\r\n\t\t\t\t<div class=\"col-md-2 variation-length desktop-only\">{variation.track.tracklength}</div>\r\n\t\t\t\t<div class=\"track-hover variation\">\r\n\t\t\t\t\t<div class=\"hover-play icon-play inline-play\"></div>\r\n\t\t\t\t\t<div class=\"hover-title\"><a href=\"\" class=\"track-link\">{variation.track.name}</a></div>\r\n\t\t\t\t\t<div class=\"hover-links\">\r\n\t\t\t\t\t\t<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>\r\n\t\t\t\t\t\t<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>\r\n\t\t\t\t\t\t<div class=\"item download icon-download\" data-toggle=\"tooltip\" data-original-title=\"Download Track\" data-placement=\"left\"></div>\r\n\t\t\t\t\t\t<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>\r\n\t\t\t\t\t\t<div class=\"item last remove main-hover-item icon-x\"></div>\r\n\t\t\t\t\t\t<div class=\"clearfix\"></div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"clearfix\"></div>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"mobile-play icon-play pull-left mobile-only inline-play\"></div>\r\n\t\t\t\t<div class=\"mobile-track-title mobile-only track-row-item-margin\"><div class=\"track-title-link\">{variation.track.name}</div></div>\r\n\t\t\t\t<div class=\"mobile-track-buttons pull-right\">\r\n\t\t\t\t\t<div class=\"pull-right mobile-only mobile-button mobile-track-menu-button left-margin icon-plus\"></div>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"no-variations\" rv-hide=\"track.variations.tracks | shouldHideNoVariations\">There are no alternate versions of this track.</div>\r\n\t</div>\r\n</div>"},"comment":{"url":"https://api.github.com/repos/mikeric/rivets/issues/comments/159693891","html_url":"https://github.com/mikeric/rivets/issues/495#issuecomment-159693891","issue_url":"https://api.github.com/repos/mikeric/rivets/issues/495","id":159693891,"user":{"login":"Duder-onomy","id":1612785,"avatar_url":"https://avatars.githubusercontent.com/u/1612785?v=3","gravatar_id":"","url":"https://api.github.com/users/Duder-onomy","html_url":"https://github.com/Duder-onomy","followers_url":"https://api.github.com/users/Duder-onomy/followers","following_url":"https://api.github.com/users/Duder-onomy/following{/other_user}","gists_url":"https://api.github.com/users/Duder-onomy/gists{/gist_id}","starred_url":"https://api.github.com/users/Duder-onomy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Duder-onomy/subscriptions","organizations_url":"https://api.github.com/users/Duder-onomy/orgs","repos_url":"https://api.github.com/users/Duder-onomy/repos","events_url":"https://api.github.com/users/Duder-onomy/events{/privacy}","received_events_url":"https://api.github.com/users/Duder-onomy/received_events","type":"User","site_admin":false},"created_at":"2015-11-25T18:24:39Z","updated_at":"2015-11-25T18:24:39Z","body":"@woozyking Good idea. \r\n\r\nAlso, I was thinking about this more. \r\n\r\nIf there are a TON of bindings inside of a massive iterable, then performance will always be an issue. That being said, we can always manage how this performance appears to the user. If the user can at least know something is going on, then that might be enough to satisfy them. This might be a way to achieve this.\r\n\r\n***** NOT SURE IF THIS WILL WORK *****\r\nRivets binders will fire in the order they are found in the DOM. There is a 'priority' attribute that can be used on binders. The higher the priority of the  more likely it will be to fire first. That being said, what if we used a super low, possibly negative value on the binder priority, essentially forcing it to fire last. Then we would know when the final binding is complete. This will let us show some sort of loading state while the view is binding. \r\n\r\nThe binder might look like, \r\n```javascript\r\nrivets.binders['finished-binding'] = {\r\n    priority : -1000 // force it to fire last\r\n    bind : function() {\r\n        // toggle some model property or fire some event.\r\n    },\r\n    routine : function() {},\r\n    unbind : function() {}\r\n}\r\n```\r\n\r\nthe use might look like \r\n```html\r\n<div rv-each-thing='model.things'  a bunch of other binders rv-finished-binding></div>\r\n```\r\n\r\nJust a thought. It might work. I will repost here with a fiddle when I have time to make one. Around lunch time probably.\r\n"}}