页面渲染的方法、装置、设备、存储介质及程序产品制造方法及图纸

本申请公开了一种页面渲染的方法、装置、设备、存储介质及程序产品，当该方法应用于主线程时包括：当接收到业务模块的接口请求时，基于接口请求向服务器端发起页面请求，该页面请求包括目标URL；接收服务工作线程基于页面请求返回的第一响应数据，第一响应数据为服务工作线程在拦截页面请求后，判定目标URL为指定URL时从缓存数据库中获得的缓存数据；将第一响应数据回传至业务模块，以由业务模块首次页面渲染；接收服务工作线程基于页面请求返回的第二响应数据，第二响应数据为服务工作线程将页面请求发送至服务器后接收服务器返回的数据；将第二响应数据回传至业务模块，以由业务模块进行再次页面渲染，以更早地响应页面请求，缩短用户的等待时长。缩短用户的等待时长。缩短用户的等待时长。

【技术实现步骤摘要】
页面渲染的方法、装置、设备、存储介质及程序产品


[0001]本申请涉及web数据处理
，尤其涉及一种页面渲染的方法、一种页面渲染的装置、一种电子设备、一种计算机可读存储介质以及一种计算机程序产品。

技术介绍

[0002]在一些海外项目中，由于部分国家的网络情况、客户端设备较差，导致在页面加载过程中，网络请求消耗的时间较久。虽然其中静态资源可以通过CDN或者客户端缓存的方案进行优化，但接口请求仍然会耗费较多的时间。

技术实现思路

