浏览器渲染原理
渲染机制
- 浏览器加载HTML代码后解析HTML代码来构建HTML树（DOM）
- 加载CSS代码后解析并构建CSS树（CSSOM）
- 将两棵树合并成一棵渲染树Render tree
- 根据文档流、盒模型、计算大小和位置等布局 Layout
- 根据边框、文字颜色以及阴影等绘制 Paint
- 再根据层叠关系等合成并展示画面 Compose
1589719767199-e3108fd7-8823-42f7-9331-5479ab5d3fe0.png
更新样式
- 一般使用Js更新样式，比如：
• div.style.background = 'red'
• div.style.display = 'none'
• div.classList.add('red')
• div.remove()直接删除节点
动画
定义
- 由许多静止的画面（帧）以一定的播放速度（如每秒30张）连续播放
- 肉眼因视觉残像而产生错觉误以为是活动的画面
概念
• 帧：每个静止的画面
• 播放速度：影视每秒24帧，游戏每秒最少30帧
动画优化
CSS优化
使用will-change或translate
JS优化
使用requestAnimationFrame代替setTimeout和setInterval
transform转换
常用功能
• 位移translate
• 缩放scale
• 旋转rotate
• 倾斜skew
translate取值
- translateX，沿着 X 轴移动元素
- translateY，沿着 Y 轴移动元素
- translate(x,y)，沿着 X 和 Y 轴移动元素
- translate3d，3D 转化
经验
• 一般要配合过渡 transition
• inline元素不支持 transform，需要变成block
• translate(-50%, -50%) 可以做绝对定位元素居中
scale取值 - scaleX，改变元素的宽度
- scaleY，改变元素的高度
- scale(x,y) ，改变元素的宽度和高度
- scale3d(x,y,z) ，3D 缩放转换
经验
• 少用，容易出现模糊
rotate
在参数中规定角度，一般用于360度旋转制作 loading
skew - skewX，沿着 X 轴
- skewY，沿着 Y 轴
- skew，沿着 X 和 Y 轴
transition过渡
语法
- transition: 属性名 时长 过渡方式 延迟
- 可以用逗号分隔两个不同属性
- 可用all代表所有属性
- 过渡方式有linear、ease、ease-in、ease-in-out、ease-out、step-start、step-end
过渡起始
过渡必须要有起始，一般只有一次动画或者两次，比如hover和非hover状态的过渡
不是所有属性都能过渡
display: none -> block没法过渡，一般改成visibility: hidden -> visible
animation
缩写语法
animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
时长
1s 或 1000ms
过渡方式
跟 transition 一样，比如 linear
次数
3 或 infinite
方向
reverse | alternate | alternate-reverse
填充模式
none | forwards | backwards | both
是否暂停
pause | running
