display 和 visibility的区别

zmoon
668 阅读3分钟

基础

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

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

重绘repaint

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

回流reflow

  • 当render树中因为大小边距等问题发生改变而需要重建的过程
displayvisibility
不占位，点击不触发绑定事件占位，点击不触发绑定事件
引发重绘+回流引发重绘

浏览器的渲染流程

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

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

  • 渲染图层更像是一个纯二维的概念，无论其怎么层叠覆盖最终都归依于根层叠上下文。而复合图层则完全脱离根层叠上下文，相当于开辟新的位面。
层的分类
  • 渲染图层，是页面普通的文档流。我们虽然可以通过绝对定位，相对定位，浮动定位脱离文档流，但它仍然属于默认复合层(根层叠上下文)，共用同一个绘图上下文对象
  • 复合图层，又称图形层。它会单独分配系统资源，每个复合图层都有一个独立的绘图上下文对象

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

复合图层的创建标准
  • 3D转换：translate3d，translateZ依此类推；
  • <video>，<canvas>和<iframe>元件;
  • transform和opacity经由Element.animate();
  • transform和opacity经由СSS过渡和动画;
  • 有合成层后代同时本身 fixed 定位
  • will-change;
  • 拥有加速 CSS 过滤器的元素filter;
  • 元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)
  • 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)

文档流

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

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

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

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

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

    • 到达最右端时，发现空间不够时不会截取自己（字不会断开）注意与内联的区别
脱离文档流
  • float
  • position: absolute / fixed
avatar
文章
阅读
粉丝