浏览器渲染过程

步骤

根据HTML构建HTML树（DOM）

2. 根据CSS构建CSS树（CSSOM）

3. 将两颗树合并成一颗渲染树（render tree）

Render tree.PNG
4. Layout布局（文档流、和模型、计算大小和位置） 5. pint绘制（把边框颜色、文字颜色、阴影等画出来） 6. compose合成（根据层叠关系展示画面）

三种更新样式的方式

第一种：全部流程

JS/CSS>样式>布局>绘制>合成
比如：div:remove()会触发当前消失，其他元素relayout

第二种：跳过layout

JS/CSS>样式>绘制>合成
比如：改变背景颜色，直接repaint+composite

第三种：跳过layout和paint

JS/CSS>样式>合成
比如：改变transform，只需composite

Transfrom

transfrom可以使元素被位移（translate）、缩放（scale）、旋转（rotate）、倾转（skew）
注：inline元素不支持transform，需要先将元素变成block.

translate

常用写法：

translateX（length-percentage）
translateY(length-percentage)
translateX(length-percentage,length-percentage?)
translateZ(length)且父级容器perspective
translate3d(x,y,z)

scale

常用写法：

scaleX(number)
scaleY(number)
scaleX(number,number?)

rotate

常用写法:

rotate([angle|zero])
rotateZ([angle|zero])
rotateY([angle|zero])
rotateX([angle|zero])

skew

常用写法: skewX([abgle|zero]) skewY([abgle|zero]) skew([abgle|zero],[abgle|zero])

transform的多重效果

组合使用： transform:scale(0.5)translate(-100%,-100%);
transform:none;取消所有；

案例-跳动的心

transition

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>beating heart</title>
    <style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#heart {
  margin: 100px;
  position: relative;
  display: inline-block;
  transition: all 0.5s;
}
#heart:hover {
    transform: scale(1.5)
}
#heart > .bottom {
  width: 50px;
  height: 50px;
  /* border: 1px solid red; */
  transform: rotate(45deg);
  background-color: red;
}
#heart > .left {
  width: 50px;
  height: 50px;
  /* border: 1px solid red; */
  border-radius: 50% 0 0 50%;
  position: absolute;
  bottom: 100%;
  right: 100%;
  transform: rotate(45deg) translateX(31px);
  background-color: red;
}
#heart > .right {
  width: 50px;
  height: 50px;
  /* border: 1px solid red; */

  position: absolute;
  bottom: 100%;
  left: 100%;
  transform: rotate(45deg) translateY(31px);
  border-radius: 50% 50% 0 0;

  background-color: red;
}
    <style>
</head>
<body>
    <div id="heart">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

animation

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>beating heart</title>
    <style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#heart {
  margin: 100px;
  position: relative;
  display: inline-block;
  animation: heart 700ms infinite alternate;
}
/* #heart:hover {
    transform: scale(1.5)
} */
@keyframes heart {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
#heart > .bottom {
  width: 50px;
  height: 50px;
  /* border: 1px solid red; */
  transform: rotate(45deg);
  background-color: red;
}
#heart > .left {
  width: 50px;
  height: 50px;
  /* border: 1px solid red; */
  border-radius: 50% 0 0 50%;
  position: absolute;
  bottom: 100%;
  right: 100%;
  transform: rotate(45deg) translateX(31px);
  background-color: red;
}
#heart > .right {
  width: 50px;
  height: 50px;
  /* border: 1px solid red; */
  position: absolute;
  bottom: 100%;
  left: 100%;
  transform: rotate(45deg) translateY(31px);
  border-radius: 50% 50% 0 0;
  background-color: red;
}
    <style>
</head>
<body>
    <div id="heart">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

CSS知识总结之浏览器渲染原理