display 和 visibility的区别

题目：display 和 visibility的区别

解答

基础

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

重绘repaint

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

回流reflow

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

浏览器的渲染流程

• 解析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：按照算出来的规则，通过显卡，把内容画到屏幕上

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

层的分类

• 渲染图层，是页面普通的文档流。我们虽然可以通过绝对定位，相对定位，浮动定位脱离文档流，但它仍然属于默认复合层(根层叠上下文)，共用同一个绘图上下文对象
• 复合图层，又称图形层。它会单独分配系统资源，每个复合图层都有一个独立的绘图上下文对象

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

文档流

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

• 内联元素（inline）：从左到右，到达最右边才会换行
  • 当内联元素到达最右端时，发现空间不够会截取自己（字会断开）
• 块级元素（block）：从上到下，每一个都另起一行
• 内联块（inline-block）：也是从左到右
  • 到达最右端时，发现空间不够时不会截取自己（字不会断开）注意与内联的区别

脱离文档流

• float
• position: absolute / fixed