[0003]本申请提供一种页面渲染的方法、装置、设备、存储介质及程序产品，以解决现有技术中接口请求耗费较多的时间的问题。
[0004]第一方面，本申请实施例提供了一种页面渲染的方法，所述方法应用于浏览器的主线程中，所述方法包括：
[0005]当接收到业务模块的接口请求时，基于所述接口请求向服务器端发起页面请求，所述页面请求包括请求的接口对应的目标URL；
[0006]接收服务工作线程基于所述页面请求返回的第一响应数据，所述第一响应数据为所述服务工作线程在拦截所述页面请求后，判定所述目标URL为指定URL时，从预设的缓存数据库中获得的缓存数据；
[0007]将所述第一响应数据回传至所述业务模块，以由所述业务模块采用所述第一响应数据进行首次页面渲染；
[0008]接收所述服务工作线程基于所述页面请求返回的第二响应数据，所述第二响应数据为所述服务工作线程将所述页面请求发送至服务器后，接收服务器返回的数据；
[0009]将所述第二响应数据回传至所述业务模块，以由所述业务模块采用所述第二响应数据进行再次页面渲染。
[0010]第二方面，本申请实施例还提供了一种页面渲染的方法，所述方法应用于服务工作线程中，所述方法包括：
[0011]拦截浏览器的主线程发送的页面请求，并判断所述页面请求中的目标URL地址是否为指定URL地址；
[0012]若所述页面请求中的目标URL地址为指定URL地址，则在预设的缓存数据库中获取所述目标URL地址对应的缓存数据，并将所述缓存数据作为第一响应数据发送至所述主线程，所述第一响应数据用于进行首次页面渲染；
[0013]根据所述页面请求从服务器中获取第二响应数据；
[0014]将所述第二响应数据发送至所述主线程，所述第二响应数据用于进行再次页面渲染。
[0015]第三方面，本申请实施例还提供了一种页面渲染的装置，所述装置应用于浏览器
的主线程中，所述装置包括：
[0016]页面请求发起单元，用于当接收到业务模块的接口请求时，基于所述接口请求向服务器端发起页面请求，所述页面请求包括请求的接口对应的目标URL；
[0017]第一响应数据接收单元，用于接收服务工作线程基于所述页面请求返回的第一响应数据，所述第一响应数据为所述服务工作线程在拦截所述页面请求后，判定所述目标URL为指定URL时，从预设的缓存数据库中获得的缓存数据；
[0018]第一响应数据回传单元，用于将所述第一响应数据回传至所述业务模块，以由所述业务模块采用所述第一响应数据进行首次页面渲染；
[0019]第二响应数据接收单元，用于接收所述服务工作线程基于所述页面请求返回的第二响应数据，所述第二响应数据为所述服务工作线程将所述页面请求发送至服务器后，接收服务器返回的数据；
[0020]第二响应数据回传单元，用于将所述第二响应数据回传至所述业务模块，以由所述业务模块采用所述第二响应数据进行再次页面渲染。
[0021]第四方面，本申请实施例还提供了一种页面渲染的装置，所述装置应用于服务工作线程中，所述装置包括：
[0022]请求拦截单元，用于拦截浏览器的主线程发送的页面请求，并判断所述页面请求中的目标URL地址是否为指定URL地址；
[0023]第一响应单元，用于若所述页面请求中的目标URL地址为指定URL地址，则在预设的缓存数据库中获取所述目标URL地址对应的缓存数据，并将所述缓存数据作为第一响应数据发送至所述主线程，所述第一响应数据用于进行首次页面渲染；
[0024]第二响应单元，用于根据所述页面请求从服务器中获取第二响应数据，并将所述第二响应数据发送至所述主线程，所述第二响应数据用于进行再次页面渲染。
[0025]第五方面，本申请实施例还提供了一种电子设备，所述电子设备包括：
[0026]一个或多个处理器；
[0027]存储装置，用于存储一个或多个程序，
[0028]当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述第一方面或第二方面的方法。
[0029]第六方面，本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述第一方面或第二方面的方法。
[0030]第七方面，本申请实施例还提供了一种计算机程序产品，所述计算机程序产品包括计算机可执行指令，所述计算机可执行指令在被执行时用于实现上述第一方面或第二方面的方法。
[0031]本申请所提供的技术方案，具有如下有益效果：
[0032]在本实施例中，浏览器主线程在向服务器端发出针对业务模块的接口请求而生成的页面请求以后，该页面请求被服务工作线程拦截，服务工作线程根据该页面请求中的目标URL从缓存数据库中查找对应的缓存数据作为第一响应数据返回至主线程中，该第一响应数据用于回传至业务模块中进行首次渲染。同时服务工作线程继续向服务器请求第二响应数据，并将第二响应数据返回至主线程中，该第二响应数据用于回传至业务模块中进行再次渲染。通过这种先基于旧的缓存数据进行接口响应，同时也向服务器端进行接口请求，
等到服务器返回响应数据后再次进行页面渲染，这样处理可以更早地渲染主要数据，用户则不需要因为接口请求耗时过长而进行等待，缩短用户的等待时长，提高页面渲染时效。
附图说明
[0033]图1是本申请实施例一提供的一种页面渲染的方法实施例的流程图；
[0034]图2是本申请实施例一提供的Service worker与浏览器端和服务器端的通信架构示意图；
[0035]图3是本申请实施例一提供的一种游戏品类页面首次渲染示意图；
[0036]图4是本申请实施例一提供的一种游戏品类页面再次渲染示意图；
[0037]图5是本申请实施例二提供的一种页面渲染的方法实施例的流程图；
[0038]图6是本申请实施例三提供的一种页面渲染的方法实施例的流程图；
[0039]图7是本申请实施例四提供的一种页面渲染的装置实施例的结构框图；
[0040]图8是本申请实施例五提供的一种页面渲染的装置实施例的结构框图；
[0041]图9是本申请实施例六提供的一种电子设备的结构示意图。
具体实施方式
[0042]下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本申请，而非对本申请的限定本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面渲染的方法，其特征在于，所述方法应用于浏览器的主线程中，所述方法包括：当接收到业务模块的接口请求时，基于所述接口请求向服务器端发起页面请求，所述页面请求包括请求的接口对应的目标URL；接收服务工作线程基于所述页面请求返回的第一响应数据，所述第一响应数据为所述服务工作线程在拦截所述页面请求后，判定所述目标URL为指定URL时，从预设的缓存数据库中获得的缓存数据；将所述第一响应数据回传至所述业务模块，以由所述业务模块采用所述第一响应数据进行首次页面渲染；接收所述服务工作线程基于所述页面请求返回的第二响应数据，所述第二响应数据为所述服务工作线程将所述页面请求发送至服务器后，接收服务器返回的数据；将所述第二响应数据回传至所述业务模块，以由所述业务模块采用所述第二响应数据进行再次页面渲染。2.根据权利要求1所述的方法，其特征在于，在所述基于所述接口请求向服务器端发起页面请求之前，所述方法还包括：从所述接口请求中获取promise对象，所述promise对象包括then响应方法；将所述then响应方法存入预先生成的全局队列中，并获取所述then响应方法在所述全局队列中的存储标识；将所述存储标识添加到所述页面请求中。3.根据权利要求2所述的方法，其特征在于，所述第一响应数据携带所述存储标识；所述将所述第一响应数据回传至所述业务模块，包括：在所述全局队列中查找所述存储标识，以获得对应的then响应方法；调用所述then响应方法，以将所述第一响应数据回传至所述业务模块中。4.根据权利要求2或3所述的方法，其特征在于，所述方法还包括：当完成页面渲染以后，则在所述全局队列中删除所述then响应方法及对应的存储标识。5.根据权利要求1
‑
3任一项所述的方法，其特征在于，在所述接收服务工作线程基于所述页面请求返回的第一响应数据之前，所述方法还包括：在所述主线程中添加对所述服务工作线程的发布信息的监听；所述接收服务工作线程基于所述页面请求返回的第一响应数据，包括：当监听到所述服务工作线程的发布信息时，从所述发布信息中提取所述第一响应数据。6.一种页面渲染的方法，其特征在于，所述方法应用于服务工作线程中，所述方法包括：拦截浏览器的主线程发送的页面请求，并判断所述页面请求中的目标URL地址是否为指定URL地址；若所述页面请求中的目标URL地址为指定URL地址，则在预设的缓存数据库中获取所述目标URL地址对应的缓存数据，并将所述缓存数据作为第一响应数据发送至所述主线程，所述第一响应数据用于进行首次页面渲染；
根据所述页面请求从服务器中获取第二响应数据；将所述第二响应数据发送至所述主线程，所述第二响应数据用于进行再次页面渲染。7.根据权...

【专利技术属性】
技术研发人员：李怡之昊，
申请(专利权)人：广州虎牙科技有限公司，
类型：发明
国别省市：