CN113961832A - 页面渲染的方法、装置、设备、存储介质及程序产品 - Google Patents

Abstract

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

Description

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

技术领域

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

背景技术

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

发明内容

本申请提供一种页面渲染的方法、装置、设备、存储介质及程序产品，以解决现有技术中接口请求耗费较多的时间的问题。

第一方面，本申请实施例提供了一种页面渲染的方法，所述方法应用于浏览器的主线程中，所述方法包括：

当接收到业务模块的接口请求时，基于所述接口请求向服务器端发起页面请求，所述页面请求包括请求的接口对应的目标URL；

接收服务工作线程基于所述页面请求返回的第一响应数据，所述第一响应数据为所述服务工作线程在拦截所述页面请求后，判定所述目标URL为指定URL时，从预设的缓存数据库中获得的缓存数据；

将所述第一响应数据回传至所述业务模块，以由所述业务模块采用所述第一响应数据进行首次页面渲染；

接收所述服务工作线程基于所述页面请求返回的第二响应数据，所述第二响应数据为所述服务工作线程将所述页面请求发送至服务器后，接收服务器返回的数据；

将所述第二响应数据回传至所述业务模块，以由所述业务模块采用所述第二响应数据进行再次页面渲染。

第二方面，本申请实施例还提供了一种页面渲染的方法，所述方法应用于服务工作线程中，所述方法包括：

拦截浏览器的主线程发送的页面请求，并判断所述页面请求中的目标URL地址是否为指定URL地址；

若所述页面请求中的目标URL地址为指定URL地址，则在预设的缓存数据库中获取所述目标URL地址对应的缓存数据，并将所述缓存数据作为第一响应数据发送至所述主线程，所述第一响应数据用于进行首次页面渲染；

根据所述页面请求从服务器中获取第二响应数据；

将所述第二响应数据发送至所述主线程，所述第二响应数据用于进行再次页面渲染。

第三方面，本申请实施例还提供了一种页面渲染的装置，所述装置应用于浏览器的主线程中，所述装置包括：

页面请求发起单元，用于当接收到业务模块的接口请求时，基于所述接口请求向服务器端发起页面请求，所述页面请求包括请求的接口对应的目标URL；

第一响应数据接收单元，用于接收服务工作线程基于所述页面请求返回的第一响应数据，所述第一响应数据为所述服务工作线程在拦截所述页面请求后，判定所述目标URL为指定URL时，从预设的缓存数据库中获得的缓存数据；

第一响应数据回传单元，用于将所述第一响应数据回传至所述业务模块，以由所述业务模块采用所述第一响应数据进行首次页面渲染；

第二响应数据接收单元，用于接收所述服务工作线程基于所述页面请求返回的第二响应数据，所述第二响应数据为所述服务工作线程将所述页面请求发送至服务器后，接收服务器返回的数据；

第二响应数据回传单元，用于将所述第二响应数据回传至所述业务模块，以由所述业务模块采用所述第二响应数据进行再次页面渲染。

第四方面，本申请实施例还提供了一种页面渲染的装置，所述装置应用于服务工作线程中，所述装置包括：

请求拦截单元，用于拦截浏览器的主线程发送的页面请求，并判断所述页面请求中的目标URL地址是否为指定URL地址；

第一响应单元，用于若所述页面请求中的目标URL地址为指定URL地址，则在预设的缓存数据库中获取所述目标URL地址对应的缓存数据，并将所述缓存数据作为第一响应数据发送至所述主线程，所述第一响应数据用于进行首次页面渲染；

第二响应单元，用于根据所述页面请求从服务器中获取第二响应数据，并将所述第二响应数据发送至所述主线程，所述第二响应数据用于进行再次页面渲染。

第五方面，本申请实施例还提供了一种电子设备，所述电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述第一方面或第二方面的方法。

第六方面，本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述第一方面或第二方面的方法。

第七方面，本申请实施例还提供了一种计算机程序产品，所述计算机程序产品包括计算机可执行指令，所述计算机可执行指令在被执行时用于实现上述第一方面或第二方面的方法。

本申请所提供的技术方案，具有如下有益效果：

