css层叠上下文和浏览器渲染过程

753 阅读3分钟

文章以一下几个知识点展开:

  • 层叠上下文
  • 浏览器渲染基本原理

需要提前声明的是css世界中没有为什么。要做的就是用实践来看清这个世界。

1. 层叠上下文

概念

将HTML比做一个三维的结构,众 HTML元素基于其元素属性按照优先级顺序占据这个空间。

z-index

在了解层叠上下文之前需要了解一下z-index这个属性

z-index可以将它理解为空间直角坐标系中的z轴,值越优先级越高。它可以用来设置元素在HTML中占据这个空间的优先级。

而在HTML的DOM树中每一个DOM元素都可以有拥有一个属于自己的三维结构,在这个属于DOM自身的世界里所有的子原始的优先级都只作用在当前世界,也就是说只能于当前世界中的其他元素相比。

实验:如上实例中.own-world元素由于z-index的等级没有.else-world高,所以就算子元素拥有z-index:1000优先级也不会超过.else-world,因为那只不过是在own-world的小世界中拥有较高的优先级。这就是层叠上下文

就像你在家里你想干嘛干嘛在家里也许你就是最大的,而一出社会在残忍的现实面前还是不得不低头。

回到正题那有那先情况会出现这种小世界呢(什么情况下会出现层叠上下文)。在MDN文档中就纤细的介绍了所有的情况。


浏览器渲染基本原理

浏览器渲染的几大基本步骤

  1. 根据HTML构建HTML树(DOM)
  2. 根据CSS构建CSS树(CSSDOM)
  3. 将两颗树合并成一颗渲染树(render tree)
  4. Layout布局
  5. Paint绘制
  6. Compose合成

其中layout 和 paint步骤是可以省略的,可以以此来提升动画性能。

之前做过一个类似飞机大战js小练习,当时也不太懂,就用了纯js 定时器来做元素的移动,页面上移动的元素一多,就变得非常卡。后来适用css动画做效果就好很多。当时也不明白为什么。

原来使用js的定时器每触发一次浏览器就会对在新的位置重新对layout渲染并合成。这样让我切身的体会到给浏览器照成了多大的压力。

而使用css transform就可以直接跳过每次layout和paint的步骤,只在最后终点位置合成。极大的减少了浏览器渲染的负担。

如果你想知道哪些属性要paint哪些属性要layout可以阅读一下csstriggers.com/网站。

动画优化

css优化

使用will-change或translate。 可以参考一下google写的css优化

js优化

在js动画就不要用settimeout写了使用requestAnimationFrame来代替。

总结

  1. 什么时候会出现层叠上下文
  2. 出现了层叠上下文之后每个上下文都有自己的优先级
  3. 浏览器的layout渲染和paint渲染
  4. 如何优化动画