-1

here is simple example. i taught that script below the body-tag doesn't block the rendering phase. such as making domTree, RenderTree, and painting.

So, i thought that firstly, the yellow background will be shown quickly, and then after about 5sec, javascript will change the domTree(CSSOM) and then change to red background .

but actually, it blocked during 5sec and then, red-background was shown
i wasn't able to see yellow background first.
why the script block the Render phase?

<style>
.section1 {
    background-color:yellow;
    width:100wh;
    height:100vh;
}

</style>
<body>
    <div class="container">
        <section class="section1"> // 
        
        </section>
    </div>
    
    <script>
        const n = 5000000000 // on my computer it takes about 5sec 
        for(let i= 0 ; i<n; i++){
            
        }
        document.querySelector('.section1').style.backgroundColor = "red"
    </script>

</body>
minwoo
  • 21
  • 1
  • 6

1 Answers1

0

First of all, background-color:'yellow'; is apparently invalid when I tried running your code. It should work after removing the quotations, so it should be like this: background-color:yellow;

Second of all, you should read up on setTimeout(). You can specify the time of delay before executing your code. For example, you can do:

setTimeout(()=>{
    document.querySelector('.section1').style.backgroundColor = "red";
}, 5000); //5000 is 5 seconds

for clarification, your script is already at the bottom of the page and below the div it will manipulate. by the time the browser reaches the <script> tags, it would have already loaded your divs! to iterate: setTimeout will only run AFTER your content is loaded. it will NOT run before your content is loaded.

If you really really want to make sure that the DOM is loaded beforehand, then you can do:

document.addEventListener("DOMContentLoaded", function(event) { 
    setTimeout(()=>{
        document.querySelector('.section1').style.backgroundColor = "red";
    }, 5000);
});

this will check if the DOM is loaded before executing the content of the script.

Another clarification, the script does not block any rendering. In truth, looping through 5000000000 would be almost instantaneous in any good computer.

Try modifying your code and see what happens :)

First Last
  • 76
  • 4
  • thanks for answer , but i Intentionally don't use setTimeout Function because, many tech blogs and books are saying ... "script's position is very important so place it below the body tag, after Dom parsing" this is the point. after making dom-tree, my script will run. if then, the browser should paint render-tree in parallel while my javascript is running but the script still blocking rendering – minwoo Sep 15 '22 at 12:36
  • @minwoo check my edit :) – First Last Sep 15 '22 at 13:11
  • Thx.. but similar question was here https://stackoverflow.com/questions/35500115/dom-loading-is-blocked-from-afterwards-script i think this guy asks same thing.. – minwoo Sep 15 '22 at 14:32