在本实施例中，浏览器主线程在向服务器端发出针对业务模块的接口请求而生成的页面请求以后，该页面请求被服务工作线程拦截，服务工作线程根据该页面请求中的目标URL从缓存数据库中查找对应的缓存数据作为第一响应数据返回至主线程中，该第一响应数据用于回传至业务模块中进行首次渲染。同时服务工作线程继续向服务器请求第二响应数据，并将第二响应数据返回至主线程中，该第二响应数据用于回传至业务模块中进行再次渲染。通过这种先基于旧的缓存数据进行接口响应，同时也向服务器端进行接口请求，等到服务器返回响应数据后再次进行页面渲染，这样处理可以更早地渲染主要数据，用户则不需要因为接口请求耗时过长而进行等待，缩短用户的等待时长，提高页面渲染时效。

附图说明

图1是本申请实施例一提供的一种页面渲染的方法实施例的流程图；

图2是本申请实施例一提供的Service worker与浏览器端和服务器端的通信架构示意图；

图3是本申请实施例一提供的一种游戏品类页面首次渲染示意图；

图4是本申请实施例一提供的一种游戏品类页面再次渲染示意图；

图5是本申请实施例二提供的一种页面渲染的方法实施例的流程图；

图6是本申请实施例三提供的一种页面渲染的方法实施例的流程图；

图7是本申请实施例四提供的一种页面渲染的装置实施例的结构框图；

图8是本申请实施例五提供的一种页面渲染的装置实施例的结构框图；

图9是本申请实施例六提供的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本申请，而非对本申请的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本申请相关的部分而非全部结构。

实施例一

图1为本申请实施例一提供的一种页面渲染的方法实施例的流程图，本实施例可以应用于浏览器的主线程中，主线程可以与服务工作线程Service worker通信，其中，Service worker是一种由Javascript编写的浏览器端代理脚本，如图2所示，Serviceworker位于浏览器端和服务器端之间，可以充当充当浏览器端与服务端之间的代理服务器。Service worker是基于事件的，只在处理事件时才会被调入内存。当一个页面注册了一个Service worker时，就可以注册一系列事件处理器来响应如网络请求、消息推送等事件。Service worker还可以用来管理缓存，比如：当响应一个网络请求时，可以配置为返回缓存数据还是从网络获取数据。

为了实现对浏览器的接口请求的缓存管理，在浏览器的主线程中可以添加对Service worker发送的posetMessage()信息的监听，并且在Service worker中对主线程的Fetch事件进行监听拦截。其中，Fetch API提供了一个JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应；它还提供了一个全局fetch()方法，该方法提供了一种简单而合理的方式来跨网络异步获取资源。

如图1所示，本实施例可以包括如下步骤：

步骤110，当接收到业务模块的接口请求时，基于所述接口请求向服务器端发起页面请求，所述页面请求包括请求的接口对应的目标URL。

在一种实现中，当用户请求访问页面时，具体业务模块会向浏览器主线程发出接口请求，并传入fn1作为请求响应后调用的方法。主线程接收到该接口请求以后，可以通过Fetch API向服务器端发起页面请求。示例性地，在页面请求中会携带请求的接口对应的目标URL以及其他可选参数。

当然，主线程还可以通过其他方式发出页面请求，如Ajax、Axios等，本实施例对此不作限定。

步骤120，接收服务工作线程基于所述页面请求返回的第一响应数据。

其中，第一响应数据为Service worker在拦截页面请求后，判定其目标URL为指定URL时，从预设的缓存数据库中获得的缓存数据。

具体的，主线程发出的页面请求会被Service worker拦截。然后在Serviceworker中判断该页面请求携带的目标URL是否为需要被缓存的指定URL。在一种实现中，可以预先配置URL地址白名单，如果目标URL存在于该URL地址白名单中，则判定该目标URL为指定URL。该URL地址白名单可以存储在缓存中。

如果Service worker判定当前目标URL为指定URL，则可以从缓存数据库查找该目标URL以及其他参数，从而获得该目标URL对应的缓存数据，接着将该缓存数据作为第一响应数据，并通过posetMessage()将第一响应数据返回至主线程中。

在一种实现中，缓存数据库中缓存的该URL对应的缓存数据可以为该URL上一次被请求时，从服务器中加载的数据。

步骤130，将所述第一响应数据回传至所述业务模块，以由所述业务模块采用所述第一响应数据进行首次页面渲染。

