There is not really an official JavasScript documentation, but let's take:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
About HTMLElement.offsetHeight they are saying:
Typically, an element's offsetHeight is a measurement in pixels of the element's CSS height, including border, padding and the element's horizontal scrollbar (if present, if rendered).
I know the value of offsetHeight can be a bit different in different browsers, but that's not my point. My point is about:
if rendered
I did some tests, but i think this is wrong and incorrect. In my opinion it has to be: "if parsed" and not "if rendered". On the internet i see a lot of people who are confusing those terms, while they are two different things in my opinion.
rendering = showing content in the browser
parsing = building the DOM tree
See this test:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
<div id="result"></div>
<div id="container">
One line of html code<br />
One line of html code<br />
One line of html code<br />
One line of html code<br />
One line of html code<br />
One line of html code<br />
One line of html code<br />
One line of html code<br />
One line of html code<br />
One line of html code<br />
</div>
<script>
// What is the offsetHeight of the html element "container" at this point?
var elmContainer = document.getElementById( 'container' );
var elmResult = document.getElementById( 'result' );
elmResult.innerHTML = 'Container offsetHeight is ' + elmContainer.offsetHeight + ' px';
// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 5000 );
</script>
</body>
</html>
In Chrome after 5 seconds it shows:
Container offsetHeight is 180 px
Followed by the lines of html code
In firefox after 5 seconds:
Container offsetHeight is 200 px
Followed by the lines of html code
The documentation is saying that it will only measure the height IF RENDERED. But when starting executing the javascript delay of 5 seconds, the browser is not showing anything on the screen yet. So the HTMLElement has not been rendered yet! Parsing that same html is already done, because "parsing html" and "executing javascript" have synchronous behavior.
So if i had to believe the documentation, i would expect offsetHeight is empty or zero. Am i making some mistake or is the documentation indeed incorrect?
p.s. It could be that "if present, if rendered" was only referring to the horizontal scrollbar, but i did some other tests and if there is a scrollbar it will be calculated already before the browser showed anything on the screen (before rendering). So in a case like that we will have the same story as above.
p.s. Maybe it looks like an unimportant detail, but everywhere on the internet i'm reading that you can use offsetHeight to measure the height of an element showed on your screen. So i thought i can use it to follow the rendering process of a browser. But while the element was still rendering, the value of offsetHeight had already the value that i would have after finishing rendering.
After reading some more about it, i think i can give an answer to my own question now.
Mozilla is just not consistent in using terms / definitions the right way.
I made a scheme to make it more clear, let:
See: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ , they are saying:
So when some parsed html is in the "render tree" the height is already known. This does not mean that it's already displayed on the screen.
So with "IF RENDERED" ... the documentation of Mozilla is saying it wrong. That would mean that their definition of "done with rendering", is that it's in the "render tree" (and not necessary already on the screen). They could define it like that, but then they have to be consistent in that. That's not the case. Elsewhere they are often talking about things like "if rendered" when the content has been displayed on the screen.