一个html页面请求多个接口,前端页面,一个页面几个接口请求比较合理?

这个考虑问题的角度我觉得不太对,抛开剂量谈毒性都是耍流氓,抛开时间谈数量一样也是耍流氓.

有的接口访问一下是毫秒级的,有的接口访问一下是秒级的.

我们考虑这个问题的时候必然是综合来看的,比如你说的同一个接口使用不同参数,这可能是一种良好的设计,也可能是一种很蠢的设计,没法一概而论.

比如说,首屏展示产品信息,分别展示不同类目的top3,设计成了访问N(类目数)次接口,每次返回单个类目的top(n),n是一个接口参数.

这个接口可能在首屏就请求了8次,前端说这太蠢了.但其实这样设计的接口更灵活,也许有一天运营说,现在我们要显示A产品8个,B产品5个,C产品去掉,前端动动手指就改了,如果后端接口聚合成一个呢?前端要改,后端也要改,后端改了之后,服务器可能还要停机发布,这就非常麻烦了,一般来说,H5的更新是成本最低的,所以后端底层一点,这种偏前端的逻辑就放在页面中也是合理的.

而且js作为异步的语言,区域独立ajax请求,反而可以先加载,先渲染,页面的体验反而会更好,也更方便做模块化.

如果需要获取的数据就是这么多,拆分请求和聚合请求,在时间上可以认为是聚合请求性能更好,这就和Edge和Chrome的对比一样,有说法是Edge其实比Chrome更快,但是Edge一定要等到资源下载完才开始加载,Chrome是边下载变加载的,显得反而比edge快.

另外呢,其实8个请求真的不多.

针对大屏页面上有多个接口导致页面反应慢的情况,前端性能优化可以采取以下几个策略: 1. **数据聚合**[^1]: 合并不必要的接口请求。比如,如果某个视图需要展示的数据可以通过几个API共同获取,那么可以考虑合并这些请求,一次性从服务器获取所有相关的数据,避免频繁的网络通信。 ```javascript // 示例代码 const fetchData = async () => { const combinedData = await Promise.all([ axios.get('/api/data1'), axios.get('/api/data2') ]); // 处理合并后的数据 }; fetchData(); ``` 2. **延迟加载**: 对于不直影响用户立即交互的内容,如滚动到底部才显示的部分,可以采用懒加载(Intersection Observer API)来延后加载。 3. **接口缓存**: 利用浏览器的缓存机制,对常用数据进行缓存,减少重复请求。 4. **预加载**: 使用`preload`或`prefetch`标签预加载部分内容,提高首次加载时用户的感知速度。 5. **优化DOM操作**: 避免过度的DOM操作,特别是批量插入或删除元素,因为这触发重排和回流,影响性能。 6. **合理使用异步和同步**: 分清何时使用异步(async/await)何时使用同步(Promise.resolve),确保UI线程不受阻塞。 7. **监控和调整**: 使用性能分析工具(如Chrome DevTools)持续监控页面性能瓶颈,及时调整优化策略。 通过实施上述措施,可以显著改善大屏页面上的多接口导致的性能问题。记得定期评估和测试优化效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值