送你一颗小红心

浏览器渲染原理

浏览器渲染过程

• 根据HTML构建HTML树
• 根据css构建css树
• 将两棵树合并成一颗渲染树
• layout布局（文档流、盒模型、计算大小和位置）
• paint绘制（把边框颜色、文字颜色、阴影等画出来）
• composite合成（根据层叠关系展示画面）

三种更新方式

1. js/css-样式-布局-绘制-合成
2. js/css-样式-绘制-合成
3. js/css-样式-合成

前端高手不用left做动画

使用transform
原理：例如transform：translateX（300px)
transition会自动脑部中间帧
性能：left再cssTriggers可以查到他需要经历布局绘制合成三个部分，而transform只需要合成。

css动画的两种做法

附上我的小红心

1. transition
2. animation