题目① display 和 visibility的区别

1. 基础

display	visibility
不占位，点击不触发绑定事件	占位，点击不触发绑定事件

2. dom树的改变，引发回流重绘问题

2.1 重绘repaint

• 当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程

2.2 回流reflow

• 当render树中因为大小边距等问题发生改变而需要重建的过程

display	visibility
不占位，点击不触发绑定事件	占位，点击不触发绑定事件
引发重绘+回流	引发重绘

3. 浏览器的渲染流程

• 解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

1. 渲染引擎解析文件

   • 渲染引擎解析html文档，将html包含的元素转化为一个个dom，并构建为一个 dom树

   • 渲染引擎解析来自css文件或者行内样式数据，构建为一个 render树

2. 布局

   • 渲染引擎会给每个dom元素安排精确的坐标，并根据坐标在屏幕上显示

3. 遍历渲染树

   • ui bankend层会将一个个dom元素在屏幕上绘画出来

这是一个渐进的过程，边下载边解析，边解析边渲染

• 渲染引擎是单线程工作的，除了网络操作，其他所有的都是单线程的

• 浏览器的主线程是一个无限的循环事件，而且一直保持进程alive，一直等着各种事件，并处理他们

概念

• DOM Tree：浏览器将HTML解析成树形的数据结构

• CSS Rule Tree：浏览器将CSS解析成树形的数据结构

• Render Tree：DOM和CSS合并后生成Render Tree【包括visibility: hidden的节点】

• layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置

• painting：按照算出来的规则，通过显卡，把内容画到屏幕上

4. 复合图层与渲染图层的区别

• 渲染图层更像是一个纯二维的概念，无论其怎么层叠覆盖最终都归依于根层叠上下文。而复合图层则完全脱离根层叠上下文，相当于开辟新的位面。

4.1 层的分类

• 渲染图层，是页面普通的文档流。我们虽然可以通过绝对定位，相对定位，浮动定位脱离文档流，但它仍然属于默认复合层(根层叠上下文)，共用同一个绘图上下文对象

• 复合图层，又称图形层。它会单独分配系统资源，每个复合图层都有一个独立的绘图上下文对象

一般一个元素开启硬件加速后会变成复合图层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能

4.2 复合图层的创建标准

• 3D转换：translate3d，translateZ依此类推；

• <video>，<canvas>和<iframe>元件;

• transform和opacity经由Element.animate();

• transform和opacity经由СSS过渡和动画;

• 有合成层后代同时本身 fixed 定位

• will-change;

• 拥有加速 CSS 过滤器的元素filter;

• 元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

• 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)

5. 文档流

5.1 基本概念（文档的流动方向）

• 内联元素（inline）：从左到右，到达最右边才会换行

  • 当内联元素<span>到达最右端时，发现空间不够会截取自己（字会断开）

• 块级元素（block）：从上到下，每一个都另起一行

• 内联块（inline-block）：也是从左到右

  • 到达最右端时，发现空间不够时不会截取自己（字不会断开）注意与内联的区别

5.2 脱离文档流

• float
• position: absolute / fixed