What determines the order and manner in which items on a web-page load into and are displayed on my computer when I surf the Internet?
Most of the time I surf in text-only mode because it’s faster and because it prevents me from having to look at all those banner ads and annoying animations (god, I hate those!). So, when I go to a web-page, I get the properly formatted page with all the text shown and with “placeholders” where the images would be. If I decide to click on the “Images” button in order to load the images for that page, there are at least three things that could happen:
(1) The formatted text will remain on my screen, and the images will simply load in, replacing the placeholders one at a time until they’re all in.
(2) Everything on my screen will be momentarily “erased.” Then the formatted text will fall into place, and then the images will load in, one at a time.
(3) Everything will be erased, and it will remain this way until, finally, all the formatted text and all the images are dumped in at once. It’s like the machine is holding its breath while it gathers everything, and then it just lets loose.
Even if I have the browser preferences set to automatically load images, there seem to be the same – or similar – variations in how pages load and are displayed.
So why all the differences in loading sequence? Is it primarily determined by the way a given web-page is designed or its code is written? Do people who design web-sites consciously make them so that there will be a particular loading sequence? Or, is it more due to how my browser decides to process the information it receives (depending, say, on the size or complexity of the page it’s loading)? Or is it a combination of both? Just curious.
If the webpage designer doesn’t include the image sizes in the text, the placeholders will not be the appropriate size, and the browser will have to reformat the image.
And this, I presume, would mean that the browser would have to load all of the images and determine their sizes before being able to format the page, therefore giving me result #3?
It’s not entirely deterministic - on operating systems which support it, most browsers use multiple threads to load images, since this is an obvious bottleneck, so you essentially have a race going on between your arriving images. As well as being able to pluck some of them from cache.
Since the images are referenced by things like IMG tags in the HTML for your “text” page, the browser can begin laying out the page without the images. In some cases, the HTML specified the size for the image, so the layout engine knows how much space to allocate for it. In other cases, it has to wait until it has the image to see how big it is, and will have to rerender the page to accomodate it.
For instance, if you turn off images for these pages, you will notice that the placeholders for the images within the “Straight Dope” banner row are allocated less space than the images actually take. If you tell the browser to get the images, it has to redraw the page. The “Wally Memoriam” graphic may actually have a placeholder of the right size, since the size of that image is specified in its IMG tag.
There are many other HTML constructs which result in further requests. About the only thing that can be guaranteed is that it obviously has to get the referring HTML before the referred to things.
Layout engines are complex, and at this stage, VERY heavily optimized with respect to rendering things before all the information has arrived.
HTML itself is a layout language, and generally does not provide intentional control of the rendering process, although some web designers are aware of the way the popular browsers actually work, and take it into account. If a webpage author wishes to do sophisticated things with control of the browser display, they will use plugins, java applets (yuck!), or scripting solutions like javascript or vbscript. Javascript seems to be the right approach for a large class of things you want to do on the client end - field validation, popup menus, and the like.
Hey, thanks for the thorough reply, yabob. I feel enlightened.
But what I don’t get is why only some images have their sizes specified in the html, and some do not. It seems like it would be easy enough to do, given the right software. What would be the advantage to not specifying image sizes, especially if it’s only going to slow down or complicate the way your page loads?
The advantages are time and convenience. Most of the time graphics are just provided to the page designer as opposed to the page designer making them. Without loading them into some graphic tool, the exact sizes are unknown. Other pages are generated automatically and the size information isn’t available to the generation program.
HTML is a “layout” or “markup” language. The philosophical base for this is that is just describes how elements of documents relate to each other, not specific features of how they are to be rendered, which may be different in different environments. As it has developed, HTML tags have grown more and more rendering “hints” such as sizes, font types, colors, etc, as commercial web designers wished to have finer control over page appearance. But such things remain optional.
Specifying a size on an image is a pain if the thing is not a fixed image, but being generated as a dynamic reference - you not only have to substitute the image name, but fill in its correct size. Even with fixed images, should you happen to get it wrong, or it becomes wrong because you update the image, you will then get the image cropped by the browser. Nicer to let the layout engine do its job and figure out how to arrange it for you. As connections and machines get faster, it becomes less of an issue. Also, repeated images will be cached and the browser will already know their size.