CODEWITHSUNDEEP
javascriptcssclient-side
cantlin
cantlin

Reputation: 3226

Performant CSS3 full-screen slider

When implementing a lightbox or image slider, my usual approach is to nest an element containing the slides within a fixed width and height element that has overflow:hidden;, as below.

CSS3 slider diagram

By animating the margins, we can move the slides fluidly through the visible area.

I've recently been implementing such a slider that uses full-screen slides and targets Retina display iPads. The slides aren't images, but rather distinct chunks of HTML, some with high resolution embedded media. The performance on the device is acceptable, but could definitely be improved.

My question is really what factors should I be considering when attempting to optimize the client-side performance of a web app of this kind? For example, I know CSS3 transitions are considered superior as a result of being hardware accelerated.

Are there ways of laying out the DOM that WebKit might find more pleasing?

Is "lazy loading" non-visible pages likely to make a real impact? If so, is it worth actively removing old elements that have already been seen to control the size of the DOM?

Each slide is currently loaded asynchronously onLoad. Would there be any performance implications (besides saving some HTTP requests) to serving up all the HTML to the browser at once?

I'd be very grateful for any tips or tricks you can come up with!

Upvotes: 1

Views: 597

Answers (1)

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

OK, there are a few things to bear in mind here.

  1. Avoid repaints. If you can use transforms and transitions, do. Because the browser knows what you are doing, it can avoid repainting when it's not needed. I wrote this up a few years back: http://css3.bradshawenterprises.com/sliding/, which explains how to do this. A fall back to using jQuery animate is a popular choice. I wrote up a pretty ugly way to do this here: http://css3.bradshawenterprises.com/legacy/, but you can probably think about how to write that in a nicer way now things have moved on a bit. jQuery 1.8 abstracts away vendor prefixes for instance, avoiding much of my ugly code!

  2. Use 3D transforms where possible, you can cheat a little by adding a transform: translate3d(0,0,0); on the moving bit. This forces it into a new layer in Webkit, which can help on some versions of webkit.

  3. Regarding memory usage and DOM objects, use the Timeline Inspector in Chrome or Safari to record yourself using the slider, then check what's going on. If you have access to iOS 6.0, then you can connect to the device in Safari to use the inspector directly on the device.

  4. https://developer.apple.com/videos/wwdc/2012/?id=601 is a video dealing with this sort of thing, and worth watching. If you can't access that page, I believe you can get the videos via iTunes U, but maybe that's just because I'm a developer as well... Either way, the title of the video is "Optimizing Web Content in UIWebViews and Websites on iOS".

In short, measure, record, analyse and experiment!

Upvotes: 1

Related Questions