具体的，当主线程监听到posetMessage()时，则可以从posetMessage()中提取第一响应数据，然后主线程执行回调函数fn1，以向业务模块返回第一响应数据，由业务模块根据该第一响应数据来完成页面的首次渲染。

其中，首次页面渲染可以为对页面的部分基础数据的渲染，该部分基础数据可以为短时间内不会发生变化的接口数据，例如游戏品类页、文章评论页等页面，其中的部分页面数据短时间内不会发生变更，一般只会增加，如果能在Service worker中缓存相关的在短时间内不会发生变化的接口数据，则能实现页面的快速加载。而在google的性能指标中，越早出现主要内容则对用户的体验会更好，相应的各项加载性能指标也会更好，因此根据缓存数据提前渲染页面可以给用户带来更好的体验，对页面加载性能指标也会有一定的提高。

进一步地，该首次渲染的第一响应数据可以为当前页面上一次被请求时缓存的、从服务器中请求的响应数据，基于上一次请求时的数据进行当前次请求的首次页面渲染，从而可以避免处于从服务器进行接口请求时耗时过长导致的页面空白的等待状态，提高用户体验。

步骤140，接收所述服务工作线程基于所述页面请求返回的第二响应数据。

其中，第二响应数据为Service worker将页面请求发送至服务器后，接收服务器返回的数据。具体的，无论Service worker能否获得第一响应数据，都需要基于页面请求向服务器请求响应数据，并在接收到服务器返回的响应数据以后，将该响应数据作为第二响应数据，通过posetMessage()发送至主线程中。主线程监听到posetMessage()以后，从中提取出第二响应数据。

步骤150，将所述第二响应数据回传至所述业务模块，以由所述业务模块采用所述第二响应数据进行再次页面渲染。

在一种实现中，当主线程获得第二响应数据以后，则再次执行回调函数fn1，以向业务模块返回第二响应数据，由业务模块根据该第二响应数据来完成页面的再次渲染，从而实现对首次渲染的页面更新。

需要说明的是，如果第一响应数据与第二响应数据相同，则首次页面渲染和再次页面渲染的页面都是相同的。一般而言，第一响应数据与第二响应数据会存在差异，导致两次渲染的页面也是稍有不同的。例如，在一次游戏品类页面的请求中，图3为首次渲染的页面，图4为再次渲染的页面，根据两者的对比可以看出，两次渲染的页面的差异是比较小的，则首次渲染时可以展示大部分页面内容给用户，对于用户而言可以尽早看到页面内容，缩短用户的等待时间，从而提高渲染效率。

在本实施例中，浏览器主线程在向服务器端发出针对业务模块的接口请求而生成的页面请求以后，该页面请求被服务工作线程拦截，服务工作线程根据该页面请求中的目标URL从缓存数据库中查找对应的缓存数据作为第一响应数据返回至主线程中，该第一响应数据用于回传至业务模块中进行首次渲染。同时服务工作线程继续向服务器请求第二响应数据，并将第二响应数据返回至主线程中，该第二响应数据用于回传至业务模块中进行再次渲染。通过这种先基于旧的缓存数据进行接口响应，同时也向服务器端进行接口请求，等到服务器返回响应数据后再次进行页面渲染，这样处理可以更早地渲染主要数据，用户则不需要因为接口请求耗时过长而进行等待，缩短用户的等待时长，提高页面渲染时效。

实施例二

图5为本申请实施例二提供的一种页面渲染的方法实施例的流程图，本实施例在实施例一的基础上进行更具体的说明。实施例一基本实现了对接口缓存的过程，但在实际实现过程中，大部分项目是基于promise的方式进行请求和响应。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。例如，假设某个基于Promise对象的业务模块的代码为：

Model.getLiveRoomList().then(data＝>(renderLiveRoom(data)))

即调用api模块(Model)中具体的一个接口请求方法(getLiveRoomList)，其会返回一个原生promise，当接口返回后会执行then中传入的方法(即实施例一种的fn1)。然后在拿到数据(data)后将数据传入到对应的处理方法(data)中。JavaScript中原生promise的规范决定了renderLiveRoom只会执行一次，不能满足多次被执行的需求。本实施例为了实现fn1能够执行超过一次，对api模块底层请求部分进行优化，实现了一种可以多次加载then的操作。

