Which elements will load first in an html page?

Question

I want to know which elements (html tags, scripts, styles, images) will load first when opening a web page?

Can anybody help me? Thanks in advance.

Answer 1

There is no standard way; browsers are free to implement this in any way they like.

If you want to know how your browser does it, use a tool like Firebug, Chrome's Developer Tools or Safari Inspector. They can show the network traffic and in which order elements are downloaded.

Usually, the download order is the same as in the HTML document but browsers can open more than a single connection to a server. In that case, it might send 2 or 5 requests in document order but the server can respond in arbitrary order. Also some parts might be loaded from cache.

Answer 2

HTML pages are interpreted on the fly and read in their entirety from top to bottom - so, the first elements will load first, the last last.

For instance, if you place a script at the top of the body then it will be executed prior to any elements within the body loading; whereas if you place is at the end of the body, all elements within the body will load then the script will execute.

The order of loading for external sources such as scripts and images, though, might differ from browser to browser (while for the most part following the same conventions) - the idea is that connections will be open to request these resources and then things like size, speed and latency come into question - and these are most often still sequential and blocking.

Answer 3

The html will load first obviously as this instructs the browser on the extended requirements: images, scripts, external stylesheets etc

After that, the load order is pretty random - multiple connections will be initiated by most browsers and the order in which they return cannot be predicted.