At what point in the render process of a web page can we interact with that page

Question

I'd like to measure to distinct user experience points during the rendering of an HTML page:

1. Point which user sees the first painting of the page
2. Point at which user can interact with the page - meaning sees 75% of it or can actually register a button click or link click

I am pretty certain these UX interactions can start before the HTML code is fully rendered, so would that instance be the JS func "OnLoad" or some other distinct measureable value/function?

If it helps, we can even narrow the answer down to WebKit based browsers.

Answer 1

OnLoad is a tricky thing to implement. I would suggest using a prepackaged solution like jQuerys $(document).ready(function(){}) in order to maintain cross browser compatibility.

Answer 2

Not sure if this is what you're looking for, but if you just want to know when the DOM tree is loaded (which strikes me as a decent approximation of 'when we can interact with the page'), you could try the JavaScript event DOMContentReady / 'domReady'.