How LinkedIn WebView app mitigate the infinite scrolling: HTML5 developer perspective

This is a 2 part article. Please refer to the following blogs(see below) on issues faced by WebView apps in handling page scrolling scenario (infinite page scroll).

• http://karthkl.blogspot.com/2013/04/another-article-on-why-not-webview-app.html
• http://karthkl.blogspot.com/2013/04/whats-slowing-down-mobile-facebook.html

One advantage gained by the WebView application is the content is infinite and can be fetched from the web servers forever. This results in the DOM tree in WebKit growing infinitely. This advantage of WebView application is used by book store, mp3 store, video store vendors to provide an infinite list of books, songs, videos they prefer to sell. The disadvantage of this model is how effectively the local device memory is managed and how the user interactions are made smooth enough to hit the 60 fps scrolling rate (for the video mode LCD panels).
The first part of the article is looking at the infinite scrolling problem from the HTML5 perspective. Second part of the article will cover from WebKit perspective.

Please refer to this article [http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5] for what changes as an HTML5 app developer you can adopt to achieve smooth, crash free infinite page scrolling.

In short the article recommends:

• unloading offscreen images
• hiding offscreen pages
• removing offscreen pages
• avoid scaling for images and CSS box-shadow effects
• minimizing DOM nodes

All the above techniques are aimed at  keeping DOM tree to a reasonable size (removing DOM tree nodes which are few pages away from the current view port) thereby ensuring WebKit Threads and UI threads have reasonable data to work with.