文章以一下几个知识点展开:
- 层叠上下文
- 浏览器渲染基本原理
需要提前声明的是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文档中就纤细的介绍了所有的情况。
浏览器渲染基本原理
浏览器渲染的几大基本步骤
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSDOM)
- 将两颗树合并成一颗渲染树(render tree)
- Layout布局
- Paint绘制
- 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来代替。
总结
- 什么时候会出现层叠上下文
- 出现了层叠上下文之后每个上下文都有自己的优先级
- 浏览器的layout渲染和paint渲染
- 如何优化动画