页面渲染流程_页面渲染过程
赞
踩
页面渲染过程
一、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，点击过后将盒子设为完全透明，达到盒子隐藏的目的，再次点击，将盒子设置为不透明，就达到了显示的目的。
这样处理的目的是，页面只发生重绘，没有改变布局，粉色盒子还是会绘制出来，但是因为是透明的，我们才观察不到它。
（当然还会有其他很多方法）
