个人学习使用
浏览器渲染原理
了解浏览器的渲染原理,首先要了解浏览器渲染的过程,步骤如下:
1. 构建HTML树(DOM)
2. 构建CSS树(CSSOM)
3. 将DOM和CSSOM合并成渲染树(render tree)
4. layout布局渲染
5. paint绘制渲染
6. compose合成
并不是每次渲染都会严格按照这个步骤执行,layout布局,paint绘制为可选执行项。
有三种渲染模式
1. JS/CSS>样式>布局>绘制>合成
2. JS/CSS>样式>绘制>合成
3. JS/CSS>样式>合成
触发第一种,如div.remove();
触发第二种,如改变颜色;
触发第三种,如使用transform
CSS 动画的两种做法(transition 和 animation)
css动画有两种基本用法,一种是用transform绘制结束时样式,再用transition来控制变化的时间和曲线。
另一种是使用animation,用@keyframes创建一个动画,并设置关键帧,如
div
{
animation:xxx 5s infinite;
}
@feyframes xxx{
0%{ top:0 left:0 }
30% { top:10px}
60%{ left:30PX}
90%,100%{top:50px, left: 20px}
}
或者
@keyframes xxx
{
from {left:0px;}
to {left:200px;}
}
其他任何你想写的。
css 动画中的一些优化方式:
使用requestAnimationFrame代替setTimeout或setinterval
使用will-change或translate
inline元素不支持transform,需要先转化为block元素
不是所有属性支持元素过渡
display:none -> block 不支持,可以改为visibility:hidden -> visible