# 图片浏览器

**Repository Path**: pengyang317/h5-comic-reader

## Basic Information

- **Project Name**: 图片浏览器
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-20
- **Last Updated**: 2025-09-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# H5图片阅读器

一个高性能的H5图片阅读器，基于React和TypeScript构建，实现了虚拟化渲染、图片懒加载、缓存优化等性能特性。

## 特性

### 性能优化
- ✅ **虚拟化渲染** - 只渲染可视区域内容，支持万张图片流畅滚动
- ✅ **智能缓存** - LRU算法管理图片缓存，支持多级缓存策略
- ✅ **图片懒加载** - 基于Intersection Observer的懒加载
- ✅ **Web Worker处理** - 后台线程处理图片解码和格式转换
- ✅ **预加载策略** - 智能预加载相邻页面
- ✅ **滑动窗口** - 异步IO平滑时延

### 用户体验
- ✅ **流畅滚动** - 60FPS滚动体验
- ✅ **触摸优化** - 手势识别，减少触摸延迟
- ✅ **自动阅读** - 定时翻页功能
- ✅ **骨架屏** - 加载时的视觉反馈
- ✅ **错误重试** - 网络异常时的重试机制

### 移动端适配
- ✅ **响应式设计** - 适配各种屏幕尺寸
- ✅ **高DPI支持** - 支持Retina等高清屏幕
- ✅ **电池优化** - 降低CPU和GPU使用率
- ✅ **内存管理** - 防止内存泄漏

### 性能监控
- ✅ **FPS监控** - 实时帧率显示
- ✅ **内存监控** - JavaScript堆内存使用情况
- ✅ **缓存统计** - 缓存命中率和大小
- ✅ **加载时间** - 图片加载性能分析

## 项目结构

```
h5/
├── index.html             # 应用入口
├── package.json           # 项目依赖
├── vite.config.ts         # Vite配置
├── tsconfig.json          # TypeScript配置
├── start.bat              # Windows启动脚本
├── start.sh               # Mac/Linux启动脚本
└── src/                   # 源码目录
    ├── main.tsx           # 应用入口
    ├── App.tsx            # 主应用组件
    ├── index.css          # 全局样式
    ├── components/        # 组件目录
    │   ├── ComicReader.tsx    # 图片阅读器主组件
    │   ├── ComicPage.tsx      # 单页组件
    │   ├── Controls.tsx       # 控制按钮
    │   ├── PageCounter.tsx    # 页面计数器
    │   ├── LoadingIndicator.tsx # 加载指示器
    │   └── PerformanceMonitor.tsx # 性能监控
    ├── context/           # React Context
    │   └── ImageCacheContext.tsx # 图片缓存上下文
    └── hooks/             # 自定义Hooks
        ├── usePerformanceMonitor.ts # 性能监控Hook
        └── useVirtualization.ts     # 虚拟化Hook
```

## 快速开始

### 方法一：使用启动脚本

#### Windows
双击运行 `start.bat`

#### Mac/Linux
```bash
chmod +x start.sh
./start.sh
```

### 方法二：手动启动

1. 安装依赖：
```bash
npm install
```

2. 启动开发服务器：
```bash
npm run dev
```

3. 浏览器会自动打开：http://localhost:3000

### 生产构建

```bash
npm run build
```

构建完成后，可以部署 `dist` 目录到任何静态文件服务器。

## 技术实现

### 虚拟化渲染
使用react-window实现虚拟化列表，只渲染可视区域的DOM元素，大大减少了内存占用和渲染开销。

### 图片缓存策略
- **内存缓存**：使用Map存储已加载的图片URL
- **LRU算法**：自动清理最久未使用的缓存项
- **容量限制**：防止缓存无限增长导致内存溢出
- **预加载**：提前加载相邻页面图片

### Web Worker优化
- 后台线程处理图片下载和解码
- 支持WebP格式转换，减少传输大小
- 避免主线程阻塞，保持UI流畅

### 性能监控
- 实时FPS计算，监控渲染性能
- JavaScript内存使用监控
- 缓存命中率统计
- 网络加载时间分析

## 配置选项

### 缓存配置
```javascript
const MAX_CACHE_SIZE = 100        // 最大缓存图片数量
const CACHE_EXPIRE_TIME = 600000  // 缓存过期时间(毫秒)
```

### 虚拟化配置
```javascript
const BUFFER_SIZE = 3       // 缓冲区大小
const OVERSCAN_COUNT = 2    // 预渲染项目数量
```

### 图片配置
```javascript
const IMAGE_URL_TEMPLATE = 'https://picsum.photos/seed/{seed}/800/1200'
const TOTAL_PAGES = 10000   // 总页数
```

## 兼容性

- Chrome 80+
- Firefox 72+
- Safari 13+
- Edge 80+
- iOS Safari 13+
- Android Chrome 80+

## 性能基准

在现代移动设备上的性能表现：

- **滚动FPS**: 60fps
- **内存占用**: < 100MB (缓存100张图片)
- **首屏加载**: < 2s
- **图片切换**: < 100ms
- **缓存命中率**: > 90%

## 开发指南

### 添加新功能

1. 在对应的组件文件中实现功能
2. 更新TypeScript类型定义
3. 添加性能监控点
4. 测试在不同设备上的表现

### 性能优化

1. 使用React.memo包装组件避免不必要的重渲染
2. 使用useCallback和useMemo优化函数和计算
3. 合理设置虚拟化参数
4. 监控内存使用，及时清理资源

### 调试技巧

1. 开启性能监控查看实时指标
2. 使用浏览器DevTools分析性能
3. 检查Network面板的图片加载情况
4. 使用Memory面板分析内存使用

## 许可证

MIT License