CN110704055A - 接口前置的优化方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请实施例公开了一种接口前置的优化方法、装置、电子设备及存储介质，该方法包括：在目标代码的编译阶段，获取目标代码的HTML页面中首次网络请求的接口地址和相关参数；将接口地址和相关参数代入接口请求前置代码模板，生成接口请求前置代码；将接口请求前置代码***到HTML页面中页面脚本之前的位置；在HTML页面运行阶段，并行执行接口请求前置代码和页面脚本，获取执行接口请求前置代码的请求结果和请求状态；对HTML页面发起的符合前置接口的网络接口请求进行拦截，并将请求结果和请求状态返回给HTML页面。本公开实施例实现了接口前置的接入自动化，解放了接入接口前置时所需要的人力，提高了接口前置的优化效率。

Description

接口前置的优化方法、装置、电子设备及存储介质

技术领域

本申请涉及互联网技术领域，特别是涉及一种接口前置的优化方法、装置、电子设备及存储介质。

背景技术

接口前置请求是一种前端性能优化方案，在页面加载相关依赖资源前进行数据接口网络请求，使数据接口网络请求与其他资源加载同时进行，充分利用浏览器的网络通道资源，优化页面内容展现速度。

现有技术中，接口前置优化的接入方式是开发人员手动的梳理每一个页面的逻辑，人工的对代码进行修改，将网络请求方案接入到页面中，改变了页面的原有流程。

现有优化方案的接入方式每接入一个页面都需要开发人员进行重复的工作，耗费一定的人力，效率较低。

发明内容

本申请实施例提供一种接口前置的优化方法、装置、电子设备及存储介质，有助于节省人力并提高优化效率。

为了解决上述问题，第一方面，本申请实施例提供了一种接口前置的优化方法，包括：

在目标代码的编译阶段，获取所述目标代码的超文本标记语言HTML页面中首次网络请求的接口地址和相关参数；

将所述接口地址和所述相关参数代入接口请求前置代码模板，生成所述首次网络请求对应的接口请求前置代码；

将所述接口请求前置代码***到所述HTML页面对应的HTML文档中页面脚本之前的位置；

在所述HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取执行所述接口请求前置代码的请求结果和请求状态；

对所述HTML页面发起的符合前置接口的网络接口请求进行拦截，并将所述请求结果和所述请求状态返回给所述HTML页面。

可选的，在所述对所述HTML页面发起的符合前置接口的网络接口请求进行拦截之前，还包括：

拦截所述HTML页面发起的当前网络接口请求，获取所述当前网络接口请求的接口地址和相关参数；

将所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数进行匹配；

若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配成功，则确定所述当前网络接口请求为符合前置接口的网络接口请求。

可选的，在所述将所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数进行匹配之后，还包括：

若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配失败，则将所述当前网络接口请求发送至后端，并获取请求数据，将所述请求数据返回给所述HTML页面。

可选的，所述在所述HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取所述接口请求前置代码的请求结果和请求状态，包括：

在所述HTML页面运行阶段，执行所述接口请求前置代码通过浏览器第一通道资源向后端发起所述首次网络请求，并获取请求结果和请求状态；

执行所述页面脚本通过浏览器其他通道资源向后端请求对应的数据。

可选的，所述在目标代码的编译阶段，获取所述目标代码的HTML页面中首次网络请求的接口地址和相关参数，包括：

在目标代码的编译阶段，将所述目标代码转换为抽象语法树；

检索所述抽象语法树，确定所述HTML页面中首次网络请求的接口地址和相关参数。

可选的，在所述将所述请求结果和所述请求状态返回给所述HTML页面之后，还包括：

在所述HTML页面接收到所述请求结果和所述请求状态后，使用所述请求结果组装所述TMHL页面或者根据所述请求状态处理异常。

第二方面，本申请实施例提供了一种接口前置的优化装置，包括：

请求参数获取模块，用于在目标代码的编译阶段，获取所述目标代码的HTML页面中首次网络请求的接口地址和相关参数；

前置代码生成模块，用于将所述接口地址和所述相关参数代入接口请求前置代码模板，生成所述首次网络请求对应的接口请求前置代码；

