浏览器渲染原理

浏览器渲染过程包括以下几个环节：

根据HTML绘制HTML树（DOM）
根据CSS绘制CSS树（CSSOM）
将两棵树合成为渲染树（render tree）
layout布局（文档流、盒模型、计算大小和位置）
paint绘制（边框、颜色、文字颜色、阴影）
compose合成

改变样式

一般来说，我们使用JavaScript实现一些视觉变化的效果，然后通过其他像素至屏幕管道中的关键点实现最后的效果。不一定每一帧都会经过管道的每一个部分的处理。通常有三种更新方式：

JS/CSS>样式>布局>绘制>合成
JS/CSS>样式>绘制>合成
JS/CSS>样式>合成

每个属性的触发的流程不同，可查询网站：csstriggers.com/

CSS的两种做法

tansform

四个常见功能：

translate(位移)

translateX(<length|percentage>)
translateY(<length|percentage>)
translate(<length-percentage>,<length-percentage>?)
translateZ(<length|percentage>) 父容器persperctve

scale（缩放）

scaleX(<number>)
scaleY(<number>)
scale(<number>,<number>?)

rotate（旋转）

rotate([<angel>|<zero>])(2D平面)
rotateX([<angel>|<zero>])绕X轴旋转
rotateY([<angel>|<zero>])绕Y轴旋转
rotateZ([<angel>|<zero>])绕Z轴旋转

skew（倾斜）

skewX([<angel>|<zero>])
skewY([<angel>|<zero>])
skew([<angel>|<zero>],[<angel>|<zero>]?)

组合使用

transform：scale（1.2） translate(-100%);
transform: none；取消所有

transition 补充中间帧

语法：transitiom:属性名时长过渡方式延迟

transition: left 200ms linear

animation

添加关键时间节点，使动画可以在中间点实现再次变化。

语法

animation:时长|过渡方式|延迟|次数|方向|填充方式|是否暂停|动画名

时长：1s或1000ms
次数：整数（2）|小数（1.2）|infinite（无限循环）
方向： reverse|alternate|alternate-reverse
填充模式：none|forwards|backwards|both
是否暂停： paused| running

@keyframes写法

百分数

@keyframes identifier{
0% {scale(0.8)}
30% {scale(1)}
100% {scale(1.2)}
}

from to

@keyframes slidein{
  from{
    transform: translateX(0%)
   }
  to{
  transform: translateX(100%)
  }
}

CSS知识总结