一、浏览器渲染原理
1、浏览器渲染过程主要包括以下五步
-
浏览器将获取的HTML文档解析成DOM树。
-
处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
-
将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。
-
渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素。
-
将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。
2、具体过程如下图所示
3、渲染
网页生成的时候，至少会渲染一次，在用户访问的过程中，还会不断重新渲染，重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)
在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢，当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且CSS也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也可以认为这种情况下，CSS 也会暂停构建 DOM
二、CSS动画
CSS动画有两种做法，分别是transition和animation，这两个都是css3中新增的属性
1、transition简介
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
(1)2D位置移动
- translate(x,y):基于原来的位置，沿X轴平移，长度为x，沿Y轴平移，长度为y
transform：translate(x,y);
- translateX(x):基于原来的位置，沿X轴平移，长度为x
transform：translateX(x);
- translateY(y):基于原来的位置,沿Y轴平移，长度为y
transform：translateY(y);
(2)3D位置移动
- translate3d(x,y,z):基于原来的位置,沿X轴平移，长度为x,沿Y轴平移，长度为y,沿Z轴平移，长度为z
transform：translate3d(x,y,z);
- translateZ(z):基于原来的位置,沿Z轴平移，长度为z
transform：translateZ(z);
(3)2D缩放转换
- scale(x,y):基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数
transform：scale(x,y);
- scaleX(x):基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数
transform：scale(x);
- scaleY(y):基于原来的位置进行伸缩变换，其中y代表沿Y轴的伸缩倍数
transform：scale(y);
(4)3D缩放转换
- scale3d(x,y,z):基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数，z代表沿Z轴的伸缩倍数
transform：scale3d(x,y,z);
- scaleZ(z):基于原来的位置进行伸缩变换，其中z代表沿Z轴的伸缩倍数
transform：scaleZ(z);
(5)2D旋转
- rotate(angle):以图形的几何中心点为旋转中心，顺时针旋转角度为angle
transform：rotate(angle);
- rotateX(x):绕X轴方向旋转，顺时针旋转角度为angle
transform：rotateX(x);
- rotateZ(z):绕Y轴方向旋转，顺时针旋转角度为angle
transform：rotateZ(z);
(6)3D旋转
- rotate3d(x,y,z,angle):同时绕X,Y,Z轴三个方向旋转，顺时针旋转角度为angle
transform：rotate3d(x,y,z,angle);
- rotateZ(z):绕Z轴方向旋转，顺时针旋转角度为angle
transform：rotateZ(z);
2、animation 组成
(1)关键帧(@keyframes)
关键帧(keyframes) - 定义动画在不同阶段的状态。
动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。（可以类比音视频播放器）
css属性 - 就是css元素不同关键帧下的状态。
(2)动画属性
- 时间函数(animation-timing-function):动画的播放速度曲线。
可选配置参数为:
ease、ease-in、ease-out、ease-in-out、linear、cubic-bezier(number, number, number, number)
- 动画方向(animation-direction):表示CSS动画是否反向播放。
可选配置参数为:
single-animation-direction = normal | reverse | alternate | alternate-reverseanimation-direction: normal 正序播放
animation-direction: reverse 倒序播放
animation-direction: alternate 交替播放
animation-direction: alternate-reverse 反向交替播放
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal
- 动画延迟(animation-delay):定义动画是从何时开始播放，即动画应用在元素上的到动画开始的这段时间的长度。
默认值0s，表示动画在该元素上后立即开始执行。
该值以秒(s)或者毫秒(ms)为单位。
- 动画迭代次数(animation-iteration-count):定义我们的动画播放的次数。次数可以是1次或者无限循环。 默认值只播放一次。
single-animation-iteration-count = infinite | number
- 动画填充模式（animation-fill-mode）
animation-fill-mode是指给定动画播放前后应用元素的样式。
single-animation-fill-mode = **none **| **forwards **| **backwards **| both
animation-fill-mode: none 动画执行前后不改变任何样式
animation-fill-mode: forwards 保持目标动画最后一帧的样式
animation-fill-mode: backwards 保持目标动画第一帧的样式
animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。
- 动画播放状态(animation-timing-function):定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。默认值为running
single-animation-timing-function = running | paused
running 动画正常播放
paused 动画暂停播放