代码***模块，用于将所述接口请求前置代码***到所述HTML页面对应的HTML文档中页面脚本之前的位置；

并行执行模块，用于在所述HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取执行所述接口请求前置代码的请求结果和请求状态；

前置请求实现模块，用于对所述HTML页面发起的符合前置接口的网络接口请求进行拦截，并将所述请求结果和所述请求状态返回给所述HTML页面。

可选的，所述装置还包括：

请求拦截模块，用于拦截所述HTML页面发起的当前网络接口请求，获取所述当前网络接口请求的接口地址和相关参数；

请求匹配模块，用于将所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数进行匹配；

前置接口确定模块，用于若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配成功，则确定所述当前网络接口请求为符合前置接口的网络接口请求。

可选的，所述装置还包括：

正常请求模块，用于若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配失败，则将所述当前网络接口请求发送至后端，并获取请求数据，将所述请求数据返回给所述HTML页面。

可选的，所述并行执行模块包括：

前置请求执行单元，用于在所述HTML页面运行阶段，执行所述接口请求前置代码通过浏览器第一通道资源向后端发起所述首次网络请求，并获取请求结果和请求状态；

页面脚本执行单元，用于执行所述页面脚本通过浏览器其他通道资源向后端请求对应的数据。

可选的，所述请求参数获取模块包括：

目标代码转换单元，用于在目标代码的编译阶段，将所述目标代码转换为抽象语法树；

请求参数获取单元，用于检索所述抽象语法树，确定所述HTML页面中首次网络请求的接口地址和相关参数。

可选的，所述装置还包括：

页面处理模块，用于在所述HTML页面接收到所述请求结果和所述请求状态后，使用所述请求结果组装所述TMHL页面或者根据所述请求状态处理异常。

第三方面，本申请实施例还公开了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本申请实施例所述的接口前置的优化方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时本申请实施例公开的接口前置的优化方法的步骤。

本申请实施例公开的接口前置的优化方法、装置、电子设备及存储介质，通过在目标代码的编译阶段，获取所述目标代码的HTML页面中首次网络请求的接口地址和相关参数，将所述接口地址和所述相关参数代入接口请求前置代码模板，生成所述首次网络请求对应的接口请求前置代码，将所述接口请求前置代码***到HTML页面对应的HTML文档中页面脚本之前的位置，在HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取执行所述接口请求前置代码的请求结果和请求状态，对HTML页面发起的符合前置接口的网络接口请求进行拦截，并将所述请求结果和所述请求状态返回给所述HTML页面，实现了接口前置的接入自动化，解放了接入接口前置时所需要的人力，提高了接口前置的优化效率。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例一的接口前置的优化方法的流程图；

图2是本申请实施例中的页面中的网络接口请求的执行流程图；

图3是本申请实施例二的接口前置的优化装置的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

实施例一

本实施例公开的一种接口前置的优化方法，应用于前后端分离的页面中，并在前端进行处理，如图1所示，该方法包括：步骤110至步骤150。

步骤110，在目标代码的编译阶段，获取所述目标代码的HTML页面中首次网络请求的接口地址和相关参数。

在项目编译阶段对目标代码进行检索，梳理页面逻辑，筛选目标代码的各个HTML(Hyper Text Markup Language，超文本标记语言)页面中的网络请求，获取HTML页面中首次网络请求的接口地址和相关参数。其中，所述相关参数包括用户信息以及业务相关参数。

在本申请的一个实施例中，所述在目标代码的编译阶段，获取所述目标代码的HTML页面中首次网络请求的接口地址和相关参数，包括：

在目标代码的编译阶段，将所述目标代码转换为抽象语法树；

检索所述抽象语法树，确定所述HTML页面中首次网络请求的接口地址和相关参数。

其中，抽象语法树(Abstract Syntax Tree，AST)是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

在目标代码的编译阶段，获取待编译的目标代码，将所述目标代码转换为抽象语法树，对所述抽象语法树进行检索，确定目标代码中的HTML页面，并针对每个HTML页面，寻找其中的首次网络请求，提取首次网络请求的接口地址和相关参数。通过将目标代码转换为抽象语法树后提取首次网络请求的接口地址和相关参数，可以快速的定位首次网络请求并提取对应的接口地址和相关参数，提高了处理速度。

