浏览器渲染原理

渲染机制

浏览器加载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