如图5所示，本实施例可以包括如下步骤：

步骤510，当接收到业务模块的接口请求时，从所述接口请求中获取promise对象，所述promise对象包括then响应方法。

在一种实现中，当用户请求访问页面时，具体业务模块会向浏览器主线程发出接口请求，该接口请求中可以包括promise对象，在该promise对象中可以包括请求响应后调用的then响应方法。主线程通过对接口请求进行解析提取对应的promise对象。

步骤520，将所述then响应方法存入预先生成的全局队列中，并获取所述then响应方法在所述全局队列中的存储标识。

在该步骤中，当从promise对象中提取then响应方法以后，则可以将该then响应方法存入至预先生成的全局队列ApiHandleMap中，并获取该then响应方法在该ApiHandleMap中的存储标识。

在一种示例中，在ApiHandleMap中，可以以存储标识作为key，以对应的then响应方法作为value，采用键值对的形式存储then响应方法。其中，存储标识可以采用各种在ApiHandleMap中可唯一识别then响应方法的标识形式，比如可以以一个从0开始的全局递增变量作为key字段来确定队列中每个记录的key值。

步骤530，将所述存储标识添加到所述页面请求中并发出所述页面请求，其中，所述页面请求携带所述存储标识以及请求的接口对应的目标URL。

在一种实现中，当浏览器主线程可以通过Fetch API向服务器发起页面请求，在该页面请求中可以携带请求的接口对应的目标URL、存储标识以及其他可选参数。

步骤540，接收服务工作线程基于所述页面请求返回的第一响应数据，所述第一响应数据携带所述存储标识。

其中，第一响应数据为所述服务工作线程在拦截所述页面请求后，判定所述目标URL为指定URL时，从预设的缓存数据库中获取的缓存数据。

具体的，主线程发出的页面请求会被Service worker拦截。然后在Serviceworker中判断该目标URL是否为指定URL，如果判定当前目标URL为指定URL，则可以从缓存数据库查找该目标URL以及其他参数，从而获得该目标URL对应的缓存数据，接着将该缓存数据作为第一响应数据，并通过posetMessage()将第一响应数据以及对应的存储标识返回至主线程中。

在主线程中可以预先添加对Service worker的发布信息posetMessage()的监听。当主线程监听到该posetMessage()以后，则可以从posetMessage()中提取出存储标识以及第一响应数据。

步骤550，在所述全局队列中查找所述存储标识，以获得对应的then响应方法，并调用所述then响应方法，以将所述第一响应数据回传至所述业务模块中，由所述业务模块采用所述第一响应数据进行首次页面渲染。

具体的，当主线程获得存储标识以后，可以根据提取的存储标识在ApiHandleMap中进行查找，以定位该存储标识所在的数据记录，并从该数据记录中获得对应的then响应方法，然后调用该then响应方法来进行回调操作，以将该第一响应数据回传至业务模块中，由业务模块基于该第一响应数据进行首次页面渲染。

步骤560，接收所述服务工作线程基于所述页面请求返回的第二响应数据，所述第二响应数据携带所述存储标识。

其中，所述第二响应数据为所述服务工作线程将所述页面请求发送至服务器后，接收服务器返回的数据。

具体的，无论Service worker能否获得第一响应数据，都可以基于页面请求向服务器请求响应数据，并在接收到服务器返回的响应数据以后，将该响应数据作为第二响应数据，并通过posetMessage()将第二响应数据以及接收的存储标识发送至主线程中。主线程监听到posetMessage()以后，从中提取出第二响应数据以及存储标识。

步骤570，在所述全局队列中查找所述存储标识，以获得对应的then响应方法，并调用所述then响应方法，以将所述第二响应数据回传至所述业务模块中，由所述业务模块采用所述第二响应数据进行再次页面渲染。

具体的，当主线程获得存储标识以及第二响应数据以后，可以再次根据提取的存储标识在ApiHandleMap中进行查找，以定位该存储标识所在的数据记录，并从该数据记录中获得对应的then响应方法，然后调用该then响应方法来进行回调操作，以将该第二响应数据回传至业务模块中，由业务模块基于该第二响应数据进行再次页面渲染。

在一种实施例中，本实施例还可以包括如下步骤：

当完成页面渲染以后，则在所述全局队列中删除所述then响应方法。