步骤120，将所述接口地址和所述相关参数代入接口请求前置代码模板，生成所述首次网络请求对应的接口请求前置代码。

其中，接口请求前置代码模板是预先设置的接口请求前置代码的通用模板。

在获取到HTML页面首次网络请求的接口地址和相关参数后，将HTML页面首次网络请求的接口地址和相关参数代入所述接口请求前置代码模板，将首次网络请求的接口地址和相关参数与所述接口请求前置代码模板结合在一起，生成所述HTML页面首次网络请求对应的接口请求前置代码。

步骤130，将所述接口请求前置代码***到所述HTML页面对应的HTML文档中页面脚本之前的位置。

在webpack打包生成HTML文件阶段，将接口请求前置代码***进HTML页面对应的HTML文档中页面脚本之前的位置，并打包成HTML文件。将接口请求前置代码***到页面脚本之前的位置，在页面运行阶段可以充分利用浏览器通道资源实现接口请求前置代码与页面脚本的并行执行。

步骤140，在所述HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取执行所述接口请求前置代码的请求结果和请求状态。

其中，所述请求状态包括请求发起状态、请求等待状态、请求完成状态或请求错误状态。

在HTML页面运行阶段，运行对应的HTML文件，在执行到所述接口请求前置代码时，对所述接口请求前置代码进行执行，生成接口请求前置模块，通过接口请求前置模块向后端发送所述首次网络接口请求，并获取请求结果和请求状态。在将首次网络请求向后端发送后，执行所述页面脚本，向后端请求页面加载相关依赖资源。其中，接口请求前置模块包括接口请求单元和网络代理单元，接口请求单元用于向后端发送所述首次网络接口请求，网络代理单元用于对浏览器中的网络模块进行代理，拦截HTML页面发起的请求。

在本申请的一个实施例中，在所述HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取所述接口请求前置代码的请求结果和请求状态，包括：

在所述HTML页面运行阶段，执行所述接口请求前置代码通过浏览器第一通道资源向后端发起所述首次网络请求，并获取请求结果和请求状态；

执行所述页面脚本通过浏览器其他通道资源向后端请求对应的数据。

其中，浏览器包括多个浏览器通道资源，支持同时发起多个请求，如浏览器包括6个浏览器通道资源，可以同时发起6个请求。

由于接口请求前置代码位于页面脚本之前，在HTML页面运行阶段，接口请求前置代码先于页面脚本执行，在执行接口请求前置代码时，通过浏览器第一通道资源向后端发起所述首次网络请求，并获取后端返回的请求结果和请求状态。执行接口请求前置代码后，执行页面脚本，通过浏览器第一通道资源以外的其他通道资源向后端请求对应的数据，并下载页面加载相关依赖资源。充分利用了浏览器的通道资源实现了接口请求前置代码与页面脚本的并行执行，可以优化页面内容展现速度。

需要说明的是，虽然浏览器包括多个浏览器通道资源，如果接口请求前置代码位于页面脚本之后，就不能实现接口请求前置代码与页面脚本的并行执行了，因为接口请求前置代码位于页面脚本之后时，会先执行页面脚本，执行页面脚本时会下载页面加载相关依赖资源，需要较长的时间，而且页面脚本的执行会阻塞后面逻辑的执行，导致接口请求前置代码与页面脚本不能并行执行，而本申请通过将接口请求前置代码***到页面脚本之前，实现了接口请求前置代码与页面脚本的并行执行。

步骤150，对所述HTML页面发起的符合前置接口的网络接口请求进行拦截，并将所述请求结果和所述请求状态返回给所述HTML页面。

拦截HTML页面发起的网络接口请求，如果该网络接口请求为符合前置接口的网络接口请求，则将执行接口请求前置代码时获取到的请求结果和请求状态返回给HTML页面，以便于HTML页面使用所述请求结果和请求状态。

