浏览器渲染原理概述
关键渲染路径
- 处理 HTML 标记并构建 DOM 树。
- 处理 CSS 标记并构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局，以计算每个节点的几何信息。
- 将各个节点绘制到屏幕上。
优化关键渲染路径就是指最大限度缩短执行上述第 1 步至第 5 步耗费的总时间。 这样一来，就能尽快将内容渲染到屏幕上，此外还能缩短首次渲染后屏幕刷新的时间，即为交互式内容实现更高的刷新率。
优化关键渲染路径
优化关键渲染路径的常规步骤如下:
- 对关键路径进行分析和特性描述: 资源数、字节数、长度。
- 最大限度减少关键资源的数量: 删除它们，延迟它们的下载，将它们标记为异步等。
- 优化关键字节数以缩短下载时间（往返次数）。
- 优化其余关键资源的加载顺序: 您需要尽早下载所有关键资产，以缩短关键路径长度。
CSS
CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。
JavaScript
JavaScript 也会阻止 DOM 构建和延缓网页渲染。 为了实现最佳性能，可以让您的 JavaScript 异步执行，并去除关键渲染路径中任何不必要的 JavaScript。
查看各属性会触发的路径
为了网页性能，需要尽量操作靠后的路径，尽量少的操作 DOM 和 CSSOM
上面的网站把各个属性会触发的路径做了一个梳理，方便查阅
引用
以上内容引用自 关键渲染路径 | Web | Google Developers
transform
常用属性
- translate 位移
- scale 缩放
- rotate 旋转
- skew 倾斜
经验
一般都需要配合 transition 过渡
inline 元素不支持 transform，需要先变成 block
translate（位移）
常用写法
translate | translateX | translateY
经验
translate(-50%, -50%) 可做绝对定位元素居中
scale（缩放）
常用写法
scale| scaleX| scaleY
经验
用的较少，因为容易出现模糊
rotate（旋转）
常用写法
rotate
经验
一般用于做 Loading 动画
rotate（倾斜）
常用写法
skew | skewX | skewY
经验
用的较少
transition（过渡）
配合 transform 使用，用于补充中间帧
语法
transition: 属性名 时长 过渡方式 延迟
transition: margin-right 1s linear 1s
transition: all 1s
animation（动画）
缩写语法
animation：时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
- 时长：1s 或 1000ms
- 过渡方式：linear
- 次数：1 或 infinite
- 方向： reverse | alternate | alternate-reverse
- 填充模式：none | forwards | backgrounds | both
- 是否暂停：paused | running
@keyframes （关键帧）
在动画序列中定义关键帧，搭配 animation 使用
语法 1
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
语法 2
@keyframes identifier {
0% { top: 0; }
50% { top: 30px; left: 20px; }
50% { top: 10px; }
100% { top: 0; }
}