当对页面渲染完成以后，则主线程可以根据存储标识，在ApiHandleMap中进行查找，从而删除该存储标识所在的记录，包括删除对应的then响应方法以及存储标识，以减少内存的占用。

其中，主线程在监听到业务模块进行再次页面渲染完成以后，则可以判定页面渲染完成。

在相关技术中对Service worker的用法是实现离线应用，即在Service worker中对请求的静态资源进行拦截，然后判断是否存在缓存，如果存在缓存则可直接返回，减少了网络请求的必要性。但如果直接将Service worker直接用于接口请求，则无法解决页面更新的问题。因此，本实施例通过对fetch及promise进行了优化，通过设置全局队列，将promise对象中的then响应方法存入全局队列中并获得存储标识，后续在请求和响应时都携带该存储标识，根据该存储标识，主线程可以从全局队列中找到对应的then响应方法并执行，从而实现了一种可以多次加载then的操作。且整体改造的地方较少，只需要在接口请求层进行改造，便于实现。

实施例三

图6为本申请实施例三提供的一种页面渲染的方法实施例的流程图，本实施例从Service worker侧进行说明，可以包括如下步骤：

步骤610，拦截浏览器的主线程发送的页面请求，并判断所述页面请求中的目标URL地址是否为指定URL地址。

具体的，在Service worker侧可以对主线程发送的请求进行监听拦截。示例性的，该请求可以为Fetch操作请求。当Service worker拦截到该页面请求时，则可以从该页面请求中提取出目标URL，并判断该目标URL是否为需要被缓存的指定URL。

在一种实现中，可以预先配置URL地址白名单，如果目标URL存在于该URL地址白名单中，则判定该目标URL为指定URL。该URL地址白名单可以存储在缓存中。

通过配置URL地址白名单，可以去除一些需要对精确度要求较高且更新频繁的接口，如直播间信息之类的URL。

步骤620，若所述页面请求中的目标URL地址为指定URL地址，则在预设的缓存数据库中获取所述目标URL地址对应的缓存数据，并将所述缓存数据作为第一响应数据发送至所述主线程，所述第一响应数据用于进行首次页面渲染。

在该步骤中，如果Service worker判定当前目标URL为指定URL，则可以从缓存数据库查找该目标URL以及其他参数，从而获得该目标URL对应的缓存数据，接着将该缓存数据作为第一响应数据，并通过posetMessage()将第一响应数据返回至主线程中。

其中，该缓存数据库用于存储浏览器的接口请求的缓存数据。示例性地，缓存数据库可以包括索引数据库(indexDB)或高速缓存数据库(cache storage)等数据存储形式。

在一种实施例中，Service worker拦截的页面请求中如果携带存储标识，则Service worker在返回响应数据(包括第一响应数据)时也需要携带该存储标识，以便于主线程能够根据该存储标识执行相关的回调操作。

步骤630，根据所述页面请求从服务器中获取第二响应数据。

具体的，如果页面请求中的目标URL地址不是指定URL地址，则可以直接执行步骤630。或者，如果在缓存数据库中不存在该目标URL地址对应的缓存数据，也直接执行步骤630。或者，当返回第一响应数据至主线程以后，还需要继续执行步骤630。也就是说，无论Service worker是否成功获取并返回第一响应数据，都会继续执行步骤630，将页面请求发送至服务器中，等收到服务器返回的响应数据以后，则将该响应数据作为第二响应数据。

步骤640，将所述第二响应数据发送至所述主线程，所述第二响应数据用于进行再次页面渲染。

当Service worker获得服务器返回的第二响应数据以后，则可以通过posetMessage()将该第二响应数据发送至主线程中，该第二响应数据用于进行再次页面渲染。。

在一种实施例中，如果页面请求中携带存储标识，则Service worker在返回第二响应数据时也需要携带该存储标识，以便于主线程能够根据该存储标识执行相关的回调操作。

在一种实施例中，如果当前拦截的目标URL为指定URL，则表示该URL对应的第二响应数据需要被缓存，从而可以将该第二响应数据作为缓存数据存储到缓存数据库中，以对缓存数据库中在先的缓存数据进行更新。

