I have read at https://web.dev/howbrowserswork/#The_main_flow that printing the website is a gradual process, and will not wait before the DOM/CSS/RENDER/LAYOUT tree is parsed completely.
It's important to understand that this is a gradual process. For a better user experience, the rendering engine will try to display contents on the screen as soon as possible. It will not wait until all HTML is parsed before starting to build and layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the content that keeps coming from the network.
I tried to find an example to test it. For the following HTML, I would expect that the green box is printed first, then JS is blocked and next the yellow box is rendered:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div style="height:300px;width:700px;background-color:green"></div>
<script>
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
console.log("Hello");
sleep(2000);
console.log("World!");
</script>
<div style="height:300px;width:700px;background-color:yellow"></div>
</body>
</html>
However, testing this on Chrome and Firefox, nothing will be shown and after two seconds the green and a yellow box will show at the same time.
Why is my example not printing as a gradual process? Can you provide an example of a gradual printing process?
as others have said you are blocking rendering with that code. the better method for what you are trying to accomplish, may be to set a timeout in javascript, then add the element you want added after the delay by manipulating the DOM.
another even better method might be to use CSS to show a hidden element after a set time using CSS animations.
yet another option would be to use a class to hide the element from rendering
display: none, then remove that class, or add another class that changes display, using javascript and a timeout.