Last week, LinkedIn (News – Alert) — the popular social networking site aimed at professionals which recently posted an excellent first quarter — debuted its standalone app for Apple’s (News – Alert) iPad. The app featured, as most iPad-specific apps do, a clean interface meant to take advantage of the tablet’s screen size as well as a few other unique features, namely infinite scrolling.

While infinite scrolling is a feature that already existed, LinkedIn’s iPad app marks the first time such a feat has been accomplished entirely with HTML5. The engineering team who made the app wanted to enable a "stream" of content that can be generated endlessly, providing users with an “engaging content consumption experience.” However, mobile devices aren’t the powerhouses that modern desktops and laptops are, primarily in terms of memory, which an infinite scrolling list requires a lot of in order to work.

As such, the LinkedIn engineers sought out ways to circumvent this mobile memory issue while avoiding solutions that were readily available to them — Apple already has its own solution. The LinkedIn team liked the challenge of creating a way to enable infinite scrolling in HTML5, though, and so it did. In doing so, the team has helped other HTML5 developers because the people at LinkedIn were so kind as to make a blog post about the experience.

First off, the LinkedIn engineers replaced the “src” attribute of the image tags of large images with that of a small image when it was moved off screen. This allowed large images to be displayed on screen but also saved memory when those images were moved off screen.

This wasn’t enough, though, so next the team started hiding pages to further reduce memory use. To do this, the team set the CSS (News – Alert) visibility property of pages to hidden. This resulted in more memory being freed up as the browser didn’t have to keep invisible pages loaded.

These two seemingly simple changes were apparently enough to fix 80 percent of crashes. For the other 20 percent, the team began to remove pages outright. Only pages that weren’t required were modified, replaced by an empty page of equal height and width called a "stub."

This all resulted in a stream that was able to keep the current page loaded with all images as well as the previous and next pages. Then, the second previous and next pages would be loaded up but without images. The next set of previous/next pages would be stubs and beyond that, pages were completely removed.

All instances of app crashing handled, some HTML/CSS optimizations were enough to ensure smooth performance, resulting in a creative and effective HTML5 infinite scrolling solution.