本文内容引用于Web Fundamentals

浏览器的渲染原理

由于现在的网络用户要求他们在浏览网页的时候不仅能与之交互还要可以保证页面整体的流畅性，因此如何使页面加载迅速而且流畅运行，成了开发者需要关注的问题，若想写出高性能的网站或应用程序，首先应该了解如何处理HTML,JS和CSS。

浏览器的渲染过程

根据HTML标记并构建DOM树
根据CSS构建CSS树（CSSOM）
将两棵树合并成一棵渲染树（render tree）

layout布局（文档流，盒模型，计算大小或位置等）
paint绘制（边框颜色，背景颜色，阴影等绘制）
compose合成（根据层叠关系展示画面）

因此优化关键渲染路径就是指最大限度缩短执行上述第 1 步至第 5 步耗费的总时间。

更新样式的三种方式

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

根据浏览器的渲染原理，若是开发者更新了样式（即元素的几何属性，类似于宽高，位置等），则浏览器会检查所有属性然后重新绘制，最后再合成。

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

如果开发者只是更新了paint only的属性（例如背景，文字颜色等），由于不影响页面布局，则浏览器直接执行绘制。

JS / CSS > 样式 > 合成

在开发者只是更改一个既不更改布局也不需要绘制的属性时，浏览器将只执行合成，例如动画和transform。

CSS动画的两种做法

transform

transform包含四个常用的功能：translate(位移)|scale(缩放)|rotate(旋转)|skew(倾斜),其一般配合transition过度使用，但是注意，transform不支持inline元素，使用前把它变成block

translate 常用写法有

transform:translate(x,y);
transform:translateX(x);
transform:translateY(y);
transform:translateZ(z);/*需要在父容器上加上perspective元素 */
transform:translate3d(x,y,z);

注意，在做绝对定位元素的居中时可配合使用translate(-50%,-50%);

<div class="parent">
  <div class="son"></div>
</div>

.son {
  width: 100px;
  height: 100px;
  border:1px solid red;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.parent{
  border:1px solid black;
  width: 400px;
  height: 400px;
  position: relative;
}

2. scale 常用写法

  transform: scaleX(x);
  transform: scaleY(x);
  transform: scale(x,y);
  transform:scale(整体放大倍数);

rotate

4. skew

transform的组合效果： transform:translate(20px,30px) scale(1.5); transform:none;取消所有

transition

语法：transiton: 属性名时长过度方式延迟--->transition:left 200ms linear 2s,其中可以用all表示所有属性,常见过度方式有:linear(匀速),ease(缓动),ease-in(淡入)，ease-out（淡出）,ease-in-out,可见参考

注意：并不是所有的属性都能使用过渡的，如display:none<->display:block,一般会使用visibility:visible<->visibility:hidden;

animation

keyframes的写法

@keyframes 属性名 {
    from{
        transform:translate(20px,30px);
    }
    }
    to{
    transform:translate(30px,40px);
    }
}

或者

@keyframes 属性名{
    0%{
        
    }
    50%{
        
    }
    100%{
        
    }
}

animation写法

animation:属性名时长过度方式延迟次数方向填充模式是否暂停;

过渡方式同transition,linear,ease...
次数：3 ，2.4或infinite
方向：reverse（反向），alternate（交替），alternate-reverse（反向交替）
填充模式：both，forwards（forwards可以让动画停在结尾处），backwards，none
是否暂停：pause,running
时长：1s，100ms

一些自己的小想法

css和平时做的数学题不一样，有很多的特例和无法用正常思维理解的地方，需要我们多查mdn文档和多多自己尝试，才能掌握

CSS 动画