性能优化之数据层方案

[wuyunqiang]

先有问题再有答案

1. api请求优化有什么收益？
2. 如何做数据层面的优化？
3. 有哪些常见的方案？
4. 整体的优化思路是什么？

背景

在Web性能优化中，减少API请求的耗时是非常重要的一部分，因为这会直接影响到用户体验。

1. 提高加载速度：网络请求通常是页面加载过程中最消耗时间的一部分，特别是在移动网络环境下。通过优化API请求，减少请求的耗时，可以显著提高页面的加载速度。
2. 提高用户体验：网页加载速度是影响用户体验的重要因素。一个快速响应的网站能够给用户省心满意的体验，降低用户流失率。
3. 提高转化率：对于电商等业务来说，网页的响应速度直接影响到业务的转化率。统计数据显示网页加载每延迟1秒，将导致7%的转化率下降。通过提高API请求的速度，可以提高转化率，从而提高收入。
4. 提高SEO排名：搜索引擎如Google在其搜索排名算法中，考虑了网页的加载速度。因此，优化API请求，提高加载速度，能够提高搜索引擎优化(SEO)的排名，从而带来更多的流量。
5. 节约资源利用：优化API请求，节约服务器处理时间，无论是从服务器端还是客户端角度来看，都能更有效地利用资源，降低运营成本。

因此，降低API请求耗时对于任何Web业务来说都具有重要的意义，这不仅能提供更好的用户体验，也会对业务的核心指标产生积极的影响。

一图胜千文

整体的优化思路：

1. 串行改并行 ： 预请求
2. 消除关键节点耗时 ： 缓存数据, Promise状态共享，
3. 缩短关键节点耗时 ：请求聚合, 按需请求

缓存数据

既然请求有耗时 那索性就不发送了 直接干掉一个关键节点 性能秒开肯定上去了 😁😄😄

缓存相当于是在客户端和服务器之间加了一层存储层，用于存储一些频繁被请求的数据。这样，下一次客户端请求相同的数据时，不必再向服务器发起请求，而是直接从缓存中取得数据，减少了网络请求开销，也加快了加载速度。

对于非实时性要求不高的数据，我们可以缓存请求结果。使用浏览器缓存如localStorage和indexedDB等来缓存这些数据。

缺点就是 需要开发者手动维护缓存内容，大小，以及过期时间，更新策略等...

Promise状态共享

实现一种机制，能够在某个Promise对象处于pending状态时，保存这个对象的状态和结果，并在之后的方法调用中直接返回这个结果。这样，当我们在短时间内多次请求同一个资源时，只需要发起一次真正的异步请求，其他的请求都可以直接返回之前的结果。这就是Promise状态共享的概念。

详情参考原文 性能优化：基于Promise的状态共享

promise状态缓存

与传统的Promise状态共享不同，此机制不只是在Promise处于等待（pending）状态时拦截重复的请求，而是在Promise结果已经确定（无论是fulfilled还是rejected）后，仍然保留这个结果一段指定的时间。

在这段缓存时间内，如果再次发起相同的请求，系统不会重新执行这个Promise，而是直接使用之前缓存的结果。这样可以避免进行不必要的计算或资源请求，从而节省资源并提升效率。

代码如下：

export const cachePromise = (time = 3 * 1000) => {
    let _cacheP: Promise<any> | null = null;
    return (task: () => Promise<any>,) => {
        if (!_cacheP) {
            _cacheP = new Promise((_res, _rej) => {
                task().then((res) => {
                    _res(res)
                }).catch((err) => {
                    _rej(err)
                }).finally(() => {
                    setTimeout(() => {
                        _cacheP = null;
                    }, time);
                })
            });
        }
        return _cacheP;
    };
};

更多基于js运行时的异步 性能优化方案 可以参考 run-time-opti

预请求

实现一个webpack的预请求插件 插件会在 html 的 head 里面插入一段 code 从 query 上面获取参数 提前进行请求接口，插件会在 window 上挂载 usePreFetchApiService 方法，业务方可以使用此方法来获取结果数据。

详情参考 webpack插件，实现h5接口预请求，提升页面秒开率~

接口合并

• 当一次操作需要多个请求时，可以考虑合并这些请求。比如，可以把需要连续进行的API请求合并为一个请求，这样就只需要等待一次网络延迟，也减少了HTTP请求次数。

• 将多个外网调用的http请求 转变为内网环境的多个服务器之间的调用 客户端和各个服务之间可能存在更大的网络延迟，由于接口合并服务器通常和各个服务在同一个内网环境中，所以他们之间的请求就可以得到更快的响应时间， 可以降低网络延迟。

• 在接口合并服务器上，可以更好的同步处理多个请求，降低因网络问题导致的数据一致性问题。

按需请求

不是所有页面打开后立刻就需要所有的数据，可以延迟加载或懒加载部分数据。同时，避免加载不必要的数据，如分页请求，应只请求需要的那一页的数据。

1. 提高加载速度：只请求需要的数据量常常少于请求所有数据，所以响应时间更快。
2. 避免数据冗余：前端只向后端请求当前页面或者当前操作所需要的数据，避免获取到未使用的数据。
3. 减少服务器负载：服务器只需处理需要的信息，而不必为了可能不会被查看的数据而消耗计算资源和带宽。
4. 提高用户体验：用户能更快地看到想要的信息，而不需要等待大量可能不需要的数据加载

性能优化系列文章

• 性能优化合集
• 性能优化之渲染方案ssr,ssg,csr
• 性能优化之全链路图片优化~
• 性能优化之bundle资源优化六大方案