上个星期去baidu二面面试,第一题就有问到这样问题: transform与position:absolute 有什么区别? 回家后查资料发现这道题目其实不简单啊,涉及到重排、重绘、硬件加速等网页优化的知识。
⼀、问题背景
过去⼏年,我们常常会听说硬件加速给移动端带来了巨⼤的体验提升,但是即使对于很多经验丰富的开发者来说,恐怕对其背后的⼯作
原理也是模棱两可,更不要合理地将其运⽤到⽹页的动画效果中了。
1、position + top/left 的效果
下⾯让我们来看⼀个动画效果,在该动画中包含了⼏个堆叠在⼀起的球并让它们沿相同路径移动。最简单的⽅式就是实时调整它们的
left 和 top 属性,使⽤ css 动画实现。
<style>
html,
body {
width: 100%;
height: 100%;
}
.ball-running {
animation: run-around 4s infinite;
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
@keyframes run-around {
0%: {
top: 0;
left: 0;
}
25% {
top: 0;
left: 200px;
}
50% {
top: 200px;
left: 200px;
}
75% {
top: 200px;