1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Dashboard 性能优化文档

## 1. 组件异步加载优化

### 1.1 异步组件定义
使用 Vue 2 的异步组件语法，为每个大型组件添加加载状态：

```js
const InstancePanel = () => ({
  component: import(/* webpackChunkName: "dashboard-instance" */ './components/InstancePanel'),
  loading: {
    template: '<div class="async-loading"><el-skeleton :rows="3" animated /></div>'
  },
  delay: 200,
  timeout: 5000
})
```
  • webpackChunkName: 指定打包后的文件名
  • loading: 加载过程中显示的占位组件
  • delay: 延迟显示加载组件的时间
  • timeout: 加载超时时间

1.2 组件预加载

使用 requestIdleCallback 在浏览器空闲时预加载其他可能用到的组件：

1
2
3
4
5
6
7
8
9
10
mounted() {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      Promise.all([
        import(/* webpackChunkName: "dashboard-extra" */ './components/OssTrafficChart'),
        import(/* webpackChunkName: "dashboard-extra" */ './components/OssQpsChart')
      ])
    })
  }
}

2. 数据缓存策略

2.1 缓存类实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class DashboardCache {
  constructor() {
    this.cache = new Map()
  }

  set(key, data) {
    this.cache.set(key, {
      data,
      timestamp: Date.now()
    })
  }

  get(key) {
    const cached = this.cache.get(key)
    if (!cached) return null
    
    if (Date.now() - cached.timestamp > CACHE_EXPIRATION) {
      this.cache.delete(key)
      return null
    }
    
    return cached.data
  }

  clear() {
    this.cache.clear()
  }
}

2.2 缓存使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
async fetchDashboardData() {
  try {
    const cachedData = this.cache.get(CACHE_KEY)
    if (cachedData) {
      this.dashboardData = cachedData
      return
    }

    // 获取新数据...
    this.cache.set(CACHE_KEY, dashboardData)
  } catch (err) {
    // 错误处理...
  }
}

3. 性能优化

3.1 防抖处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function debounce(fn, delay) {
  let timer = null
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

// 使用防抖
refreshData: debounce(async function() {
  await this.fetchDashboardData()
}, 1000)

3.2 并行数据加载

1
2
3
4
5
6
const [instanceData, rdsData, cdnData, ossData] = await Promise.all([
  this.fetchInstanceData(),
  this.fetchRdsData(),
  this.fetchCdnData(),
  this.fetchOssData()
])

3.3 页面可见性优化

1
2
3
4
5
6
7
8
9
10
11
12
13
mounted() {
  document.addEventListener('visibilitychange', this.handleVisibilityChange)
},

handleVisibilityChange() {
  if (document.visibilityState === 'visible') {
    this.refreshData()
  }
},

beforeDestroy() {
  document.removeEventListener('visibilitychange', this.handleVisibilityChange)
}

4. CSS 性能优化

4.1 过渡动画优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.dashboard-section {
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }
}

.chart-card {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px); // 使用 transform 代替位置属性
  }
}

4.2 加载状态优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.async-loading {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  min-height: 100px;
}

.v-lazy-component {
  &.v-lazy-component--loading {
    filter: blur(10px);
  }

  &.v-lazy-component--loaded {
    filter: blur(0);
    transition: filter 0.5s ease;
  }
}

5. 优化效果

  1. 首次加载优化

    • 组件异步加载减少首屏加载时间
    • 骨架屏提供更好的加载体验
    • 预加载提高后续操作响应速度

  2. 数据加载优化

    • 缓存机制减少重复请求
    • 并行加载提高数据获取效率
    • 防抖处理避免频繁更新

  3. 交互体验优化

    • 平滑的过渡动画
    • 及时的加载反馈
    • 优雅的降级处理

  4. 资源使用优化

    • 合理的组件分割
    • 按需加载资源
    • 及时的资源释放

6. 注意事项

  1. 缓存时间(CACHE_EXPIRATION)需要根据数据实时性要求调整
  2. 组件预加载的时机要根据实际使用场景调整
  3. 防抖延迟时间要根据业务需求设置
  4. 需要定期清理缓存避免内存占用过大
  5. 要注意在组件销毁时清理事件监听和定时器

7. 后续优化建议

  1. 考虑添加错误重试机制
  2. 可以添加数据更新进度提示
  3. 考虑添加离线数据支持
  4. 可以考虑使用 Web Workers 处理大量数据
  5. 考虑添加性能监控指标

这个文档详细记录了 Dashboard 的性能优化实现，包括代码示例和注意事项。它可以作为团队的参考文档，也可以用于后续的优化和维护工作。