In-depth browser rendering principle - browser rendering DOM process

When visiting a website, html needs to be loaded. A complete html structure includes: dom tree, document, image and media resources, style css resources and script js resources. Then we ask a question

How does the browser load (render) html?

Let's see what the following html code pops up when it is rendered? And pay attention to when the picture came out?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
<script>
    var box1 = document.getElementById('box')
    alert("First alert: " + box1)
    window.onload = function(){
        var box2 = document.getElementById('box')
        alert("Second alert: " + box2)
    }
</script>
</head>
<body>
    <div id="box">
        <h1>Test code</h1>
        <img src="img/logo.png" alt="">
    </div>
<script>
    var box3 = document.getElementById('box')
    alert("The third alert: " + box3)
    document.addEventListener('DOMContentLoaded', function(){
        var box4 = document.getElementById('box')
        alert("Fourth alert: " + box4)
    }, false)
</script>
</body>
</html>

// The popup order is

first alert: null

Third alert: [object HTMLDivElement]

Fourth alert: [object HTMLDivElement]

Second alert: [object HTMLDivElement]

When you open the browser for the first time, if you pay attention, 1, 3 will pop up first, then pictures and 4 will pop up, and finally 2 will pop up. If you don't know much about browser rendering, you may be very puzzled when you see such a result. Let me take you to the three questions we mentioned above.

How does the browser load (render) html?

When the browser loads HTML, it renders from top to bottom. The specific steps are as follows:

(1) Parse the HTML structure.

(2) Load external script and style sheet files.

(3) Parse and execute script code.

(4) Construct HTML DOM model. //js:DOMContentLoaded; jq:ready

(5) Load external files such as pictures.

(6) The page is loaded. //js:onload; jq:load

Pop-up 1 and 3 can be seen from top to bottom. The first pop-up is null, indicating that the DOM has not been rendered and the corresponding label cannot be found. The third time it can pop up normally is the DOM object, indicating that the DOM tree has been loaded and the corresponding tag can be found. The second and fourth time is to add some events to trigger the corresponding event execution during the DOM rendering process. It can be seen from the pop-up content and sequence that DOMContentLoaded is triggered after the DOM structure is loaded. After that, a picture appeared, and finally the second one popped up, indicating that onload is only displayed after the page resources (including images, script files, CSS files, etc.) are loaded. Through such a small example, I have thoroughly mastered the whole process of browser loading html. The implementation of ready and load in jquery is also realized by encapsulating DOMContentLoaded and onload, and he has done a layer of compatibility processing.

The difference between the events DOMContentLoaded and load:

①DOMContentLoaded is triggered after the DOM structure is loaded;

②load is a pop-up that pops up after the page resources (including images, script files, CSS files, etc.) are loaded

In-depth browser rendering principle - browser rendering DOM process

Guess you like