一种并发网络请求处理方法、装置、设备及存储介质制造方法及图纸

技术编号:38020967 阅读:9 留言:0更新日期:2023-06-30 10:47
本发明专利技术涉及前端应用技术及数字医疗领域,公开了一种并发网络请求处理方法、装置、设备及存储介质,该方法包括:通过服务工作线程Service Worker同时发起至少一个网络请求,服务工作线程Service Worker接收与网络请求对应的响应数据;将响应数据发送给浏览器主线程,以进行页面展示渲染。该实施方式可提升前端网络请求的并发性能,加快页面加载速度,减小网络卡顿现象,解决高并发网络请求导致用户体验下降的技术问题。体验下降的技术问题。体验下降的技术问题。

【技术实现步骤摘要】
一种并发网络请求处理方法、装置、设备及存储介质


[0001]本申请涉及前端应用技术及数字医疗领域,尤其是涉及到一种并发网络请求处理方法、装置、设备及存储介质。

技术介绍

[0002]当前Web应用已成为流行趋势,Web应用将Web浏览器用作客户端,省去了传统应用软件平台兼容、安装和部署的麻烦,特别是提供SaaS服务的Web应用大多采用客户端渲染的方式,其在使用过程中需要向后端服务器发起请求以获取动态数据,并通过浏览器进行渲染页面展示渲染,而渲染即是作是将HTML、CSS、JavaScript和后端动态数据转换为用户可以与之交互的网页,对于并发多个网络请求后端服务器动态数据的情况,浏览器需要等待所有请求接收到响应数据之后才能进行页面展示渲染,而浏览器的等待过程中容易产生界面白屏的情况,降低用户的使用体验,同时,多个并发请求接口获取数据并处理,需要消耗大量资源,阻塞渲染,产生页面卡顿现象,现有技术中的多种Web应用场景中均存在这一技术问题,例如:在医疗领域,医院通过Web应用平台集中采购药品或个人购买药品过程中,出于成本因素往往需要对多家供应商或药店进行比价,在比价过程中,通常后端会统一对接相关供应商/药店,一并输出所有供应商/药店价格,前端可以轮询接口形式获取实时最新价格,这其中个别供应商存在超时,会影响整体的价格数据更新。
[0003]综上所述,现有技术中至少存在如下技术问题:
[0004]1、调用后端接口,同一个接口一次性获取所有供应商实时数据,某些供应商/药店链路存在超时情况,影响应用效果;/>[0005]2、前端整体接口轮询形式,批量替换数据,由于每次数据请求响应的时长不一致,前端界面容易受接口返回产生闪屏波动;
[0006]3、动态请求接口获取数据并展示数据,可能会消耗前端大量资源,由于渲染阻塞,内存小的设备容易产生卡顿现象。
[0007]为解决上述问题,现有技术通常采用将并发请求转换为缓存队列的方式,通过reduce对多个Promise请求构建顺序请求队列,这可有效降低网络请求的并发数,但是这种方式必须等待所有请求都能成功响应,当一个请求出现失败则不会发送后续请求,其效率低,例如现有技术中有100个网络请求需要并发产生,采用现有技术中缓存队列的方式,缓存了100个网络请求依次发出,页面需要阻塞等待100个请求响应后才渲染页面显示,按每个请求是0.1s响应时间计算,100个请求则需要等待将近10秒钟才会接收到全部响应数据,这个期间页面会产生长时间的白屏,现有技术虽然可在一定程度上提高服务请求响应的效率,但是依然不能很好解决,因部分请求延时大或超时导致前端白屏的技术问题。

技术实现思路

