页面渲染流程

原创已于 2022-09-01 00:32:35 修改 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2022-08-29 13:40:28 首次发布

本文详细介绍了网页的渲染过程，包括DOM树构建、样式结构体解析、呈现树生成及页面绘制，并通过一个找方块的小游戏实例展示了DOM操作对页面渲染的影响。

页面渲染过程

一、dom树

浏览器把html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树就是html结构，里面包含了所有的html tag，包括用JS添加的元素。

二、样式结构体

浏览器把所有样式(主要包括css和浏览器自带的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式。

三、呈现树 render tree

dom tree和样式结构体结合后构建呈现树(render tree),将每个节点与其对应的css样式结合。

四、绘制页面

一旦render tree构建完毕后，浏览器就根据render tree来绘制页面。

理解：

1.render tree可以粗犷的理解为加上了对应样式的dom树；

2. render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。（不占位置，不影响布局）

3.visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局，会占有位置。（占位置，影响布局）

再介绍两个知识点

重绘

重新绘画（页面的重新渲染），对页面进行操作，如：更换颜色、更换背景，不改变页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。

回流

当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。

注意

回流一定引起重绘，重绘不一定是因为发生了回流。

实例经验：

这是我学dom操作的第一天制作的一款找方块小游戏

点击开始，粉色盒子消失，在青色盒子里点击寻找，找到粉色盒子再次显示出来。

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方块去哪儿~</title>
    <style>
        #div2 {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            background-color: aqua;
            line-height: 400px;
            text-align: center;
            cursor: pointer;
            color: gray;
            border-radius: 20px;
        }

        #div1 {
            position: absolute;
            line-height: 100px;
            left: 0px;
            top: 0px;
            height: 100px;
            width: 100px;
            background-color: pink;
            border-radius: 20px;
            cursor: pointer;
            display: block;

        }
    </style>
</head>

<body>
    <div id="div2">
        方块去哪儿了~（鼠标点击此区域寻找）
        <div id="div1">点我开始</div>
    </div>

    <script>
        let div1 = document.getElementById('div1');

        div1.onclick = function () {
            if (getComputedStyle(div1, null).opacity == 0) {
                div1.style.opacity = '1';
                alert('被发现啦~')
            } else {
                let x = Math.floor(Math.random() * 300);
                let y = Math.floor(Math.random() * 300);
                div1.style.left = x + 'px';
                div1.style.top = y + 'px';
                div1.style.opacity = '0';
            }
        }

    </script>
</body>
</html>

实现思路：

1.浅绿色盒子里面有一个粉色盒子；

2.小盒子上写一个点击事件，可改变样式（相对于绿色盒子的位置，粉色盒子自身的显示与隐藏）

实现——点击改变粉色盒子位置

经典子绝父相，为浅绿色盒子设置相对定位，粉色盒子设置绝对定位，在粉色盒子的事件执行函数里，为粉色盒子设置定位的top和left(random产生两个随机数)，即可达到粉色盒子的位置随机。

实现——点击改变粉色盒子显示与隐藏

第一个想法就是通过display:none与display:block的改变实现。

依据这个思路实现时，发现盒子消失之后再也点不到了，浏览器检查，页面中也无法找到粉色盒子，好像这盒子消失了。。。

根据前面页面渲染流程中的知识，粉色盒子因为样式改变发生了回流，原先显示的粉色盒子，变成了display:none；回流后，这个盒子就不会用于呈现，即页面上没有这个元素了，所以在小时候去点击，是无论如何也点到粉色盒子的了

解决思路：

使用opacity，点击过后将盒子设为完全透明，达到盒子隐藏的目的，再次点击，将盒子设置为不透明，就达到了显示的目的。

这样处理的目的是，页面只发生重绘，没有改变布局，粉色盒子还是会绘制出来，但是因为是透明的，我们才观察不到它。