When the content actually gets rendered on the browser screen?

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 ??