每日前端小技巧 - 数据预加载

前言

今天分享一个前端性能优化小技巧。它不需要依赖任何框架，短短十几行代码就能实现，但效果却很不错。

痛点

在开发中，我们经常会遇到这样的场景：

1. 列表页进入详情页, 进去详情页之后 调用获取详情数据接口,这个时候如果详情接口响应慢了点,就会出现 先 Loading 然后 再渲染页面
2. 页面A提交数据, B页面要获取生成结果

实现方案

class Preload {
    static resultMap = new Map<string,any>();
    static prepare<T = any>(key: string, callback: ()=> Promise<T>) {
        const result = callback();
        this.resultMap.set(key, result);
        return result;
    }
    static getData<T = any>(key: string, callback: ()=> Promise<T>): Promise<T> {
        const result = this.resultMap.get(key);
        if (result) {
            this.resultMap.delete(key);
            return result;
        }
        return callback();
    }
}

就这么简单! 它做了什么？

1. prepare : 提前发起请求并缓存
2. getData : 需要时直接用缓存，没有就重新请求

使用示例

// 列表页 点击详情跳转前 预加载详情数据
Preload.prepare(`detail_${id}`,()=> fetch('/api/detail/xxx'))
// 跳转详情页

// ...
// 详情页 获取数据数据
Preload.getData(`detail_${id}`,()=> fetch('/api/detail/xxx'))

看，不需要改变现有代码结构，不需要引入复杂的库，就能实现数据预加载！

为什么说它好用？

• 简单
  • 十几行代码
  • 不依赖框架
  • 容易理解和使用
• 灵活
  • 可以预加载任何异步数据
  • 可以在任何时机触发
  • 可以和任何框架配合
• 无侵入
  • 不需要改变现有代码结构
  • 不影响现有业务逻辑
  • 随用随加

欢迎在评论区分享你的想法和使用场景~