浏览器渲染原理

• 根据HTML构件DOM数
• 根据CSS构建CSSOM树
• DOM树与CSSOM树合并后形成渲染树（render tree）
• 渲染树枝包含渲染网页所需的节点
• 布局计算每个对象的精确位置和大小
• 绘制、合成，根据层叠关系展示画面

样式更新

1. JS/CSS>style>layput>paint>compose 修改元素的布局，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），那么浏览器将检查所有其他元素，然后重新布局页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。
2. JS/CSS>style>paint>composm
   
   修改绘制属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，则浏览器会跳过重新布局，但仍将执行绘制。
3. JS/CSS>style>compose
   
   更改一个既不要布局也不要绘制的属性，则浏览器将跳到只执行合成。
4. 每个属性的修改会触发的以上哪个流程查阅

CSS动画的两种做法

transform

四个常用功能

translate	scale	rotate	skew
位移	缩放	旋转	倾斜

用法

transform: none;
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(45deg);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(20deg);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: inherit;
transform: initial;
transform: unset;

注意

1. 一般都需要配合transition过渡（作用：补充中间帧）

transition:属性名 时长 过渡方式 延迟;

过渡方式：inline、ease、ease-in、ease-out、ease-in-out、cubic-bezier、step-start、step-end、steps

2. inline元素不支持transform，需要先变成block元素

animation

语法

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

其中

• 过渡方式与transform一样
• 次数：1~infinite（无限）
• 方向：reverse|alternate|alternate-reverse
• 填充方式：none|forwards|backwards|both
• 是否暂停：paused|running

@keyframes完整语法

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

和

@keyframes id{
    0%{
    	transform: translateX(0%);
    }
    30%,60%{
    	transform: translateX(50%);
    }
    10%{
    	transform: translateX(100%);
    }
}