浏览器渲染原理

浏览器的渲染过程

根据HTML构建HTML树(DOM)
根据CSS构建CSS树(CSSOM)
将两棵树合成一个棵渲染树(render tree)
Layout布局，包括文档流、盒模型、大小、位置等
Paint绘制，包括边框颜色、文字颜色、阴影等
Composite合成，根据层叠关系展示画面

在跟新样式的过程时，浏览器不一定按照上面的六个步骤执行

在更新样式的时候，会省略Layout或Paint这些步骤，可以通过Chrome中的开发者工具里的Rendering一栏中添加Paint flashing。通过高亮显示来突显重绘区域。

但由于每个属性所触发的流程并不知道，可以在csstriggers.com 这个网站中查找每个属性在相关浏览器下的触发流程。

CSS 动画的两种做法（transition 和 animation）

transition

transition 的属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

transition-property：指定应用过渡属性的名称。可以用all来代表所有属性。
transition-duration：以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s,表示不出现过渡动画。
transition-timing-function：动画速度的曲线，可以取的值有ease(默认)、linear、ease-in、ease-out、ease-in-out、以及贝塞尔曲线等。
transition-delay：动画的延迟时间，即就是多长时间后开始动画。

注意：并不是所有的属性都能过渡。

animation

animation 属性是 animation-name，animation-duration, animation-timing-function， animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式

animation-name：动画的名称。

animation-duration：动画周期时长，同transition类似。

animation-timing-function：动画速度曲线，同transition类似。

animation-delay：延迟动画开始。

animation-iteration-count：动画的运行次数，无限次(infinite)

animation-direction: 动画运动方向，常用的是alternate(交替)、reverse(反向)

animation-fill-mode：动画结束时的位置，forwards停到动画结束的位置。

animation-play-state：定义一个动画运行(running)或者暂停(paused)

animation通过keyframes来使用

from to 写法

@keyframes name {
from{
    动画开始的样式
  }
  to{
    动画结束的样式
  }
}

百分数写法

@keyframes name {
  0%{
      动画开始的样式
    }
  50%{
      动画中间的样式
    }
  100%{
      动画结束的样式
  }
 }

《CSS 知识总结》