浏览器渲染原理

渲染机制

1. 浏览器加载HTML代码后解析HTML代码来构建HTML树（DOM）
2. 加载CSS代码后解析并构建CSS树（CSSOM）
3. 将两棵树合并成一棵渲染树Render tree
4. 根据文档流、盒模型、计算大小和位置等布局 Layout
5. 根据边框、文字颜色以及阴影等绘制 Paint
6. 再根据层叠关系等合成并展示画面 Compose

1589719767199-e3108fd7-8823-42f7-9331-5479ab5d3fe0.png

更新样式

1. 一般使用Js更新样式，比如：
   • div.style.background = 'red'
   • div.style.display = 'none'
   • div.classList.add('red')
   • div.remove()直接删除节点

动画

定义

1. 由许多静止的画面（帧）以一定的播放速度（如每秒30张）连续播放
2. 肉眼因视觉残像而产生错觉误以为是活动的画面

概念

• 帧：每个静止的画面
• 播放速度：影视每秒24帧，游戏每秒最少30帧
动画优化
CSS优化
使用will-change或translate
JS优化
使用requestAnimationFrame代替setTimeout和setInterval
transform转换
常用功能
• 位移translate
• 缩放scale
• 旋转rotate
• 倾斜skew
translate取值

1. translateX，沿着 X 轴移动元素
2. translateY，沿着 Y 轴移动元素
3. translate(x,y)，沿着 X 和 Y 轴移动元素
4. translate3d，3D 转化
   经验
   • 一般要配合过渡 transition
   • inline元素不支持 transform，需要变成block
   • translate(-50%, -50%) 可以做绝对定位元素居中
   scale取值
5. scaleX，改变元素的宽度
6. scaleY，改变元素的高度
7. scale(x,y) ，改变元素的宽度和高度
8. scale3d(x,y,z) ，3D 缩放转换
   经验
   • 少用，容易出现模糊
   rotate
   在参数中规定角度，一般用于360度旋转制作 loading
   skew
9. skewX，沿着 X 轴
10. skewY，沿着 Y 轴
11. skew，沿着 X 和 Y 轴

transition过渡

语法

1. transition: 属性名 时长 过渡方式 延迟
2. 可以用逗号分隔两个不同属性
3. 可用all代表所有属性
4. 过渡方式有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