在本实施例中，在Service worker中实现接口数据缓存，当Service worker拦截到浏览器主线程的页面请求时，可以首先从缓存数据库中查找该页面请求是否存在缓存数据，并在查找到该缓存数据以后先返回缓存数据至主线程，从而实现尽早响应，节省了从服务器获取响应数据导致的时间耗费，提高了页面渲染的时效。

实施例四

图7为本申请实施例四提供的一种页面渲染的装置实施例的结构框图，所述装置可以应用于浏览器的主线程中，可以包括如下单元：

页面请求发起单元710，用于当接收到业务模块的接口请求时，基于所述接口请求向服务器端发起页面请求，所述页面请求包括请求的接口对应的目标URL；

第一响应数据接收单元720，用于接收服务工作线程基于所述页面请求返回的第一响应数据，所述第一响应数据为所述服务工作线程在拦截所述页面请求后，判定所述目标URL为指定URL时，从预设的缓存数据库中获得的缓存数据；

第一响应数据回传单元730，用于将所述第一响应数据回传至所述业务模块，以由所述业务模块采用所述第一响应数据进行首次页面渲染；

第二响应数据接收单元740，用于接收所述服务工作线程基于所述页面请求返回的第二响应数据，所述第二响应数据为所述服务工作线程将所述页面请求发送至服务器后，接收服务器返回的数据；

第二响应数据回传单元750，用于将所述第二响应数据回传至所述业务模块，以由所述业务模块采用所述第二响应数据进行再次页面渲染。

在一种实施例中，所述装置还可以包括如下单元：

promise对象获取单元，用于从所述接口请求中获取promise对象，所述promise对象包括then响应方法；

队列存储单元，用于将所述then响应方法存入预先生成的全局队列中，并获取所述then响应方法在所述全局队列中的存储标识；

标识添加单元，用于将所述存储标识添加到所述页面请求中。

在一种实施例中，所述第一响应数据携带所述存储标识；

所述第一响应数据回传单元730具体用于：

在所述全局队列中查找所述存储标识，以获得对应的then响应方法；

调用所述then响应方法，以将所述第一响应数据回传至所述业务模块中。

在一种实施例中，所述装置还可以包括如下单元：

数据删除单元，用于当完成页面渲染以后，则在所述全局队列中删除所述then响应方法及对应的存储标识。

在一种实施例中，所述装置还可以包括如下单元：

信息监听单元，用于在所述主线程中添加对所述服务工作线程的发布信息的监听；

所述第一响应数据接收单元720具体用于：

当监听到所述服务工作线程的发布信息时，从所述发布信息中提取所述第一响应数据。

本申请实施例所提供的一种页面渲染的装置可执行本申请实施例一或实施例二中的一种页面渲染的方法，具备执行方法相应的功能模块和有益效果。

实施例五

图8为本申请实施例五提供的一种页面渲染的装置实施例的结构框图，所述装置应用于服务工作线程中，可以包括如下单元：

请求拦截单元810，用于拦截浏览器的主线程发送的页面请求，并判断所述页面请求中的目标URL地址是否为指定URL地址；

第一响应单元820，用于若所述页面请求中的目标URL地址为指定URL地址，则在预设的缓存数据库中获取所述目标URL地址对应的缓存数据，并将所述缓存数据作为第一响应数据发送至所述主线程，所述第一响应数据用于进行首次页面渲染；

第二响应单元830，用于根据所述页面请求从服务器中获取第二响应数据，并将所述第二响应数据发送至所述主线程，所述第二响应数据用于进行再次页面渲染。

在一种实施例中，所述装置还可以包括如下单元：

缓存数据更新单元，用于将所述第二响应数据作为缓存数据存储到所述缓存数据库中，以对所述缓存数据库中在先的缓存数据进行更新。

在一种实施例中，所述页面请求携带存储标识，则在返回所述第一响应数据或所述第二响应数据时携带所述存储标识。

本申请实施例所提供的一种页面渲染的装置可执行本申请实施例三中的一种页面渲染的方法，具备执行方法相应的功能模块和有益效果。

实施例六

图9为本申请实施例六提供的一种电子设备的结构示意图，如图9所示，该电子设备包括处理器910、存储器920、输入装置930和输出装置940；电子设备中处理器910的数量可以是一个或多个，图9中以一个处理器910为例；电子设备中的处理器910、存储器920、输入装置930和输出装置940可以通过总线或其他方式连接，图9中以通过总线连接为例。