对于前后端分离的页面来说，现有的加载方式流程如下：请求HTML页面，浏览器解析HTML，请求CSS JS等页面脚本，JS执行网络接口请求，JS根据数据组装页面，请求图片，展示首屏。本申请实施例中，通过在代码编译阶段获取HTML页面中首次网络请求的接口地址和相关参数，并生成接口请求前置代码，将接口请求前置代码***到HTML页面对应的HTML文档的页面脚本之前的位置，从而在页面运行阶段，可以并行执行接口请求前置代码和页面脚本，实现了接口前置的自动接入。

本申请实施例公开的接口前置的优化方法，通过在目标代码的编译阶段，获取所述目标代码的HTML页面中首次网络请求的接口地址和相关参数，将所述接口地址和所述相关参数代入接口请求前置代码模板，生成所述首次网络请求对应的接口请求前置代码，将所述接口请求前置代码***到HTML页面对应的HTML文档中页面脚本之前的位置，在HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取执行所述接口请求前置代码的请求结果和请求状态，对HTML页面发起的符合前置接口的网络接口请求进行拦截，并将所述请求结果和所述请求状态返回给所述HTML页面，实现了接口前置的接入自动化，解放了接入接口前置时所需要的人力，提高了接口前置的优化效率。

在上述技术方案的基础上，在所述对所述HTML页面发起的符合前置接口的网络接口请求进行拦截之前，还包括：

拦截所述HTML页面发起的当前网络接口请求，获取所述当前网络接口请求的接口地址和相关参数；

将所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数进行匹配；

若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配成功，则确定所述当前网络接口请求为符合前置接口的网络接口请求。

通过接口请求前置模块中的网络代理单元对HTML页面向后端发起的每一次网络接口请求进行检测，拦截HTML页面向后端发起的当前网络接口请求，提取出该当前网络接口请求的接口地址和相关参数，将拦截到的当前网络接口请求的接口地址和相关参数与首次网络请求的接口地址和相关参数进行匹配，如果拦截到的当前网络接口请求的接口地址和相关参数与首次网络请求的接口地址和相关参数匹配成功，即拦截到的网络接口请求的接口地址和相关参数与首次网络请求的接口地址和相同参数均相同，则确定拦截到的当前网络接口请求为符合前置接口的网络接口请求，之后可以直接将首次网络请求的请求结果和请求状态返回给HTML页面，优化了前端性能。

在上述技术方案的基础上，在所述将所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数进行匹配之后，还包括：

若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配失败，则将所述当前网络接口请求发送至后端，并获取请求数据，将所述请求数据返回给所述HTML页面。

如果拦截到的当前网络接口请求的接口地址和相关参数与首次网络请求的接口地址和相关参数匹配失败，则确定拦截到的当前网络接口请求为不符合前置接口的网络接口请求，这时，将该当前网络接口请求发送至后端，并从后端获取请求数据，将请求数据返回给所述HTML页面，便于HTML页面使用请求数据。

在上述技术方案的基础上，在所述将所述请求结果和所述请求状态返回给所述HTML页面之后，还包括：

在所述HTML页面接收到所述请求结果和所述请求状态后，使用所述请求结果组装所述TMHL页面或者根据所述请求状态处理异常。

由于接口请求前置模块会将前置接口请求的结果以及状态不变化的回传给HTML页面，HTML页面无需判断请求结果来自网络还是来自于接口请求前置模块，对数据的处理流程不用进行任何改变，即可正常使用数据或者处理异常。不改变页面代码，通过接口请求前置模块代理让HTML页面无感知的使用接口前置优化，不改变页面原有流程，降低了代码改动的风险。

