LinkedIn debuted their iPad app, while getting attacked by Syrian hackers, last week to praise for its clean presentation while taking advantage of the iPad’s strengths. One of the major features of the iPad app is its infinite scrolling through the use of HTML5. The engineering team went through a lot of variations to reach the end product and are now sharing their journey with other developers.
The main hook of the LinkedIn iPad app is its “stream” for infinite content scrolling. This will allow users to have an “engaging content consumption experience.” The only problem with this approach is that mobile devices are not exactly the best when it comes to memory which an infinite scrolling list requires a lot of.
To circumvent the lack of large pools of memory, the team went the extra mile by building their own solution to this problem. They could have used Apple’s solution that would have allowed for infinite scrolling, but the LinkedIn team apparently wanted the challenge of building their own in HTML5 which currently lacked such a technology. In the end, they obviously succeeded, but they also helped HTML5 developers everywhere by proving it could be done.
The first technique in streaming large images via HTML5 was to replace the src attribute of the img tag with a small image when it was moved off screen. This allowed the large images to be displayed on screen while saving memory when said images were moved off screen.
It turns out that making the images small didn’t save enough memory in the long run. To combat this, they bagan to hide pages so that they wouldn’t take up memory as well. They did this by setting the CSS visibility property of a page to hidden. This allowed more memory to be freed up as well as the app running smoother because the browser didn’t have to keep the invisible pages up.
Apparently those first two techniques helped sove 80 percent of crashes. To help solve crashes for the other 20 percent, the team started to remove pages altogether. They only removed pages that were not required and replaced them with an empty page of equal height and width called a “stub.”
All of this led to them creating a stream that would have the current page loaded with all images visible with the previous and next pages being fully loaded as well. After that, the second previous and next would be loaded up but didn’t have any images. The next after that would be an invisible page. Once it had gone beyond that, the pages would removed. It’s an ingenious method of keeping infinite scrolling in place without having to sacrifice anything.
Now that they had this method in place, they only had to start working on improving the performance of the app. They helped this along by adding in some HTML/CSS optimizations. The first is to avoid client side image scaling. To avoid that, simply specify the width and height attributes of an image in HTML tags. The second is to simply not use CSS box shadow as it has a negative effect on performance.
All of this work helped keep the app running, but they were still running into crashes now and again. To keep it perfectly stable, they would have to keep the DOM nodes to a minimum. Remember those stub nodes that replaced far off pages in the stream? They were able to combine those stubs into a single dummy node to prevent the app from crashing.
For those who learn better with visual examples, here’s a video of the LinkedIn team showing off how the DOM changes when a user moves through the stream. Check it out to see some awesome HTML5 magic.