存储器920作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本申请实施例中的上述实施例一或实施例二或实施例三对应的程序指令/模块。处理器910通过运行存储在存储器920中的软件程序、指令以及模块，从而执行电子设备的各种功能应用以及数据处理，即实现上述的方法实施例一或实施例二或实施例三中提到的方法。

存储器920可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端的使用所创建的数据等。此外，存储器920可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器920可进一步包括相对于处理器910远程设置的存储器，这些远程存储器可以通过网络连接至设备/终端/服务器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置930可用于接收输入的数字或字符信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入。输出装置940可包括显示屏等显示设备。

实施例七

本申请实施例七还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行上述方法实施例一至三中任一实施例的方法。

当然，本申请实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上所述的方法操作，还可以执行本申请任意实施例所提供的方法中的相关操作。

实施例八

本申请实施例八还提供一种计算机程序产品，该计算机程序产品包括计算机可执行指令，所述计算机可执行指令在由计算机处理器执行时用于执行上述方法实施例一至实施例三中任一实施例的方法。

当然，本申请实施例所提供的一种计算机程序产品，其计算机可执行指令不限于如上所述的方法操作，还可以执行本申请任意实施例所提供的方法中的相关操作。

通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本申请可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等，包括若干指令用以使得一台电子设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

值得注意的是，上述装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。

注意，上述仅为本申请的较佳实施例及所运用技术原理。本领域技术人员会理解，本申请不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本申请的保护范围。因此，虽然通过以上实施例对本申请进行了较为详细的说明，但是本申请不仅仅限于以上实施例，在不脱离本申请构思的情况下，还可以包括更多其他等效实施例，而本申请的范围由所附的权利要求范围决定。

Claims (13)

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.根据权利要求6所述的方法，其特征在于，在所述根据所述页面请求从服务器中获取第二响应数据之后，所述方法还包括：

将所述第二响应数据作为缓存数据存储到所述缓存数据库中，以对所述缓存数据库中在先的缓存数据进行更新。

8.根据权利要求6或7所述的方法，其特征在于，所述页面请求携带存储标识，则在返回所述第一响应数据或所述第二响应数据时携带所述存储标识。

9.一种页面渲染的装置，其特征在于，所述装置应用于浏览器的主线程中，所述装置包括：

页面请求发起单元，用于当接收到业务模块的接口请求时，基于所述接口请求向服务器端发起页面请求，所述页面请求包括请求的接口对应的目标URL；

第一响应数据接收单元，用于接收服务工作线程基于所述页面请求返回的第一响应数据，所述第一响应数据为所述服务工作线程在拦截所述页面请求后，判定所述目标URL为指定URL时，从预设的缓存数据库中获得的缓存数据；

第一响应数据回传单元，用于将所述第一响应数据回传至所述业务模块，以由所述业务模块采用所述第一响应数据进行首次页面渲染；

第二响应数据接收单元，用于接收所述服务工作线程基于所述页面请求返回的第二响应数据，所述第二响应数据为所述服务工作线程将所述页面请求发送至服务器后，接收服务器返回的数据；

第二响应数据回传单元，用于将所述第二响应数据回传至所述业务模块，以由所述业务模块采用所述第二响应数据进行再次页面渲染。

10.一种页面渲染的装置，其特征在于，所述装置应用于服务工作线程中，所述装置包括：

请求拦截单元，用于拦截浏览器的主线程发送的页面请求，并判断所述页面请求中的目标URL地址是否为指定URL地址；

第一响应单元，用于若所述页面请求中的目标URL地址为指定URL地址，则在预设的缓存数据库中获取所述目标URL地址对应的缓存数据，并将所述缓存数据作为第一响应数据发送至所述主线程，所述第一响应数据用于进行首次页面渲染；

第二响应单元，用于根据所述页面请求从服务器中获取第二响应数据，并将所述第二响应数据发送至所述主线程，所述第二响应数据用于进行再次页面渲染。

11.一种电子设备，其特征在于，所述电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-8任一项所述的方法。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-8任一项所述的方法。

13.一种计算机程序产品，所述计算机程序产品包括计算机可执行指令，所述计算机可执行指令在被执行时用于实现权利要求1-8中任一项所述的方法。

Images