图2是本申请实施例中的页面中的网络接口请求的执行流程图，如图2所示，页面发起网络接口请求后，接口请求前置模块中的网络代理单元拦截页面发起的网络接口请求，由接口请求前置模块将拦截的网络接口请求的接口地址和相关参数与首次网络接口请求即前置接口的接口地址和相关参数进行匹配，以判断拦截的网络接口请求是否可以使用前置接口。如果判断结果为是，则返回前置接口请求保留的上下文，即返回前置接口请求的请求结果和请求状态，由接口请求前置模块中的网络代理单元用前置接口的上下文替换页当前网络接口请求的上下文，并返回给页面，页面对此无感知；如果判断结果为否，则正常请求，即将该网络接口请求发送给后端，由后端返回结果，接口请求前置模块的网络代理单元将后端返回的请求结果返回给页面，页面对此无感知。页面接收到请求结果后，无需判断请求结果来自于网络还是来自于接口请求前置模块，页面对数据的处理流程不用进行任何改变，即可正常使用数据或者处理异常。不改变页面代码，通过接口请求前置模块代理让页面无感知的使用接口前置优化，不改变页面原有流程，降低了代码改动的风险。其中，每次页面进行请求的时候，会创建一个网络请求的上下文，网络请求的上下文包括请求的状态、返回的结果等信息，当页面进行请求时，会继承这些信息，在请求未完成时在上一次前置请求的基础上继续请求，如果完成了就直接使用前置请求的结果，即用前置接口的上下文替换当前请求的上下文。

实施例二

本实施例公开的一种接口前置的优化装置，应用于前后端分离的页面中，如图3所示，所述接口前置的优化装置200包括：

请求参数获取模块210，用于在目标代码的编译阶段，获取所述目标代码的HTML页面中首次网络请求的接口地址和相关参数；

前置代码生成模块220，用于将所述接口地址和所述相关参数代入接口请求前置代码模板，生成所述首次网络请求对应的接口请求前置代码；

代码***模块230，用于将所述接口请求前置代码***到所述HTML页面对应的HTML文档中页面脚本之前的位置；

并行执行模块240，用于在所述HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取执行所述接口请求前置代码的请求结果和请求状态；

前置请求实现模块250，用于对所述HTML页面发起的符合前置接口的网络接口请求进行拦截，并将所述请求结果和所述请求状态返回给所述HTML页面。

可选的，所述装置还包括：

请求拦截模块，用于拦截所述HTML页面发起的当前网络接口请求，获取所述当前网络接口请求的接口地址和相关参数；

请求匹配模块，用于将所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数进行匹配；

前置接口确定模块，用于若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配成功，则确定所述当前网络接口请求为符合前置接口的网络接口请求。

可选的，所述装置还包括：

正常请求模块，用于若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配失败，则将所述当前网络接口请求发送至后端，并获取请求数据，将所述请求数据返回给所述HTML页面。

可选的，所述并行执行模块包括：

前置请求执行单元，用于在所述HTML页面运行阶段，执行所述接口请求前置代码通过浏览器第一通道资源向后端发起所述首次网络请求，并获取请求结果和请求状态；

页面脚本执行单元，用于执行所述页面脚本通过浏览器其他通道资源向后端请求对应的数据。

可选的，所述请求参数获取模块包括：

目标代码转换单元，用于在目标代码的编译阶段，将所述目标代码转换为抽象语法树；

请求参数获取单元，用于检索所述抽象语法树，确定所述HTML页面中首次网络请求的接口地址和相关参数。

可选的，所述装置还包括：

页面处理模块，用于在所述HTML页面接收到所述请求结果和所述请求状态后，使用所述请求结果组装所述TMHL页面或者根据所述请求状态处理异常。

本申请实施例提供的接口前置的优化装置，用于实现本申请实施例一中所述的接口前置的优化方法的各步骤，装置的各模块的具体实施方式参见相应步骤，此处不再赘述。

本申请实施例公开的接口前置的优化装置，通过请求参数获取模块在目标代码的编译阶段，获取所述模板代码的HTML页面中首次网络请求的接口地址和相关参数，前置代码生成模块将所述接口地址和所述相关参数代入接口请求前置代码模板，生成所述首次网络请求对应的接口请求前置代码，代码***模块将所述接口请求前置代码***到HTML页面对应的HTML文档中页面脚本之前的位置，并行执行模块在HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取执行所述接口请求前置代码的请求结果和请求状态，前置请求实现模块对HTML页面发起的符合前置接口的网络接口请求进行拦截，并将所述请求结果和所述请求状态返回给所述HTML页面，实现了接口前置的接入自动化，解放了接入接口前置时所需要的人力，提高了接口前置的优化效率。

