{"action":"created","issue":{"url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/841","labels_url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/841/labels{/name}","comments_url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/841/comments","events_url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/841/events","html_url":"https://github.com/OnsenUI/OnsenUI/issues/841","id":100448286,"number":841,"title":"lazy repeat incredibly slow on iOS and Android","user":{"login":"Hirbod","id":504909,"avatar_url":"https://avatars.githubusercontent.com/u/504909?v=3","gravatar_id":"","url":"https://api.github.com/users/Hirbod","html_url":"https://github.com/Hirbod","followers_url":"https://api.github.com/users/Hirbod/followers","following_url":"https://api.github.com/users/Hirbod/following{/other_user}","gists_url":"https://api.github.com/users/Hirbod/gists{/gist_id}","starred_url":"https://api.github.com/users/Hirbod/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Hirbod/subscriptions","organizations_url":"https://api.github.com/users/Hirbod/orgs","repos_url":"https://api.github.com/users/Hirbod/repos","events_url":"https://api.github.com/users/Hirbod/events{/privacy}","received_events_url":"https://api.github.com/users/Hirbod/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-08-12T01:45:45Z","updated_at":"2015-08-12T04:26:09Z","closed_at":null,"body":"Hi,\r\n\r\nI have following setup:\r\n\r\n```js\r\n        $scope.MyDelegate = {\r\n\r\n\r\n            configureItemScope: function(index, itemScope) {\r\n\r\n                itemScope.item = {};\r\n\r\n                var person = $scope.photos.items[index];\r\n                itemScope.item.uid = person.uid;\r\n                itemScope.item.firstname = person.firstname;\r\n                itemScope.item.picture = person.picture;\r\n                itemScope.item.lastactivity = $scope.formatTime(person.last_activity);\r\n\r\n            },\r\n\r\n            calculateItemHeight: function(index) {\r\n                return 91;\r\n            },\r\n\r\n            countItems: function() {\r\n                return $scope.photos.items.length;\r\n            },\r\n\r\n            destroyItemScope: function(index, itemScope) {\r\n                /*\r\n                itemScope.canceler.resolve();\r\n                console.log(\"Destroyed item #\" + index);\r\n                */\r\n            }\r\n        };\r\n```\r\n\r\n```js\r\n$scope.photos.items\r\n```\r\n\r\nis a json object with 1500 nodes. I catch it from remote on init and store it there. The list loads and work fast on simulator but it is so laggy and choppy on all real devices. What am I doing wrong?\r\n\r\nIt's really hard to understand the lazy repeat (imho not good documented). Before I've switched to lazy repeat, I had a scroll-observer and pulled 25 elements from the server and made a LIMIT on MySQL, then I added the new elements to my scope array (with ng-repeat)\r\n\r\nI switched this cause I did not want to have 1500 HTML nodes. But it was way more performant then lazy-repeat. Any suggestions?"},"comment":{"url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/comments/130156035","html_url":"https://github.com/OnsenUI/OnsenUI/issues/841#issuecomment-130156035","issue_url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/841","id":130156035,"user":{"login":"Hirbod","id":504909,"avatar_url":"https://avatars.githubusercontent.com/u/504909?v=3","gravatar_id":"","url":"https://api.github.com/users/Hirbod","html_url":"https://github.com/Hirbod","followers_url":"https://api.github.com/users/Hirbod/followers","following_url":"https://api.github.com/users/Hirbod/following{/other_user}","gists_url":"https://api.github.com/users/Hirbod/gists{/gist_id}","starred_url":"https://api.github.com/users/Hirbod/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Hirbod/subscriptions","organizations_url":"https://api.github.com/users/Hirbod/orgs","repos_url":"https://api.github.com/users/Hirbod/repos","events_url":"https://api.github.com/users/Hirbod/events{/privacy}","received_events_url":"https://api.github.com/users/Hirbod/received_events","type":"User","site_admin":false},"created_at":"2015-08-12T04:26:09Z","updated_at":"2015-08-12T04:26:09Z","body":"@argelius \r\n\r\nthe ons-lazy-repeat needs  debouncing, or it will never be really performant (due to UIWebViews limitation and throttled scroll-event-publishing). This behaviour will be better once WkWebView will be working on iOS 8+ cordova.\r\n\r\nI've patched the Lazy directive and I have a 100% performance boost now.\r\n\r\n```js\r\n      _debounce: function(func, wait, immediate) {\r\n\t\tvar timeout;\r\n\t\treturn function() {\r\n\t\t\tvar context = this, args = arguments;\r\n\t\t\tvar later = function() {\r\n\t\t\t\ttimeout = null;\r\n\t\t\t\tif (!immediate) func.apply(context, args);\r\n\t\t\t};\r\n\t\t\tvar callNow = immediate && !timeout;\r\n\t\t\tclearTimeout(timeout);\r\n\t\t\ttimeout = setTimeout(later, wait);\r\n\t\t\tif (callNow) func.apply(context, args);\r\n\t\t}\r\n\t   },\r\n\t   _doubleFireOnTouchend: function(){\r\n\t   \t\tthis._render();\r\n        \tthis._debounce(this._render.bind(this), 100);\r\n\t   },\r\n\r\n      _addEventListeners: function() {\r\n        this._boundOnChange = this._debounce(this._onChange.bind(this), 30);\r\n\r\n        this._pageContent.addEventListener('touchmove', this._boundOnChange, true);\r\n        this._pageContent.addEventListener('scroll', this._boundOnChange, true);\r\n        this._pageContent.addEventListener('touchend', this._doubleFireOnTouchend, true);\r\n\r\n\r\n        $document[0].addEventListener('resize', this._boundOnChange, true);\r\n      },\r\n\r\n      _removeEventListeners: function() {\r\n        this._pageContent.removeEventListener('scroll', this._boundOnChange, true);\r\n        this._pageContent.removeEventListener('touchmove', this._boundOnChange, true);\r\n        this._pageContent.removeEventListener('touchend', this._doubleFireOnTouchend, true);\r\n\r\n\r\n        $document[0].removeEventListener('resize', this._boundOnChange, true);\r\n      },\r\n```\r\n\r\nIt does not break anything - it just works 100% better than before. You can't recalculate so many elements without strugglin on performance. If I've a long list and do a really really fast scroll, it can happen that the elements will be rendered after the scroll event has finished. I tried to eliminate with a \"doubleFireOnTouch\" but it don't work always. But the problem was there also before I've patched (but due to stutter on scroll less visible)\r\n\r\nNontheless, adding 30ms of debouncing will give \r\na) memory boost\r\nb) performance boost\r\nc) will not break current flow"}}