7 ms·
Airbnb Releases Infinity.js: A Javascript Library for Smoother Scrolling
- pokoleo 14y ago...I don't think I understand the utility of this. Scrolling is already pretty smooth. (unless I'm wrong)
- AlexCP 14y agoIt loads content as you scroll down the page.
- SeckinJohn 14y agoAs far as I can see, it also removes invisible "pages" of content(i.e. stuff you saw and you are about to see) from DOM to decrease the load on renderer
- reissbaker 14y agoAuthor here. The utility is just to improve scroll smoothness (aka repaint times) of very-expensive-to-render pages, like infinite feeds with nice CSS effects. If you check out the demos linked to on the page, the demo with Infinity turned off should be noticeably choppier than the demo with it on, even once it's completely loaded and the browser's stopped reflowing. Probably depends on your machine/OS/browser combination -- but it'll keep loading more pugs as you scroll down, and eventually the version with Infinity off will grind just about anything to a halt.
- koglerjs 14y agoI had the same question, and I hope you see what I mean when I say I hope I never have to use it ;)--but looking at demo page and use cases it's a v. neat acceleration!
- recursive 14y agoFor me, in chrome on win7, the on and off demos both appear to be about equally choppy. I doubt I could identify a difference in a blind test.
- snprbob86 14y agoBy repaint times, do you mean re-layout times? ie. time required for CSS/HTML/JS to determine where to paint to? The demo is not any smoother on my 27" Apple display driven by a late 2010 model MacBook air. However, even low res hardware accelerated video renders choppy at large window sizes (although perf gets better when VLC or QuickTime is true fullscreen; presumably the compositor is off) Faster JavaScript is unlikely to be effective at enhancing buffer flip times, which (for me) dominate repaint times.
- reissbaker 14y agoBoth repaints and relayouts are improved, actually. The faster repaints are what improves scrolling performance (repaints are triggered every time you scroll, but relayouts are not) -- but because there are fewer elements in the DOM tree, relayouts are cheaper as well. We experimented with using display:none instead of removing the elements; it increased scrolling performance just as much as actual element removal, but the relayouts when new content was appended got to be prohibitively expensive once a certain amount of content was loaded (literally pausing the browser for a noticeable amount of time), because the browser still had to traverse a giant tree of HTML entities during the relayout. So even if the buffer flip times are still too slow for you to get completely smooth scrolling in complex demos like this -- and that makes sense, given your large-screen setup -- you'll hopefully still benefit some from the faster, non-browser-freezing relayouts.
- Terretta 14y agoBoth repaints and relayouts are improved, actually. When actually is defined as for some on certain machines, judging from the number of directly contradictory observations in this thread. The word "actually" ought to be reserved for concrete facts with zero counter examples. The word "hopefully" in your closing sentence seems more apt. That said, very much appreciate the sharing of the hypothesis and implementation. It's great to see ideas from other areas (video game terrain feature pop in) leveraged to improve end users' browsing experience.
- godfreykfc 14y agoI did something almost exactly the same[1] for a design project at school a while back, where I explained why current infinite scrolling UX is not great and how something like this could help[2]. I'm glad someone made this into a library! [1] http://newcoursys.herokuapp.com/courses/2012sp-cmpt-165-c1/activities/a2/grades/mark/ http://newcoursys.herokuapp.com/courses/2012sp-cmpt-165-c1/a... [2] http://newcoursys.herokuapp.com/#marking-interface http://newcoursys.herokuapp.com/#marking-interface
- jasonkester 14y agoStrange. It's the other way around for me (brand new Win7 box, Chrome, 16gb ram, fast everything, waited for all images to load before scrolling). When I move the scrollbar on the "on" version, it flashes white and constantly drops images in and out until I let go or stop in one place. Then it whites out again next time I scroll. Quite distracting actually, like viewing the bottom part of a long page while it's still loading images. The "off" version scrolls as one would expect, no flashes, no missing or reflowing content. Just like you'd expect. PgUp/PgDown and arrow keys don't seem any different between the two.
- Schlaefer 14y agoThe first paragraph is not tremendously helpful. "UITableView for the web" … what does that mean? Why should a web dev know or care? Make "demo" not "on" and "off" prominent. That's what I'm scanning the page for. Especially if you say "Infinity on and off" and it's the first time you use the word Infinity at all. Use Infinity or the symbol and then stick to it. At least introduce the name first.
- SeckinJohn 14y agoIf you try to move really fast with Infinity on, the screen turns completely white for a split second: http://airbnb.github.com/infinity/demo-on.html http://airbnb.github.com/infinity/demo-on.html
- reissbaker 14y agoTrue fact. That's just due to scrolling fast enough to get outside the buffer before the throttled scroll event fires -- if you want, you can turn the scroll throttle down to make sure that doesn't happen, at the expense of doing slightly more computation while scrolling. For Wish Lists, we optimize for people browsing through the feeds, which is generally not super fast. :)
- SeckinJohn 14y agoyeah I experimented with NUM_BUFFER_PAGES and SCROLL_THROTTLE and I am sold :) thanks for building and releasing this!
- reissbaker 14y agoNo problem, I'm glad you enjoy it! :)
- hueyp 14y agoIts much faster for me as well. In order to calculate the size of each ListItem you add it to the dom briefly when its appended to the ListView. This seems to be a fast operation since you do it hundreds of times yet the page is loading quickly. Is there a trick there that is avoiding having to calculate a ton of layout, or is that just not a big concern compared to other work the browser is doing? Thanks!
- reissbaker 14y agoJust one trick, although I use it in both the on and off demos to keep everything fair: I'm adding elements in smaller batches of 70 rows per tick of execution (arbitrary number), and then using a setTimeout to wait a few milliseconds before adding more. The demo loads a tooon of elements upfront -- much more than an ordinary site would -- and Firefox would sometimes complain if I loaded 400 rows of pugs at a single time. Chrome, of course, had no complaints, and IE was surprisingly fine as well.
- humbyvaldes 14y agoCool! So basically it's a lazy load
- deleted 14y ago[deleted]
- deleted 14y ago[deleted]
- losvedir 14y agoHm, it doesn't degrade very well without javascript on (pagination would be a neat fallback). I know it's not generally worthwhile to cater to such a limited user population, but what about search engines? Should this only be used for content you don't need indexed, or you have indexed a different way? Or, since I think Google uses javascript in its crawlers, I wonder how it handles it. Presumably it would just keep scrolling until the content ran out or it gave up. But does it ever come back later? I know with pagination it could pick up on the links it left off on, but couldn't really do that here, right? edit: I guess this is really a question of infinite scrolling more than this particular implementation. Kudos to Dropbox for releasing a well-done version of the technique.
- frontendbeauty 14y agoAwesome! This is going to help so much.
- threepointone 14y agoOT - I can't help but mentally shorten code snippets with underscore/whatever. For example, I see this - for(var index = 0, length = listItems.length; index < length; index++) { listItems[index].remove(); } and I think to myself - _(listItems).invoke('remove')
- zaptheimpaler 14y agoThat's awesome! Is that from underscore.js?
- threepointone 14y agoYup. I love the philosophy underlying underscore. The functions are ridiculously simple, but so powerful to use once you grok it.
- RegEx 14y agoI'm sorry, but can we please stop with the 'grok' thing?
- threepointone 14y agoI apologize, I didn't realize it's offensive to you/others. Seemed like a perfectly cromulent word.
- ars 14y agoLoading their demo linked from the word "on" froze my browser for about 20 seconds. Scrolling the page afterward was horrible, very jerky and laggy. I have noscript installed, but all scripts on that page were allowed.
- brokenparser 14y ago+1, count me unimpressed. Off: A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete. Script: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js:4 On: A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete. Script: http://airbnb.github.com/infinity/infinity.js:154 Firefox 14.0.1 without NoScript, Linux 3.4.0.
- gilini 14y agoSame here, but I wouldn't expect much from a jQuery plugin that implements "infinite scroll". Like I need stuff to start loading by itself whenever I reach the bottom of the page. Also, looking at their code, the first thing I laid eyes on was this statement: var infinity = window.infinity = {}; Which, in this context, would be the exact same as var infinity = {};
- brown9-2 14y agoI believe they are doing that to override any functions/objects already bound to window.infinity from other plugins/scripts. Look at the infinity.noConflict() function at the bottom of the source, which seems to be inspired by the jQuery.noConflict().
- gilini 14y agoIt doesn't matter. Both snippets do the exact same thing, except the first has two attributions, the second just one.
- dotborg 14y agowhy it's based on jQuery?
- shmageggy 14y agoBecause re-inventing the wheel is soooo 20th century.
- dotborg2 14y agowhat if I don't use jQuery in my project?
- threepointone 14y agoJust for you, I went through their source, and these are all the jquery specific calls - .height() .width() .offset() .remove() .append() .prepend() .prependTo() .find() .parent() .on() .off() .scrollTop() .outerHeight() .length It seems to me like all of these would be covered by zepto. Or qwery. Or you could make your own adapter with Prototype. Or Mootools. Or Ext. Or YUI. Heck, you could probably whip up your own little library based on sizzle, or even just querySelectorAll. Then just fork infinity to use your lib, and you're good to go. I hope you're not confused any more! [I'm not affiliated with airbnb, just thought I'd help you out]
- dotborg2 14y agook, sounds like a lot of boilerplate code to write, because "Its only dependency is on jQuery."
- threepointone 14y ago<script src="zepto.js"></script> <script> var jQuery = Zepto; </script> <script src="infinity.js"></script> There.
- devgutt 14y agoOP: Maybe you should change the links [on]/[off] to [demo on]/ [demo off].
- lowglow 14y agoI think Lue Links was doing this for several years. I'm glad to finally have a library for it.
- tantalor 14y agoIf this only works on jQuery objects, why not implement this as jQuery plugin? jQuery.fn.infinity = function (options) {...}; $(el).infinity(options); And so on.
- lucian1900 14y agoI think it might work with other methods of selecting DOM elements. At least that's what the API suggests.
- tantalor 14y agoMaybe I'm not reading it right, but it says it depends on jQuery and accepts selectors or jQuery objects, not DOM elements.
- gamzer 14y agoAndroid 4.1.1 with or without Infinity: "The page has become unresponsive. Wait or kill?"
- whirlycott1 14y agoI tested infinite scrolling on a large site about a year ago and the results were decidedly negative in almost every significant respect according to our A/B testing. Does anybody actually have evidence that infinite scrolling is a good thing?
- fuzzythinker 14y agoJust a data point, I find lightbox (photo sharing site, not js lib) to be so incredibly addictive that I spent 1/2 hour on it. There's no way I would have spent more than 5 mins had I have to click on each page.
- andybak 14y agoThe most significant loss is the ability to keep your place. Google Reader is a good example. There's no way to bookmark how far back you've read so when I reload or close the tab I usually have give up and abandon unread items. You could mitigate this but it would be useful to see what benefits people think infinite scrolling introduces and (if there are any) see if there is a solution that gives the same benefits with fewer costs. Maybe some hybrid 'paged' infinite scrolling where you can keep going but clear pagebreaks are displayed which are mirrored in the browser history.
- jqueryin 14y agoI have actually recently implemented something just like this where I use a combination of infinite scroll, pagination, pushState, and history to maintain your page reference. It uses Ember.js, so it even updates the pagination count for you as you scroll through the table. The infinite scroll is toggleable and you can decide to just stick with the "prev/next" pagination items as well. Unfortunately, I had to custom roll this solution. I started on a plugin but making it universally usable for a number of use-cases is a bit time consuming.
- itmag 14y agoThe Danish dating site dating.dk uses a hybrid format with both page numbers and infinite scrolling (if I remember correctly). It's a site with a huge member base (considering the population of the country) so it seems to work well in the real world.
- jazzychad 14y agoThank you for using sane js code style.
- yason 14y agoI tried both off and on demos, and all I got was a huge page loading slowly with scrolling causing flickering and stuttering. This is on Linux/Chrome. Maybe people shouldn't try to create large, image heavy pages in the first place, not to mention make them infinitely long.
- notatoad 14y agoYeah, Mac/FireFox here and the same experience. both the on and off demos gave me a spinning beach ball for a minute while what seemed like the entirety of the content loaded. I thought that's what infinite scrolling was supposed to prevent?
- shocks 14y agoBoth demos are the same for me. Chrome, Windows 7 64bit.
- weixiyen 14y agoUITableView was made for mobile devices not for infinite scrolling per se, but simply for large lists (such as address books) due to the memory limitations of iOS devices. Those memory limitations are simply nonexistent for the web for almost all but the smallest number of cases (ie, infinite lists). But lets pretend that this infinite scrolling is even a real problem (honestly it's probably not the best UI for large infinite lists of things on the web). The current implementation clearly needs some work. It's trying to over-optimize for memory to the point of choking the scrolling. This, however, can be fixed fairly trivially. Allow the user to scroll anywhere (even past loaded content). If you can't eagerload elements to compensate for it, then lazyload after the user gets to that point. This gives users the illusion that the scrolling is truly smooth and responsive. The important thing is never allow scrolling to stop unless it's truly at a dead end and there is absolutely no more elements to load. The above is how UITableView functions. Infinity.js is UITableView for loading elements, but does not function anything like UITableView from a user interaction standpoint.
- 89a 14y agooff version actually worked better for me
- crag 14y agoWe (at our company) don't use pagination anywhere now. But we do have extensive search abilities. We have found, very few of our users just scroll. They use the search. But the "infinite" scrolling is there if they want it.
- bicknergseng 14y agoNote to all developers planning on implementing infinite scrolling: Don't have a footer. Example of this error: LinkedIn. Try to get to their ToS or Help Center from the logged in home page. Good luck.
- fuzzythinker 14y agoIt can, it just needs to be position as fixed.
- bicknergseng 14y agoI stand corrected. I personally like what Facebook now does (they used to have the same problem). They put the same information in a tile at the bottom of their right pane, which is fixed.