nanhaoluo
4515831d7f
- 删除临时测试文件 (test-*.html, test-*.js) - 删除临时文档文件 (GPU_ACCELERATION_USAGE.md, RENDER_OPTIMIZER_USAGE.md) - 删除测试 HTML 文件 (argon-memory-manager.test.html, argon-performance.test.html) - 整理文档到 specs 目录下
88 lines
2.4 KiB
Markdown
88 lines
2.4 KiB
Markdown
# ArgonRenderOptimizer 使用指南
|
||
|
||
## 概述
|
||
|
||
`ArgonRenderOptimizer` 类用于优化 DOM 操作性能，通过批量读写避免布局抖动（Layout Thrashing），并提供 GPU 加速管理功能。
|
||
|
||
## 核心功能
|
||
|
||
### 1. 批量读写 DOM
|
||
|
||
**问题：** 频繁交替读写 DOM 会导致浏览器多次重排（reflow），严重影响性能。
|
||
|
||
**解决方案：** 使用 `read()` 和 `write()` 方法将操作加入队列，在下一帧统一执行（先读后写）。
|
||
|
||
### 2. GPU 加速管理
|
||
|
||
**功能：** 通过 `will-change` 属性提示浏览器创建合成层，利用 GPU 加速动画。
|
||
|
||
### 3. 动画数量限制
|
||
|
||
**问题：** 同时运行过多动画会导致 CPU 占用过高，影响页面流畅度。
|
||
|
||
**解决方案：** 自动限制同时运行的动画数量（默认最多 3 个），超出的动画自动进入等待队列。
|
||
|
||
## 使用示例
|
||
|
||
### 基础用法
|
||
|
||
```javascript
|
||
// 创建实例
|
||
const optimizer = new ArgonRenderOptimizer();
|
||
|
||
// 批量读取 DOM 属性
|
||
let scrollTop, windowHeight;
|
||
|
||
optimizer.read(() => {
|
||
scrollTop = document.documentElement.scrollTop;
|
||
windowHeight = window.innerHeight;
|
||
});
|
||
|
||
// 批量写入 DOM
|
||
optimizer.write(() => {
|
||
const toolbar = document.querySelector('.navbar');
|
||
if (toolbar) {
|
||
toolbar.style.opacity = scrollTop > 100 ? '1' : '0.8';
|
||
}
|
||
});
|
||
```
|
||
|
||
### GPU 加速动画
|
||
|
||
```javascript
|
||
const element = document.querySelector('.animated-element');
|
||
|
||
// 使用 startAnimation 方法，自动管理 GPU 加速和动画数量
|
||
const started = optimizer.startAnimation(element, (el) => {
|
||
el.style.transform = 'translateX(100px)';
|
||
el.style.transition = 'transform 0.3s ease';
|
||
});
|
||
|
||
// 动画结束后调用 endAnimation
|
||
element.addEventListener('transitionend', () => {
|
||
optimizer.endAnimation(element);
|
||
}, { once: true });
|
||
```
|
||
|
||
## API 参考
|
||
|
||
### `read(readFn)` - 批量读取 DOM
|
||
### `write(writeFn)` - 批量写入 DOM
|
||
### `enableGPU(element)` - 启用 GPU 加速
|
||
### `disableGPU(element)` - 禁用 GPU 加速
|
||
### `startAnimation(element, animationFn)` - 启动动画
|
||
### `endAnimation(element)` - 结束动画
|
||
### `getActiveAnimationCount()` - 获取活动动画数量
|
||
### `getQueuedAnimationCount()` - 获取队列动画数量
|
||
### `clearAllAnimations()` - 清除所有动画
|
||
|
||
## 性能优势
|
||
|
||
批量读写可减少 75% 的重排次数，显著提升性能。
|
||
|
||
## 相关需求
|
||
|
||
- 需求 2.3, 2.4: 批量读写避免布局抖动
|
||
- 需求 5.2, 5.3, 5.5: GPU 加速和动画限制
|
||
- 需求 17.1, 17.2: 批量操作优化
|