1、浏览器渲染原理

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSDOM）
3. 将两棵树合并成一颗渲染树（reder tree）
4. Layout布局（文档流、盒模型、计算大小和位置）
5. Paint绘制（把边框颜色、文字颜色、阴影等画出来）
6. Composite合成（根据层叠关系展示画面）

2、如何更新样式

• 一般使用JS来更新样式
• • 比如 div.style.background='red'
• • 比如 div.style.display = 'none'
• • 比如 div.classList.add('red') （推荐）
• • 比如 div.remove()直接删除节点
• 这些方法有什么不同吗？有三种不同的渲染方式
  1. JS/CSS >样式>布局>绘制>合成（JavaScript>Style>Layout>Paint>Composite）（如：div.remove()触发当前消失，其他元素relayout）
  2. JS/CSS>样式>绘制>合成（JavaScript>Style>Paint>Composite）（如：改变背景颜色，直接repaint+composite）
  3. JS/CSS>样式>合成（JavaScript>Style>Composite）（如改变transform，只需要composite）
• 查看各种CSS属性在不同浏览器中的渲染流程，可以看：CSSTriggers.com

3、注意

• CSS渲染过程依次包括布局、绘制、合成，其中布局和绘制有可能被省略
• 前端高手不用left做动画，用transform
• transform的好处：不需要relayout和repaint（重新布局和重新绘制），比改变left性能更好

4、CSS动画优化

• 比如left改成transform
• Google文章： developers.google.com/web/fundame…
• JS优化：requestAnimationFrame代替 setTimeout 或setInterval
• CSS优化：使用will-change 或transform

5、transform语法

• transform四个常用功能：

1. 位移：translate

• • translateX:(x px)
• • translateY()
• • translateZ()：相对于视点变近变远，需要在附近元素加上perspective:1000px（设置视点在1000p- - x的正中心位置）
• • translate(x,y)
• • translate3d(x,y,z)
• • 经验：1、学会看MDN的语法； 2、通过以下代码可以实现绝对定位元素的居中： {left:50%; top:50%; transform:translate(-50%,-50%);}

2. 缩放：scale

• • scaleX(x)
• • scaleY(y)
• • scale(x,y)
• • 经验： 用的较少，容易出现模糊

3. 旋转：ratate

• • rotateX(x deg)
• • rotateY()
• • rotateZ()
• • rotate()
• • rotate3d 太复杂，很少用到
• • 经验： 1、一般用于360度旋转制作loading；2、用到时搜索rotateMDN

4. 倾斜：skew

• • skewX(x deg)
• • skewY()
• • skew()
• • 经验： 用的很少，用的时候搜索skewMDN

• border-radius:50% 50% 50% 50%；

6、transition过渡

• 作用：添加中间帧

• 语法：transition: 属性名 时长 过渡方式 延迟时长

• 可以用逗号分隔两个不同属性，如：transition:left 200ms,top 400ms;

• 可以使用all代表所有属性

• 过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

• 注意：

  1. 并不是所有属性都能过渡，如：display:none =>block就不行，一般改成：visibility：hidden =>visible
  2. background可以过渡
  3. opacity可以过渡，但不推荐

7、animation写法

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

• 时长：1s或者1000ms

• 过渡方式：与transition的取值相同，如linear

• 次数：数字 或者 infinite

• 方向：reverse | alternate | alternate-reverse

• 填充模式：none| forwards | backwards | both

• 是否暂停： paused | running

• 声明关键帧：animation: xxx 1s;

  1. 写法一：

  @keyframes xxx{
    0%{}
    50%{}
    100%{}      
  }
  

  2. 写法二：

  @keyframes xxx{
    from{}
    to{}
  }