0

what i understand is that the browser combines DOM and CSSOM together into one renderTree and this is what actually gets rendered on the screen?

Now if i have a JS file it will block the constructing of the DOM but i can avoid this by using the defer attribute to make the browser complete the DOM then download and execut the JS files.

Now my question is that in this case does the browser render on the screen the renderTree as soon as it is completed even if i use defer and no JS files ready yet ?? or it just wait for the DOM to be constructed but it will also wait for the JS files to get downloaded and executed then render the the renderTree on the screen does not matter if i use defer or not it will always wait for everything to be ready to render the content on the screen ??

Muhammad Hossam
  • 55
  • 9
  • [Does this answer your question?](https://stackoverflow.com/questions/35966297/what-is-the-difference-between-dom-parsing-loading-rendering-ready/35966477#35966477) DOM parsing is not blocked by having JavaScript files as those files are included in the HTML with HTML elements, so it's really just the DOM parser that you need to worry about here. – Scott Marcus Feb 25 '21 at 20:46
  • @ScottMarcus i read it but i am really asking about when the content gets rendered on the screen as soon as the DOM is ready ? or the rendertree(ccsom+dom) or when all the things are ready dom , cssom and js files ? – Muhammad Hossam Feb 25 '21 at 21:12
  • My linked post answers that *"As the browser is parsing the HTML, it also "renders" that content to the screen, meaning that space in the document is allocated for the element and its content and that content is displayed. This doesn't happen AFTER all parsing is complete, the rendering engine works at the same time the parsing engine is working, just one step behind it - - if the parsing engine parses a table-row, for example, the rendering engine will then render it."* – Scott Marcus Feb 25 '21 at 21:17
  • The DOM exists at every point during the parsing of the HTML page, so there's no moment when "the DOM is ready", just one where the HTML page has been completely parsed into the DOM. Browsers are allowed to render the DOM as it's being constructed, but they usually wait a bit in the previous page before the navigation so you don't see an empty page while the connection is established and the encoding prescanning takes place. – Andreu Botella Feb 25 '21 at 21:20
  • @ScottMarcus the browser rendering the dom without knowing any layout or css yet ? i read many articles say that it have to construct the render tree first ? – Muhammad Hossam Feb 25 '21 at 21:21
  • @AndreuBotella Where is this from as it's not correct? *The DOM exists at every point during the parsing of the HTML page, so there's no moment when "the DOM is ready"* – Scott Marcus Feb 25 '21 at 21:23
  • @ScottMarcus The HTML spec has the Document object being created and initialized before the parser starts (https://html.spec.whatwg.org/multipage/browsing-the-web.html#read-html). The connection has been established at this point, though (I misremembered that). Of course, the spec might not match what browsers actually do. – Andreu Botella Feb 25 '21 at 21:30
  • @AndreuBotella It's the part where you say *so there's no moment when "the DOM is ready"* which isn't really true. While a DOM exists as soon as HTML content begins being parsed, there is a moment when all of the DOM has been parsed, the `DOMContentLoaded` event, which signifies that all of the DOM is ready to be accessed. – Scott Marcus Feb 25 '21 at 21:32
  • @ScottMarcus okay this makes sense to me as i think i saw this before. Thanks Scott for help. if you please can recommend me any reliable material for this topic to understand more deeply about this process. – Muhammad Hossam Feb 25 '21 at 21:32
  • @AndreuBotella Thanks for help Andreu. it will be good from you if you recommend me some reliable material for this topic. – Muhammad Hossam Feb 25 '21 at 21:35
  • @ScottMarcus Fair enough, but the `DOMContentLoaded` event doesn't represent a change of state in the DOM but a change of state in the parser. Saying "there's no moment where the DOM is ready" is a fair response to a misconception about the page only being rendered when "the DOM is ready", I think. – Andreu Botella Feb 25 '21 at 21:37
  • @AndreuBotella I guess. I've really not run into anyone who thinks that the DOM doesn't render until it's ready (except brand newbies ;) ). That's really not a widespread misconception. – Scott Marcus Feb 25 '21 at 21:39
  • @ScottMarcus is there anything can make render blocking or parse blocking or parsing rendering the dom always working does not matter css or js files are getting downloaded or parsed ? – Muhammad Hossam Feb 25 '21 at 21:54

0 Answers0