How to Improve JavaScript Latency in Mobile Browsers

Posted by Mike Brittain on January 20, 2009
Mobile

Mobile browsers are really coming along.  Mobile Safari is built on top of WebKit and has just as much capability as the desktop version.  Same with Android’s browser.  Blackberry’s browser, I understand, has improved tremendously over previous versions.  The new offering from Palm centers application development around web technologies HTML, CSS, and JavaScript.

As more applications and data grow to live in the cloud, then access to them via a browser must be easy and fast, which is often not the case with data on mobile devices.  A web site can take many seconds to several minutes to load all of the content required.  And at the heart of many sites these days lie some common elements — JavaScript libraries.

Personally, I have avoided heavy-weight libraries for mobile application development, because I know that they are a burden to the end-user.  This is less often the case for desktop users, who typically have broadband connections at home or at work.  So what do we do to improve this situation?

I propose that the mobile browser makers (or OS makers, in most cases) embed standard versions of common JavaScript libraries within their browsers.  Google already makes a number of these available as a hosted solution for web application developers: jQuery, YUI, Prototype, script.aculo.us, etc.  Other players, particularly in the CDN space, could also become involved in hosting these frameworks.  Nearly half of the libraries that Google hosts are larger than the 25 KB cache limit in mobile Safari (for example).  By embedding a handful of these libraries, mobile browsers could speed up some of the overhead of mobile applications that rely on Ajax or heavy DOM manipulation.

How would you do this?  Likely by inspecting HTTP requests by URL.  Google’s hosted libraries include version numbers, which allows developers to peg their work to a specific version, not having to worry about quirks in future versions that could upset their apps.  When an application makes use of one of these embedded libraries, the browser can simply execute the JavaScript library without having to make an external request.  If the application uses a newer version that is not embedded in the browser, the HTTP request would proceed as normal.  End users would get a slower experience than with an embedded framework, but that experience would be no worse than we have now.

I’m interested in hearing others’ thoughts about this idea.

Tags: , , , , , , , , , , , ,

2 Comments to How to Improve JavaScript Latency in Mobile Browsers

Robert Spychala
January 21, 2009

I think a better solution would be to split JS libraries into chunks that are under the 25kB uncompressed limit for some devices (like the iPhone.)

This is something that could be done right now.

Set the cache expiration to some time way in the future and you shouldn’t have to request the JS library again.

Mike Brittain
January 21, 2009

That’s obviously a good way to start. Your phone’s cache is limited in size, however, and will eventually reject particular files that are not regularly visited. So this helps frequent users, but definitely not new users.

Additionally, when an iPhone is rebooted its cache is cleared. I don’t have to reboot mine often, but it does happen and there you go downloading these libraries over again.

So I agree with you, and there is a lot that can (and should) be done by developers for improving performance. What I’m proposing is a change that could additionally speed the platform for web apps.