CSS动画制作
一、浏览器渲染原理
1.参考文章
- Google团队写的文章
-渲染树构建、布局及绘制
-渲染性能
-使用transform来实现动画
- 查看CSS各属性触发什么：CSSTriggers.com
2.浏览器渲染过程
步骤：
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一颗渲染树（render tree)
- Layout布局（文档流、盒模型、计算大小和位置）
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- Compose合成（根据层叠关系展示画面）
3.如何更新样式
- 一般我们用JS来更新样式
-比如div.style.background='red'
-比如div.style.display='none'
-比如div.classList.add('red')
-比如div.remove()直接删掉节点
- 三种不同的更新方式
第一种，全走
- div.remove()会触发当前消失，其他元素relayout;
第二种，跳过layout
- 改变背景颜色，直接repaint+composite;
第三种，跳过layout和paint
- 改变transform,只需composite
- 注意必须全屏查看效果，在iframe里看有问题
4.CSS动画优化
- 没什么技术含量
答案都在Google写的文章里
- JS优化
使用requestAnimationFrame代替setTimeout或setinterval
- CSS优化
使用will-change或translate
