nanhaoluo
f165fac420
- 实现 enableGPU() 方法设置 will-change 属性 - 实现 disableGPU() 方法移除 will-change 属性 - 实现动画数量限制逻辑（最多 3 个同时运行） - 实现动画队列自动管理 - 添加 startAnimation() 和 endAnimation() 方法 - 添加 getActiveAnimationCount() 和 getQueuedAnimationCount() 查询方法 - 添加 clearAllAnimations() 清理方法 - 添加错误处理机制 - 创建交互式测试页面和自动化测试 - 创建详细的使用文档 验证需求： - 需求 5.2: 动画时使用 will-change 提示浏览器创建合成层 - 需求 5.3: 动画完成时移除 will-change 属性释放资源 - 需求 5.5: 限制同时运行的动画数量不超过 3 个
273 lines
8.6 KiB
Markdown
273 lines
8.6 KiB
Markdown
# 实现计划：资源和 CPU 优化
|
||
|
||
## 概述
|
||
|
||
本实现计划将 Argon 主题的资源和 CPU 优化设计转化为可执行的编码任务。优化重点包括：DOM 缓存、事件节流/防抖、按需加载、内存管理和性能监控。
|
||
|
||
所有任务都基于设计文档中定义的组件和接口，采用渐进式实现策略，确保每个步骤都能独立验证和测试。
|
||
|
||
## 任务
|
||
|
||
- [x] 1. 创建性能优化基础架构
|
||
- 创建 `argon-performance.js` 文件作为优化模块的容器
|
||
- 定义全局配置对象 `ArgonPerformanceConfig`
|
||
- 设置模块导出和初始化接口
|
||
- _需求：1.1, 2.1, 3.1_
|
||
|
||
- [~] 2. 实现 DOM 缓存模块
|
||
- [x] 2.1 创建 ArgonDOMCache 类
|
||
- 实现构造函数和 Map 存储结构
|
||
- 实现 init() 方法缓存常用元素
|
||
- 实现 get()、set()、clear() 方法
|
||
- _需求：1.1, 1.2, 1.3_
|
||
|
||
- [ ]* 2.2 编写 DOM 缓存属性测试
|
||
- **属性 1: DOM 缓存初始化完整性**
|
||
- **验证：需求 1.1**
|
||
|
||
- [ ]* 2.3 编写 DOM 缓存单元测试
|
||
- 测试不存在元素返回 null
|
||
- 测试缓存清空功能
|
||
- _需求：1.5_
|
||
|
||
- [~] 3. 实现事件管理模块
|
||
- [x] 3.1 创建 ArgonEventManager 类基础结构
|
||
- 实现构造函数和监听器注册表
|
||
- 实现 on()、off()、clear() 方法
|
||
- _需求：2.5, 11.2, 11.4_
|
||
|
||
- [x] 3.2 实现节流（throttle）机制
|
||
- 实现 throttle() 方法
|
||
- 使用 requestAnimationFrame 优化
|
||
- 支持可配置的等待时间
|
||
- _需求：2.1_
|
||
|
||
- [x] 3.3 实现防抖（debounce）机制
|
||
- 实现 debounce() 方法
|
||
- 支持可配置的延迟时间
|
||
- 实现取消待执行任务逻辑
|
||
- _需求：3.1, 3.2_
|
||
|
||
- [ ]* 3.4 编写事件管理属性测试
|
||
- **属性 3: 滚动事件节流频率限制**
|
||
- **属性 5: Resize 事件防抖延迟**
|
||
- **验证：需求 2.1, 3.1**
|
||
|
||
- [ ]* 3.5 编写事件清理属性测试
|
||
- **属性 4: 事件监听器清理完整性**
|
||
- **验证：需求 2.5, 11.2, 11.4**
|
||
|
||
- [x] 4. 检查点 - 基础模块验证
|
||
- 确保所有测试通过，询问用户是否有问题
|
||
|
||
- [~] 5. 实现资源加载模块
|
||
- [x] 5.1 创建 ArgonResourceLoader 类
|
||
- 实现构造函数和加载状态管理
|
||
- 实现 loadScript() 异步加载方法
|
||
- 实现 needsLibrary() 检测方法
|
||
- _需求：7.1, 7.2, 7.3, 7.5_
|
||
|
||
- [x] 5.2 实现第三方库按需加载
|
||
- 实现 loadPrismIfNeeded() 方法
|
||
- 实现 loadZoomifyIfNeeded() 方法
|
||
- 实现 loadTippyIfNeeded() 方法
|
||
- _需求：7.1, 7.2, 7.3_
|
||
|
||
- [ ]* 5.3 编写资源加载属性测试
|
||
- **属性 8: 第三方库按需加载**
|
||
- **属性 9: 第三方库加载缓存**
|
||
- **验证：需求 7.1, 7.2, 7.3, 7.5**
|
||
|
||
- [ ]* 5.4 编写资源加载错误处理测试
|
||
- 测试加载失败降级方案
|
||
- _需求：19.4_
|
||
|
||
- [~] 6. 实现渲染优化模块
|
||
- [x] 6.1 创建 ArgonRenderOptimizer 类
|
||
- 实现构造函数和读写队列
|
||
- 实现 read() 和 write() 方法
|
||
- 实现 _schedule() 和 _flush() 批量处理
|
||
- _需求：2.3, 2.4, 17.1, 17.2_
|
||
|
||
- [x] 6.2 实现 GPU 加速管理
|
||
- 实现 enableGPU() 方法设置 will-change
|
||
- 实现 disableGPU() 方法移除 will-change
|
||
- 实现动画数量限制逻辑
|
||
- _需求：5.2, 5.3, 5.5_
|
||
|
||
- [ ]* 6.3 编写渲染优化属性测试
|
||
- **属性 6: GPU 加速生命周期**
|
||
- **属性 7: 同时运行动画数量限制**
|
||
- **验证：需求 5.2, 5.3, 5.5**
|
||
|
||
- [~] 7. 实现内存管理模块
|
||
- [~] 7.1 创建 ArgonMemoryManager 类
|
||
- 实现构造函数和 ID 跟踪集合
|
||
- 实现 setTimeout()、setInterval()、requestAnimationFrame() 包装方法
|
||
- 实现对应的清理方法
|
||
- _需求：12.5, 13.4_
|
||
|
||
- [~] 7.2 实现统一清理接口
|
||
- 实现 clearAll() 方法
|
||
- 确保所有定时器和动画帧被取消
|
||
- _需求：13.4_
|
||
|
||
- [ ]* 7.3 编写内存管理属性测试
|
||
- **属性 10: 定时器和动画帧清理**
|
||
- **验证：需求 12.5, 13.4**
|
||
|
||
- [~] 8. 检查点 - 核心模块验证
|
||
- 确保所有测试通过，询问用户是否有问题
|
||
|
||
- [~] 9. 实现性能监控模块
|
||
- [~] 9.1 创建 ArgonPerformanceMonitor 类
|
||
- 实现构造函数和指标存储
|
||
- 实现 recordMetrics() 使用 Performance API
|
||
- _需求：18.1_
|
||
|
||
- [~] 9.2 实现性能问题检测
|
||
- 实现 detectIssues() 方法
|
||
- 检测 DOM 查询频率、事件监听器数量、长任务
|
||
- 输出警告信息
|
||
- _需求：18.2_
|
||
|
||
- [~] 9.3 实现性能报告功能
|
||
- 实现 report() 方法
|
||
- 支持开发模式和生产模式
|
||
- 提供优化建议
|
||
- _需求：18.3, 18.4, 18.5_
|
||
|
||
- [ ]* 9.4 编写性能监控单元测试
|
||
- 测试指标记录功能
|
||
- 测试问题检测和警告
|
||
- 测试开发/生产模式差异
|
||
- _需求：18.1, 18.2, 18.3, 18.4, 18.5_
|
||
|
||
- [~] 10. 实现缓存策略优化
|
||
- [~] 10.1 扩展 DOM 缓存支持 LRU 策略
|
||
- 添加缓存大小上限配置
|
||
- 实现访问时间跟踪
|
||
- 实现 LRU 淘汰逻辑
|
||
- _需求：14.3, 14.4_
|
||
|
||
- [ ]* 10.2 编写缓存策略属性测试
|
||
- **属性 11: 缓存大小上限**
|
||
- **属性 12: LRU 缓存淘汰策略**
|
||
- **验证：需求 14.3, 14.4**
|
||
|
||
- [~] 11. 集成优化模块到主题
|
||
- [~] 11.1 在 argontheme.js 中引入优化模块
|
||
- 在文件开头引入 argon-performance.js
|
||
- 初始化所有优化模块实例
|
||
- _需求：1.1, 2.1, 3.1_
|
||
|
||
- [~] 11.2 替换现有滚动事件处理器
|
||
- 使用 eventManager.throttle() 包装滚动处理器
|
||
- 替换 changeToolbarTransparency 函数
|
||
- 替换 changeLeftbarStickyStatus 函数
|
||
- _需求：2.1, 2.2, 2.3_
|
||
|
||
- [~] 11.3 替换现有 resize 事件处理器
|
||
- 使用 eventManager.debounce() 包装 resize 处理器
|
||
- 优化瀑布流布局重新计算
|
||
- 优化移动端布局切换
|
||
- _需求：3.1, 3.2, 3.3_
|
||
|
||
- [~] 11.4 使用 DOM 缓存替换重复查询
|
||
- 缓存 toolbar、leftbar、sidebar 等常用元素
|
||
- 替换所有 querySelector 和 getElementById 调用
|
||
- _需求：1.1, 1.2_
|
||
|
||
- [~] 12. 实现 PJAX 集成
|
||
- [~] 12.1 在 PJAX 事件中集成优化模块
|
||
- 在 pjax:beforeReplace 中清理事件监听器
|
||
- 在 pjax:end 中重新初始化 DOM 缓存
|
||
- 清理定时器和动画帧
|
||
- _需求：1.3, 2.5, 11.4, 13.4_
|
||
|
||
- [ ]* 12.2 编写 PJAX 集成属性测试
|
||
- **属性 2: DOM 缓存 PJAX 重置**
|
||
- **验证：需求 1.3**
|
||
|
||
- [~] 13. 检查点 - 集成验证
|
||
- 确保所有测试通过，询问用户是否有问题
|
||
|
||
- [~] 14. 实现响应式图片优化
|
||
- [~] 14.1 添加响应式图片加载逻辑
|
||
- 检测设备像素比
|
||
- 根据像素比选择合适尺寸图片
|
||
- _需求：15.1_
|
||
|
||
- [~] 14.2 实现 WebP 格式优先加载
|
||
- 检测浏览器 WebP 支持
|
||
- 优先加载 WebP 格式图片
|
||
- _需求：15.2_
|
||
|
||
- [ ]* 14.3 编写图片优化属性测试
|
||
- **属性 13: 响应式图片尺寸选择**
|
||
- **属性 14: WebP 格式优先级**
|
||
- **验证：需求 15.1, 15.2**
|
||
|
||
- [~] 15. 实现模块按需加载
|
||
- [~] 15.1 重构第三方库加载逻辑
|
||
- 使用 resourceLoader 替换直接加载
|
||
- 在需要时才加载 Prism、Zoomify、Tippy
|
||
- _需求：7.1, 7.2, 7.3_
|
||
|
||
- [~] 15.2 实现功能模块动态加载
|
||
- 识别可拆分的功能模块
|
||
- 实现交互触发时加载
|
||
- 避免重复加载
|
||
- _需求：19.3, 19.5_
|
||
|
||
- [ ]* 15.3 编写模块加载属性测试
|
||
- **属性 15: 模块按需加载和缓存**
|
||
- **验证：需求 19.3, 19.5**
|
||
|
||
- [~] 16. CSS 性能优化
|
||
- [~] 16.1 审查和优化 CSS 选择器
|
||
- 识别复杂选择器并简化
|
||
- 减少嵌套层级
|
||
- 使用类选择器替代标签选择器
|
||
- _需求：4.1, 4.2, 4.3_
|
||
|
||
- [~] 16.2 优化高成本 CSS 属性
|
||
- 减少 box-shadow 使用
|
||
- 限制 backdrop-filter 模糊半径
|
||
- 优化动画属性使用
|
||
- _需求：6.1, 6.2, 6.3, 5.4_
|
||
|
||
- [~] 17. 添加性能监控和报告
|
||
- [~] 17.1 在页面加载时记录性能指标
|
||
- 调用 performanceMonitor.recordMetrics()
|
||
- 在开发模式下输出详细报告
|
||
- _需求：18.1, 18.3_
|
||
|
||
- [~] 17.2 添加性能问题自动检测
|
||
- 定期调用 detectIssues()
|
||
- 在控制台输出警告和建议
|
||
- _需求：18.2, 18.5_
|
||
|
||
- [~] 18. 最终检查点 - 完整性验证
|
||
- 运行所有单元测试和属性测试
|
||
- 进行性能基准测试
|
||
- 验证优化目标达成
|
||
- 确保所有测试通过，询问用户是否有问题
|
||
|
||
- [~] 19. 文档和注释
|
||
- [~] 19.1 添加代码注释
|
||
- 为所有优化模块添加 JSDoc 注释
|
||
- 说明关键算法和优化原理
|
||
|
||
- [~] 19.2 更新主题文档
|
||
- 记录性能优化配置选项
|
||
- 提供性能调优指南
|
||
|
||
## 注意事项
|
||
|
||
- 任务标记 `*` 的为可选测试任务，可根据项目需求决定是否实施
|
||
- 每个检查点都应该运行测试并验证功能正确性
|
||
- 优化过程中要保持向后兼容，不破坏现有功能
|
||
- 所有性能优化都应该有可测量的指标支持
|
||
- 遵循项目代码规范（Tab 缩进、单引号、严格相等等）
|