Efficient Web Browser Rendering

With the impending “official” release of HTML5 and CSS3 coming up, I’m wondering if all the fancy new features actually make the web-browsing experience better (or even faster).

Ever since I took it upon myself to learn game design and development, I learned a lot about how to manage video memory. The important part of implementing an efficient rendering loop is to draw only what is necessary to the output. Every time an area or region of a screen changes colors, animates, cursor blinks, the GPU has to redraw that part of the screen. So imagine how much video memory a web browser consumes whenever a user scrolls an entire page! Well, technically, scrolling or transferring a one-to-one pixel mapping to another region is highly efficient with existing implementations.

2D Tiling System with divs

So as I was playing around with some CSS to map a 2D tile system, I noticed a huge decrease in performance. It’s neat that CSS can slice up sprite sheets, but when most modern browsers are viewed at higher than 1024×768 resolution, it’s just not efficient to buffer a video surface at that size and then have to constantly redraw source rectangles from a remote image. Internally, I’m sure web browsers lock in the video surface, but then on the user level, draws all the user-implemented stuff like Javascript, Flash, CSS, canvas, etc., on top. That just isn’t efficient.

Therefore, it’s actually counter-productive to implement a 2D tile system for web browsers if you’re going the CSS route of multiple divs. It would actually be more efficient (rendering-wise) to already have your map pre-rendered as one image. The download might take longer as a single, large image as compared to a single, small sprite sheet, but the final rendering should perform better.

CSS3 effects

I’m liking CSS3’s shadow effects. Something very subtle, but can really enhance design. Gradients can be overkill, but I have noticed some slow rendering using it. Therefore, I still recommend pre-rendered gradients. Remember, CSS3 gradients have to be redrawn in real-time using color computation and mapping, but a pre-rendered gradient (an image) is just copied bit-by-bit, therefore has better performance.

I’m looking forward to the multi-column implementation of text. Although, now, I don’t believe it is necessary anymore as text can be zoomed and breaks the layout anyway. Multi-column layout design is an idea still stuck in the days of print, where the layout space was finite. If you want to look forward in design, you’ll have to start thinking of a webpage surface as an infinite space canvas. No more confinement to multi-columness. What CSS3 should actually have are text paths, where users can type text onto a path. That will really open up organic design.

Faster Image Downloads

I ranted about this in a previous entry, but I still think there’s some mathematician out there that can come up with even a better algorithm for image compression/decompression other than JPEGs. Imagine one day where entire websites were comprised of fully rasterized webpages (sole images) where that type of design was necessary. No more PDFs or waiting for downloads. What if you were looking at a real-time globe map? Heck, it’d make playing World of Warcraft easier. Google lets you browse some 70 megapixel images! Yet, Google Chrome can’t render any of them. But it just shows they’re anticipating it.

Lines and shapes

Why aren’t there any built-in implementation for drawing lines or vector shapes? Javascript is cool, but if simple shape drawing was built into CSS3, it’d make designing a lot easier for the average user.

3D is a gimmick

Don’t trust any Internet browser that comes out with 3D this-and-that. If one day Google decides to implement a 3D browser thumbnail search engine, or they convert their image search engine into a 3D virtual environment, then it’s time to abandon Google. As cool as it may sound, it doesn’t do anything other than make a technology as advanced as the Internet (with all it’s practical uses keeping it alive) look like a 1950s blinking buttons control panel or a foil-and-cardboard robot. It doesn’t make it any more complex or boasts of its technological superiority.

Gaming in browser

And finally, to continue with 3D bashing, if Microsoft has its way with GPU-accelerate web-browers, it might be possible for users to be playing advanced 3D games in-browser. But to implement something that drastic, big M has to assume that the majority of Internet surfers are using their browsers for heaving graphics processing. Not gaming alone, but users do like to watch their videos in HD. And they love their Facebook games. However, I don’t know of any applications out there that sells solely on 3D. However, it’s possibly to use an Internet browser as a rendering target for external games. A possible usage is you can draw the game output on a portion of the web browser while the other portion loads a webpage for instructions. Or the webpage could be a menu or intrinsic to the gameplay. Something like that.

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

Leave a Reply