css animation动画完成后隐藏_CSS知识总结

本周学习了css布局、定位、动画，方老师解答了很多之前学习中遇到的疑惑，点拨了css学习方法和思路，受益匪浅！！

版权声明：资料来源「饥人谷」。

一、浏览器渲染原理

浏览器渲染过程：

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合并形成渲染树（render tree）
4. Layout布局（文档流、盒模型、计算大小和位置）
5. Paint绘制（绘制边框颜色、阴影、文字颜色等）
6. composite合成（根据层叠关系展示画面）

css性能优化：

一般通过js操作css进行样式更新，有三种样式更新方式：

三种样式更新方式

第一种布局、绘制、合成全走一遍，如删除某个元素div.remove()，其他元素relayout；

第二种跳过布局，如改变背景颜色；

第三种跳过布局和绘制，如添加transform属性。

当然渲染过程中浏览器走的步骤越少越好，所以在进行简单平移动画时，le