# auto-refresh-jsheap
**Repository Path**: sdh-2017/auto-refresh-jsheap
## Basic Information
- **Project Name**: auto-refresh-jsheap
- **Description**: 自动刷新js堆栈程序auto-refresh-heap，当js堆栈快达到堆栈上限时自动刷新浏览器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-21
- **Last Updated**: 2025-10-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 自动刷新机制 - 内存泄露应对方案
## 概述
这是一个用于应对页面内存泄露问题的自动刷新机制。当页面内存使用接近限制时，会自动刷新页面以防止内存无限增长。
## 功能特性
- 🔍 **实时内存监控**: 监控页面内存使用情况
- 🔄 **自动刷新**: 达到阈值时自动刷新页面
- 👤 **用户确认**: 刷新前询问用户确认，避免意外刷新
- ⚙️ **灵活配置**: 支持自定义阈值和策略
- 📊 **详细日志**: 提供详细的内存使用日志
- 🎯 **用户友好**: 提供系统原生对话框和全局API
## 使用方法
### 基本使用
```html
内存监控页面
```
### 高级配置
```javascript
// 创建自定义配置的实例
const customManager = new AutoRefreshManager({
memoryThreshold: 0.7, // 内存使用率达到70%时刷新
checkInterval: 3000, // 每3秒检查一次
maxMemoryMB: 150, // 最大内存限制150MB
askUserConfirmation: true, // 询问用户确认
enableLogging: true, // 启用日志
beforeRefresh: function() {
// 刷新前的清理工作
console.log('执行清理工作...');
// 保存用户数据等
}
});
```
### 全局API
```javascript
// 手动刷新页面
AutoRefresh.refresh();
// 获取当前状态
const status = AutoRefresh.getStatus();
console.log('监控状态:', status);
// 更新配置
AutoRefresh.updateConfig({
memoryThreshold: 0.9,
checkInterval: 10000
});
// 启用/禁用监控
AutoRefresh.enable();
AutoRefresh.disable();
// 停止/开始监控
AutoRefresh.stop();
AutoRefresh.start();
```
## 配置选项
| 选项 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `memoryThreshold` | number | 0.8 | 内存使用率阈值（0-1） |
| `checkInterval` | number | 5000 | 检查间隔（毫秒） |
| `enabled` | boolean | true | 是否启用自动刷新 |
| `askUserConfirmation` | boolean | true | 是否询问用户确认刷新 |
| `enableLogging` | boolean | true | 是否启用日志 |
| `maxMemoryMB` | number | 100 | 最大内存限制（MB） |
| `beforeRefresh` | function | null | 刷新前清理函数 |
## 用户确认机制
### 确认对话框功能
当内存使用率过高时，系统会使用浏览器原生的确认对话框：
- **系统原生**: 使用浏览器自带的 `confirm()` 对话框
- **简洁明了**: 清楚说明内存使用率过高的情况
- **重要提示**: 提醒用户刷新将清除未保存数据
- **用户选择**: 提供"确定"和"取消"两个选项
- **无需样式**: 自动适配系统主题和语言
### 用户操作流程
1. 检测到内存使用率过高
2. 弹出系统确认对话框
3. 用户选择操作：
- 点击"确定" → 立即刷新页面
- 点击"取消" → 关闭对话框，稍后重新检查
### 配置选项
```javascript
// 启用用户确认（默认）
askUserConfirmation: true
// 禁用用户确认，直接刷新
askUserConfirmation: false
```
## 内存监控机制
### 精确监控（Chrome等现代浏览器）
- 使用 `performance.memory` API
- 提供精确的内存使用数据
- 包括已使用、总计、限制等信息
### 估算监控（其他浏览器）
- 基于页面元素数量估算
- 使用启发式算法计算内存使用
- 提供相对准确的内存使用比例
## 使用场景
1. **大数据可视化页面**: 处理大量图表和数据时
2. **长时间运行的SPA**: 单页应用长时间运行后
3. **内存泄露暂时无法修复**: 作为临时解决方案
4. **监控页面**: 需要持续监控的页面
## 注意事项
1. **浏览器兼容性**: 精确监控需要支持 `performance.memory` 的浏览器
2. **用户体验**: 自动刷新会中断用户操作，建议设置合理的阈值
3. **数据保存**: 刷新前记得保存用户数据
4. **性能影响**: 监控本身有轻微性能开销
## 示例页面
### 基础示例
查看 `a.html` 文件了解完整的使用示例，该页面包含：
- 内存泄露测试代码
- 自动刷新机制集成
- 实时内存监控显示
### 完整测试页面
查看 `test-auto-refresh.html` 文件了解完整的测试和演示页面，该页面包含：
- 实时状态监控面板
- 内存使用情况显示
- 控制面板（启动/停止内存泄露测试）
- 控制台日志显示
- 各种配置选项测试
### 用户确认功能演示
查看 `demo-confirmation.html` 文件了解用户确认功能的演示页面，该页面包含：
- 用户确认对话框界面展示
- 模拟内存警告功能
- 确认功能开关控制
- 实时状态显示
## 调试和监控
启用日志后，可以在控制台查看详细的内存使用情况：
```
[AutoRefresh 14:30:25] 自动刷新管理器已启动 {memoryThreshold: 0.8, checkInterval: 5000, maxMemoryMB: 100}
[AutoRefresh 14:30:30] 内存使用情况 {usedMB: 45.2, totalMB: 67.8, limitMB: 2048, usageRatio: 0.022}
[AutoRefresh 14:30:35] 内存使用情况 {usedMB: 89.4, totalMB: 134.2, limitMB: 2048, usageRatio: 0.044}
```
## 故障排除
### 常见问题
1. **监控不工作**: 检查浏览器是否支持 `performance.memory`
2. **频繁刷新**: 降低 `memoryThreshold` 值
3. **警告不显示**: 检查 `showWarning` 配置
4. **日志不输出**: 检查 `enableLogging` 配置
### 调试模式
```javascript
// 启用详细日志
AutoRefresh.updateConfig({ enableLogging: true });
// 查看当前状态
console.log(AutoRefresh.getStatus());
// 手动触发刷新测试
AutoRefresh.refresh();
```