Question

I’ve been away from web design/development for a long, long now and have recently begun to get back into it. I started off doing things just to make them work, and now that I’m getting back into it, I would like to understand things a bit more clearly – including when the DOM is requested by the browser to when it is fully loaded, and the difference between script placement at the top and bottom of a page.

I realise that this is more a post for http://doctype.com, but I figured I would get a more technical answer from here. I would also like to have made this a community wiki, but I don’t have enough points…as yet.

Please feel free to correct me here – My questions/assumptions:

1. When the browser makes a request for the page, the server responds with a Document Object that contains the hierarchy/order of scripts, css and html – correct?
2. Once received, the browser then builds a Document Object Tree – is this when the DOM is ready or when it starts rendering elements on the page in a browser?
3. In that regard, what is the difference between “when the DOM is loaded” and “when the DOM is ready”?
4. Is there any difference between placing (java)script at the top (in the head tag) or at the bottom (before </body> tag)?
5. Is there an DOM event that fires when all assets (css, images, javascripts, etc) are fully loaded by the browser? I ask this as sometimes I might have a background image still being loaded by the browser, and well before it can complete, my Javascript animations already start executing.

Thank you for taking the time to read this, and i look forward to your responses!

Answer 1

1. Browsers make conditional and unconditional requests to the server. (The Server Responds to Inquiry and the Client Renders responses…there is a limited throughput of information to and from the user (Privacy Settings & Etc.)

Unconditional Requests:

An unconditional request is made when
the client browser does not have a
cached copy of the resource available
locally. In this case, the server is
expected to return the resource with a
HTTP/200 OK response. If the
response’s headers permit it, the
client may cache this response in
order to reuse it later.
If the browser later needs a resource
which is in the local cache, that
resource’s headers are checked to
determine if the cached copy is still
fresh. If the cached copy is fresh,
then no network request is made and
the client simply reuses the resource
from the cache.

Conditional Requests:

If the browser later needs a resource
which is in the cache, but that
response is expired (older than its
max-age or past the Expires date),
then the client will make a
conditional request to the server to
determine whether the previously
cached response is still valid and
should be reused. The conditional
request contains an If-Modified-Since
and/or If-None-Match header that
indicates to the server what version
of the content the browser already has
in its cache. The server can indicate
that the client’s copy is still fresh
by returning HTTP/304 Not Modified
headers with no body, or it can
indicate that the client’s copy is
stale by returning a HTTP/200 OK
response with the new version of the
resource.

2. The Document Object Model – is a model of information as it pertains to a browsers request/response. In many ways ECMA/Javascript was born as a direct relation accessing page elements and became the default DOM Library solution for many of the browser objects (document.frm etc). However, implementation and support is non-unified and sparse across all browsers.

3. Essentially, the DOM Being loaded is just a definition to say that the page is being rendered and the content has/is being invoked. This is something that cannot be counted on in regards to accessing DOM Object so, it is unfavorable method of interaction. Generally, you should use the ready status which means that the DOM is in a ready and waiting state of request.

4. Yep loads of difference – execution order of the client side code means where it will be loaded. Load with the entire page object or load after all content.

5. Yes and No. 🙂 No Real Guarantee but, with javascript/jquery used you can use the onload event of the body to identify all elements of the page successfully loaded. This is a trick question btw. No real answer to my knowledge unless, I am mistaken to what you asked…