[0008]有鉴于此,本申请提供了一种并发网络请求处理方法、装置、设备及存储介质,能够实现的提升前端网络请求的并发性能,加快页面加载速度,减小网络卡顿现象,解决高并
发网络请求导致用户体验下降的技术问题。
[0009]根据本申请的第一方面,提供了一种并发网络请求处理方法,包括:
[0010]通过服务工作线程Service Worker同时发起至少一个网络请求,其中,所述网络请求为数据请求,不同网络请求对应不同网络接口;
[0011]通过所述服务工作线程Service Worker接收与所述网络请求对应的响应数据;
[0012]将所述响应数据发送给浏览器主线程,以进行页面展示渲染。
[0013]根据本申请的第二方面,提供了一种并发网络请求处理装置,包括:
[0014]发送模块,用于通过服务工作线程Service Worker同时发起至少一个网络请求,其中,所述网络请求为数据请求,不同网络请求对应不同网络接口;
[0015]接收模块,用于通过所述服务工作线程Service Worker接收与所述网络请求对应的响应数据;
[0016]渲染模块,用于将所述接收模块接收的响应数据发送给浏览器主线程,以进行页面展示渲染。
[0017]根据本申请的第三方面,提供了一种计算机设备,包括存储器、处理器以及存储在存储器中并可在处理器上运行的计算机程序,处理器执行计算机程序时实现上述一种并发网络请求处理方法的步骤。
[0018]根据本申请的第四方面,提供了一种计算机可读存储介质,计算机可读存储介质存储有计算机程序,计算机程序被处理器执行时实现上述一种并发网络请求处理方法的步骤。
[0019]上述并发网络请求处理方法、装置、计算机设备及存储介质所实现的方案中,首先,通过服务工作线程Service Worker同时发起至少一个网络请求,接着所述服务工作线程Service Worker接收与所述网络请求对应的至少一个响应数据;将所述响应数据发送给浏览器主线程,以进行页面展示渲染。在本专利技术中,通过有效利用工作线程Service Worker的浏览器的多线程处理机制,实现并发网络请求发送,降低了浏览器主线程的处理负载,提升前端页面网络请求的并发性能,加快页面加载数据的速度,减小页面卡顿及白屏现象,解决了高并发网络请求导致的用户体验下降的技术问题。
[0020]上述说明仅是本申请技术方案的概述,为了能够更清楚了解本申请的技术手段,而可依照说明书的内容予以实施,并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂,以下特举本申请的具体实施方式。
附图说明
[0021]此处所说明的附图用来提供对本申请的进一步理解,构成本申请的一部分,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
[0022]图1示出了本申请实施例中提供的一种并发网络请求处理方法的应用场景示意图;
[0023]图2示出了本申请实施例中提供的一种并发网络请求处理方法的流程示意图;
[0024]图3示出了本申请实施例中步骤201的一种流程示意图;
[0025]图4示出了本申请实施例中步骤201的另一种流程示意图;
[0026]图5示出了本申请实施例中提供的一种并发网络请求处理装置的结构示意图。
具体实施方式
[0027]下文中将参考附图并结合实施例来详细说明本申请。需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。
[0028]本专利技术实施例提供的一种并发网络请求处理方法,可应用于如图1所示的应用场景中,在B/S架构下,浏览器作为客户端通过发送网络请求,获取来自于云端的一台或多台服务器的数据响应,浏览器可以为Chrome、Safari、Opera以及以Chrome为内核的浏览器(例如:QQ浏览器、460浏览器等),图中的Service worker通过注册之后,可以独立于浏览器在后台运行,可控制一个或者多个页面。如果的页面在多个窗口中打开,Service Worker不会重复创建。即使浏览器关闭之后,Service worker也同样运行。但是浏览器不会允许Service Worker一直处于工作状态。因为随着用户打开越来越多的注册了本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种并发网络请求处理方法,其特征在于,包括:通过服务工作线程Service Worker同时发起至少一个网络请求,其中,所述网络请求为数据请求,不同网络请求对应不同网络接口;通过所述服务工作线程Service Worker接收与所述网络请求对应的响应数据;将所述响应数据发送给浏览器主线程,以进行页面展示渲染。2.根据权利要求1所述的方法,其特征在于,所述通过服务工作线程Service Worker同时发起至少一个网络请求的步骤之前,还包括:通过在浏览器主线程调用navigator.serviceWorker.register方法注册服务工作线程ServiceWorker。3.根据权利要求1所述的方法,其特征在于,所述通过服务工作线程Service Worker同时发起至少一个网络请求的步骤之前,还包括:获取浏览器信息Navigator,并判断所述浏览器信息Navigator是否包含服务工作线程serviceWorker字段;当所述浏览器信息Navigator包含服务工作线程serviceWorker字段时,启用所述服务工作线程ServiceWorker。4.根据权利要求1所述的方法,其特征在于,所述将所述响应数据发送给浏览器主线程,以进行页面展示渲染的步骤之前,包括:将所述响应数据缓存至浏览器缓存中,其中,所述浏览器缓存包括IndexedDB、WebSQL和Local Storage。5.根据权利要求1至4中任意一项所述的方法,其特征在于,所述通过服务工作线程Service Worker同时发起至少一个网络请求的步骤,具体包括:判断所述网络请求对应接口的服务可用情况;当所述网络请求对应接口的服务不可用时,通过所述服务工作线程ServiceWorker拦截所述网络请求,并返回与所述网络请求对应的缓存数据;当所述网络请求对应接口的服务可用时,服务工作线程ServiceWorker同时发起至少一个网络请求。6.根...

【专利技术属性】
技术研发人员:陆超华王雨微
申请(专利权)人:平安付科技服务有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1