CSS知识总结

浏览器渲染原理

步骤

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

更新样式

• 一般使用JS来更新样式
• 三种更新方式
1. JS/CSS>样式>布局>绘制>合成

如div.remove()会触发当前元素消失，其他元素relayout



2. JS/CSS>样式>绘制>合成

如改变背景颜色,直接repaint+composite



3. JS/CSS>样式>合成

如改变transform，只需composite

CSS 动画的两种做法

transition过渡

• 作用
补充中间帧
• 语法
1. transition: 属性名 时长 过渡方式 延迟
   transition: left 200ms linear
   
2. 可以用逗号分隔两个不同属性
   transition: left 200ms,top 400ms
   
3. 可以用all代表所有属性
   transition: all 200ms
   
4. 过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

animation动画

• 使用
1. 声明关键帧：@keyframes
   • 写法
     1）使用 from to
     @keyframes slidein{ from{ transform: translateX(0%); } to{ tansform: translateX(100%); } }
     2）使用百分数
     @keyframes identifier{ 0%{top:0; left:0;} 30%{top: 50px;} 68%,72%{left:50px;} 100%{top: 100px; left:100px;} }
2. 添加动画
• 缩写语法
1. animation: 时长|过渡方式|延迟|次数|方向|填充方式|是否暂停|动画名;
   animation: 1s linear 3 reverse forwards xxx
   
2. 时长：1s或者1000ms
3. 过渡方式：跟transition取值一样，如linear
4. 次数：3或者2.4或者infinite
5. 方向：reverse | alternate| alternate-reverse
6. 填充方式：none| forwards | backwards | both
7. 是否暂停：paused | running
8. 以上所有属性都有对应的单独属性（参考MDN）

补充

CSS动画优化

• JS优化
使用requestAnimationFrames代替setTimeout或setInterval
• CSS优化
1. 使用will-change或translate
2. 使用transform代替left