How do browsers work?

December 17, 2006 3:04 PM

How does a browser render a website?

I am a programmer, but have never made my own GUI widgets. Most of what I do is web based, or simple Java apps. Nothing very advanced.

That being said, I can't conceptually understand how a web browser render the display elements

Does it create some sort of text block, and image object, inside a viewer object, and manipulate all of them together? Grawr!

I would LOVE a step by step explanation of how say Firefox renders cnn.com.

Such like:

urlfetch is called and pulls the html into a storage object.
treeparse is called on the urlfetch return object.
the parsed tree is sent to the rendering object, which pulls down each image/plugin, and begins creating elements.

Arg! How do pages scroll, but no elements ever randomly move.

I tried browsing the Firefox source code, but that is WAY to low level for me to grasp.

posted by SirStan to computers & internet (10 comments total)

See Douglas Crockford's 3 video lectures on "theory of the DOM".
posted by MonkeySaltedNuts at 3:14 PM on December 17, 2006

Brainjar's Explanation of the Document Object Model (DOM) might be conceptually useful to you. Personally, I think the DOM is a complete piece of crap, and more a hinderance to the growth and utility of the Web by far than any kind of useful construct, but I am an iconoclastic minority of 1 in this opinion.

Study cruft in the form of browser rendering engines, and you waste your time, I say, as they can never do but badly what they try to do at all. But it is your time.
posted by paulsc at 3:19 PM on December 17, 2006

SirStan: it sounds like you've never done graphics programming. At the very core, a web page isn't a collection of "GUI widgets", rather it's just a memory structure that gets drawn on the screen every time paint() is called.

The program knows the location, and the scroll offset and just draws things in that location (such as the strings that make up this page)

Remember, widgets are just abstractions used to make "GUI" programming simpler. but using widgets isn't a very efficient way to render a web page, so it's just done with low level graphics calls.

I tried browsing the Firefox source code, but that is WAY to low level for me to grasp.

That's because it's all done at a low level.

Of course, on some pages widgets are used for things like text boxes and other controls. In that case, the widgets can be moved to the correct coordinates programmically.

I don't know what else to tell you, I've written layout engines in java (not for HTML, but a similar though simpler XML system for doing layout).

It's not very hard, the only math you need is addition and subtraction.

Learn more about the Graphics2D class.
posted by delmoi at 3:36 PM on December 17, 2006

Yeah, you're not going to get very far if you try to understand it as being anything like most Java or web language programming. A web browser is really a surprisingly low-level thing, at least compared to most apps you see (the same applies to word processors). In many ways old pre-GUI languages give you a better feel for this sort of things than modern, widgety ones do.
posted by reklaw at 4:19 PM on December 17, 2006

delmoi/reklaw:

Where might I find a theoretical overview of graphical programming. Bonus points if it starts out language independent, but also has examples in C#/Java.
posted by SirStan at 4:42 PM on December 17, 2006

Dave Hyatt, one of the Safari programmers, wrote a high-level overview of the steps involved in rendering a web page.
posted by boaz at 8:13 PM on December 17, 2006

At the end of the day it just amounts to decomposing the tree structure of the HTML into a list of primitives along the lines of "output text string using font F with color C at position X, Y" and "display image rectange at position X, Y". To scroll you just change the logical viewport, clear the screen, and repaint everything with some value added or subtracted from Y. And so on...
posted by Rhomboid at 2:13 AM on December 18, 2006

SirStan: It's not that difficult at all, you don't even need a book, and most graphics APIs are very similar.

In java, the Graphics2D class has functions like "drawString()" which draws a string on screen at the cordinates you specify. you can set the font with the setFont() function. you can set the color with the setColor() function. You can draw rectangles with functions like fillRect(). And you can draw downloaded images with drawImage().

Theoretically, you could implement a web browser with just those five graphics functions. I read this book a loooooooooooong time ago, but it's extremely low level, and written for DOS programmers.

this book got good reviews on amazon, but it covers a lot more then you need
posted by delmoi at 9:08 AM on December 18, 2006

Actually this book might be even better for you...
posted by delmoi at 9:14 AM on December 18, 2006

Web browsers are all text, pictures, lines, and maybe the occasional slightly complex pixel pattern. If you can draw those things onto a window canvas at the right co-ordinates (which involves little more complicated than decoding pictures and perhaps a font or two -- almost all languages will have libraries for such things), then you can make a web browser.

Visual Basic could do this. Seriously.

If you wanted to do something relatively easy to get started, you could try writing a browser that only works on strict XHTML. Then you could run any old XML parser on it to get your DOM, and pretty quickly lay some stuff out on your page without having to write some monster parser first. It might be a good exercise in focusing on the graphics-layout element of this.
posted by reklaw at 12:22 PM on December 18, 2006