相应的，本申请实施例还公开了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如本申请实施例一所述的接口前置的优化方法。所述电子设备可以为PC机、移动终端、个人数字助理、平板电脑等。

本申请实施例还公开了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请实施例一所述的接口前置的优化方法的步骤。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上对本申请实施例提供的一种接口前置的优化方法、装置、电子设备及存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

Claims (10)

1.一种接口前置的优化方法，其特征在于，包括：

在目标代码的编译阶段，获取所述目标代码的超文本标记语言HTML页面中首次网络请求的接口地址和相关参数；

将所述接口地址和所述相关参数代入接口请求前置代码模板，生成所述首次网络请求对应的接口请求前置代码；

将所述接口请求前置代码***到所述HTML页面对应的HTML文档中页面脚本之前的位置；

在所述HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取执行所述接口请求前置代码的请求结果和请求状态；

对所述HTML页面发起的符合前置接口的网络接口请求进行拦截，并将所述请求结果和所述请求状态返回给所述HTML页面。

2.根据权利要求1所述的方法，其特征在于，在所述对所述HTML页面发起的符合前置接口的网络接口请求进行拦截之前，还包括：

拦截所述HTML页面发起的当前网络接口请求，获取所述当前网络接口请求的接口地址和相关参数；

将所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数进行匹配；

若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配成功，则确定所述当前网络接口请求为符合前置接口的网络接口请求。

3.根据权利要求2所述的方法，其特征在于，在所述将所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数进行匹配之后，还包括：

若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配失败，则将所述当前网络接口请求发送至后端，并获取请求数据，将所述请求数据返回给所述HTML页面。

4.根据权利要求1所述的方法，其特征在于，所述在所述HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取所述接口请求前置代码的请求结果和请求状态，包括：

在所述HTML页面运行阶段，执行所述接口请求前置代码通过浏览器第一通道资源向后端发起所述首次网络请求，并获取请求结果和请求状态；

执行所述页面脚本通过浏览器其他通道资源向后端请求对应的数据。

5.根据权利要求1所述的方法，其特征在于，所述在目标代码的编译阶段，获取所述目标代码的HTML页面中首次网络请求的接口地址和相关参数，包括：

在目标代码的编译阶段，将所述目标代码转换为抽象语法树；

检索所述抽象语法树，确定所述HTML页面中首次网络请求的接口地址和相关参数。

6.根据权利要求1所述的方法，其特征在于，在所述将所述请求结果和所述请求状态返回给所述HTML页面之后，还包括：

在所述HTML页面接收到所述请求结果和所述请求状态后，使用所述请求结果组装所述TMHL页面或者根据所述请求状态处理异常。

7.一种接口前置的优化装置，其特征在于，包括：

请求参数获取模块，用于在目标代码的编译阶段，获取所述目标代码的HTML页面中首次网络请求的接口地址和相关参数；

前置代码生成模块，用于将所述接口地址和所述相关参数代入接口请求前置代码模板，生成所述首次网络请求对应的接口请求前置代码；

代码***模块，用于将所述接口请求前置代码***到所述HTML页面对应的HTML文档中页面脚本之前的位置；

并行执行模块，用于在所述HTML页面运行阶段，并行执行所述接口请求前置代码和所述页面脚本，获取执行所述接口请求前置代码的请求结果和请求状态；

前置请求实现模块，用于对所述HTML页面发起的符合前置接口的网络接口请求进行拦截，并将所述请求结果和所述请求状态返回给所述HTML页面。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

请求拦截模块，用于拦截所述HTML页面发起的当前网络接口请求，获取所述当前网络接口请求的接口地址和相关参数；

请求匹配模块，用于将所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数进行匹配；

前置接口确定模块，用于若所述当前网络接口请求的接口地址和相关参数与所述首次网络请求的接口地址和相关参数匹配成功，则确定所述当前网络接口请求为符合前置接口的网络接口请求。

9.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6任意一项所述的接口前置的优化方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1至6任意一项所述的接口前置的优化方法的步骤。

Images