CN115061678A - 一种基于浏览器代理服务的代码编译方法及客户端 - Google Patents

Abstract

本发明公开了一种基于浏览器代理服务的代码编译方法及客户端，接收服务端由页面访问请求返回的编译服务源码，根据编译服务源码创建浏览器代理服务；从而在客户端中能够通过浏览器代理服务拦截向服务器发送的源码请求，使用浏览器代理服务从服务端获取源码并进行源码编译；根据编译结果进行页面渲染。因此，通过创建浏览器代理服务能够在客户端上进行源码编译的同时，不对浏览器的本身代码造成影响，降低了浏览器页面代码编译的耦合性，并且将源码编译的部分独立出来，能够提高编译代码的通用性。

Description

一种基于浏览器代理服务的代码编译方法及客户端

技术领域

本发明涉及代码编译技术领域，特别涉及一种基于浏览器代理服务的代码编译方法及客户端。

背景技术

近些年来，随着web2.0的广泛使用落地以及web3.0的概念大火，对前端交互提出来很高的要求。而其中承载着重要份额的即是浏览器网页的展示技术，这种技术由前端语言HTML、JavaScript、CSS作为基础完成网站页面的渲染，呈现到用户终端上。交互要求的提升，在开发阶段需要引入更为复杂的工程化管理方案，从编码到部署，转变为了编码到编译再到部署的流程。

而网页的碎片化是比较严重的，很多页面需要根据具体用户进行动态生成。可大量的源码实时编译会造成服务器的较大性能压力，后期运维成本较高。目前有一种主流的解决方案是：将开发源码请求到浏览器，识别源码语言后，再利用预加载的相关编译插件，将源码转换为浏览器可直接识别的原生代码，进行页面渲染。

对于上述主流方案，其优势是减轻了服务器的实时编译压力，将编译的过程转移到了客户端完成；但是，该方案需要将相关的装置提前内置到页面的生命周期当中，如编译插件调用模块，编译结果加载模块等，并以特定的逻辑控制源码的请求、适配、编译。意味着历史源码，或者在未来框架迁移时，已生产的大量源码物料无法直接继续使用，存在兼容和迁移隐形成本；并且与浏览器标准生态做接入时，或者使用第三方源码时，无法直接使用，必须依托特定的装置或者环境。

发明内容

本发明所要解决的技术问题是：提供一种基于浏览器代理服务的代码编译方法及客户端，能够在浏览器代码编译的过程中避免对页面的本身代码造成影响。

为了解决上述技术问题，本发明采用的技术方案为：

一种基于浏览器代理服务的代码编译方法，包括步骤：

向服务端发送页面访问请求，接收所述服务端返回的编译服务源码；

根据所述编译服务源码创建浏览器代理服务；

使用所述浏览器代理服务拦截向服务端发送的源码请求，根据所述源码请求从所述服务端获取源码并进行编译；

根据所述浏览器代理服务的编译结果进行页面渲染。

为了解决上述技术问题，本发明采用的另一种技术方案为：

一种基于浏览器代理服务的代码编译客户端，包括存储器、处理器以及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

向服务端发送页面访问请求，接收所述服务端返回的编译服务源码；

根据所述编译服务源码创建浏览器代理服务；

使用所述浏览器代理服务拦截向服务端发送的源码请求，根据所述源码请求从所述服务端获取源码并进行编译；

根据所述浏览器代理服务的编译结果进行页面渲染。

本发明的有益效果在于：接收服务端由页面访问请求返回的编译服务源码，根据编译服务源码创建浏览器代理服务；从而在客户端中能够通过浏览器代理服务拦截向服务器发送的源码请求，使用浏览器代理服务从服务端获取源码并进行源码编译；根据编译结果进行页面渲染。因此，通过创建浏览器代理服务能够在客户端上进行源码编译的同时，不对浏览器的本身代码造成影响，降低了浏览器页面代码编译的耦合性，并且将源码编译的部分独立出来，能够提高编译代码的通用性。

附图说明

图1为本发明实施例的一种基于浏览器代理服务的代码编译方法的流程图；

图2为本发明实施例的一种基于浏览器代理服务的代码编译客户端的示意图；

图3为现有技术中的代码编译时序图；

图4为本发明实施例的一种基于浏览器代理服务的代码编译方法的时序图；

标号说明：

1、一种基于浏览器代理服务的代码编译客户端；2、存储器；3、处理器。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

请参照图1，本发明实施例提供了一种基于浏览器代理服务的代码编译方法，包括步骤：

向服务端发送页面访问请求，接收所述服务端返回的编译服务源码；

根据所述编译服务源码创建浏览器代理服务；

使用所述浏览器代理服务拦截向服务端发送的源码请求，根据所述源码请求从所述服务端获取源码并进行编译；

根据所述浏览器代理服务的编译结果进行页面渲染。

从上述描述可知，本发明的有益效果在于：接收服务端由页面访问请求返回的编译服务源码，根据编译服务源码创建浏览器代理服务；从而在客户端中能够通过浏览器代理服务拦截向服务器发送的源码请求，使用浏览器代理服务从服务端获取源码并进行源码编译；根据编译结果进行页面渲染。因此，通过创建浏览器代理服务能够在客户端上进行源码编译的同时，不对浏览器的本身代码造成影响，降低了浏览器页面代码编译的耦合性，并且将源码编译的部分独立出来，能够提高编译代码的通用性。

进一步地，使用所述浏览器代理服务拦截向服务端发送的源码请求包括：

根据访问页面地址确定所需的页面源码，向服务端发送获取所述页面源码的请求；

使用所述浏览器代理服务进行源码请求的识别，若识别到源码请求，则拦截所述源码请求。

由上述描述可知，根据访问页面地址能够动态确定对应的页面源码，并向服务端发送获取该页面源码的请求；使用浏览器代理服务拦截源码请求，能够便于后续通过代理服务获取源码和源码编译，实现在代理服务上进行编译操作。

进一步地，接收所述服务端返回的编译服务源码还包括：

接收所述服务端返回的页面框架原生代码；

所述根据访问页面地址确定所需的页面源码，向服务端发送获取所述页面源码的请求包括：

基于所述页面框架原生代码，根据访问页面地址确定所需的JavaScript文件，向服务端发送获取所述JavaScript文件的请求。

由上述描述可知，根据页面框架原生代码确定访问页面地址所对应的JavaScript文件，能够便于后续得到编译好的原生代码并直接执行。

进一步地，根据所述源码请求从所述服务端获取源码并进行编译包括：

根据所述源码请求生成代理请求；

向所述服务端发送所述代理请求，并根据所述代理请求获取到的源码数据进行编译。

由上述描述可知，浏览器代理服务拦截到源码请求后重新生成代理请求，以根据代理请求向服务端获取源码，能够保证浏览器代理服务后续进行源码的编译。

进一步地，根据所述代理请求获取到的源码数据进行编译包括：

在所述浏览器代理服务中根据所述代理请求获取到的源码数据的类型，调用对应的编译器进行编译，编译后得到可直接执行的源码文件。

由上述描述可知，根据代理请求获取到的源码数据的类型，适应性地调用对应的编译器进行编译，编译源码为浏览器可直接执行的文件，之后将其返回给浏览器本身，从而不需要在浏览器上进行代码编译。

请参照图2，本发明另一实施例提供了一种基于浏览器代理服务的代码编译客户端，包括存储器、处理器以及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

向服务端发送页面访问请求，接收所述服务端返回的编译服务源码；

根据所述编译服务源码创建浏览器代理服务；

使用所述浏览器代理服务拦截向服务端发送的源码请求，根据所述源码请求从所述服务端获取源码并进行编译；

根据所述浏览器代理服务的编译结果进行页面渲染。

从上述描述可知，接收服务端由页面访问请求返回的编译服务源码，根据编译服务源码创建浏览器代理服务；从而在客户端中能够通过浏览器代理服务拦截向服务器发送的源码请求，使用浏览器代理服务从服务端获取源码并进行源码编译；根据编译结果进行页面渲染。因此，通过创建浏览器代理服务能够在客户端上进行源码编译的同时，不对浏览器的本身代码造成影响，降低了浏览器页面代码编译的耦合性，并且将源码编译的部分独立出来，能够提高编译代码的通用性。

进一步地，使用所述浏览器代理服务拦截向服务端发送的源码请求包括：

根据访问页面地址确定所需的页面源码，向服务端发送获取所述页面源码的请求；

使用所述浏览器代理服务进行源码请求的识别，若识别到源码请求，则拦截所述源码请求。

由上述描述可知，根据访问页面地址能够动态确定对应的页面源码，并向服务端发送获取该页面源码的请求；使用浏览器代理服务拦截源码请求，能够便于后续通过代理服务获取源码和源码编译，实现在代理服务上进行编译操作。

进一步地，接收所述服务端返回的编译服务源码还包括：

接收所述服务端返回的页面框架原生代码；

所述根据访问页面地址确定所需的页面源码，向服务端发送获取所述页面源码的请求包括：

基于所述页面框架原生代码，根据访问页面地址确定所需的JavaScript文件，向服务端发送获取所述JavaScript文件的请求。

由上述描述可知，根据页面框架原生代码确定访问页面地址所对应的JavaScript文件，能够便于后续得到编译好的原生代码并直接执行。

进一步地，根据所述源码请求从所述服务端获取源码并进行编译包括：

根据所述源码请求生成代理请求；

向所述服务端发送所述代理请求，并根据所述代理请求获取到的源码数据进行编译。

由上述描述可知，浏览器代理服务拦截到源码请求后重新生成代理请求，以根据代理请求向服务端获取源码，能够保证浏览器代理服务后续进行源码的编译。

进一步地，根据所述代理请求获取到的源码数据进行编译包括：

在所述浏览器代理服务中根据所述代理请求获取到的源码数据的类型，调用对应的编译器进行编译，编译后得到可直接执行的源码文件。

由上述描述可知，根据代理请求获取到的源码数据的类型，适应性地调用对应的编译器进行编译，编译源码为浏览器可直接执行的文件，之后将其返回给浏览器本身，从而不需要在浏览器上进行代码编译。

本发明上述的一种基于浏览器代理服务的代码编译方法及客户端，适用于对浏览器网页进行代码编译，能够在浏览器代码编译的过程中避免对页面的本身代码造成影响，以下通过具体的实施方式进行说明：

实施例一

请参照图1和图4，一种基于浏览器代理服务的代码编译方法，包括步骤：

S1、向服务端发送页面访问请求，接收所述服务端返回的编译服务源码和页面框架原生代码。

具体的，在本实施例中，用户从客户端访问网站，接收服务端返回的页面框架的原生代码以及适配、编译服务。

S2、根据所述编译服务源码创建浏览器代理服务。

具体的，本实施例中，先通过编译服务注册浏览器代理服务Service Worker，即编译器服务。Service Worker可以理解为在浏览器上的微型服务端，能够拦截处理所有向服务端发起的请求，对请求进行处理和更改。

S3、使用所述浏览器代理服务拦截向服务端发送的源码请求，根据所述源码请求从所述服务端获取源码并进行编译。

S31、根据访问页面地址确定所需的页面源码，向服务端发送获取所述页面源码的请求；基于所述页面框架原生代码，根据访问页面地址确定所需的JavaScript文件，向服务端发送获取所述JavaScript文件的请求。

具体的，页面框架根据用户访问的路由和权限，用符合html协议规范的方法，发起对应的JavaScript文件资源请求。

S32、使用所述浏览器代理服务进行源码请求的识别，若识别到源码请求，则拦截所述源码请求。

具体的，作为中间代理的Service Worker，能够发现源码请求并进行拦截。根据请求的.js文件路径及数据关系，向服务器发起数据请求，将源代码请求回来，具体步骤如下：

S321、根据所述源码请求生成代理请求。

S322、向所述服务端发送所述代理请求，并根据所述代理请求获取到的源码数据进行编译。在所述浏览器代理服务中根据所述代理请求获取到的源码数据的类型，调用对应的编译器进行编译，编译后得到可直接执行的源码文件。

具体的，代理服务根据源码类型、模块复杂度等，调用对应的编译器，编译源码为浏览器可直接执行的.js文件，返回给浏览器本身。

S4、根据所述浏览器代理服务的编译结果进行页面渲染。

具体的，浏览器本身的代码装置收到返回的.js文件，用相关的原生方法执行，完成页面渲染。

请参照图3和图4，现有技术中代码编译的主流方法是浏览器直接将获取到的源码数据并进行编译，编译的同时会对浏览器本身的代码造成影响，而本实施例中的代码编译方法在客户端增加了浏览器代理服务，能够降低了服务器的实时编译压力，同时无需对浏览器原本的代码做任何变更，依据原生的浏览器模块对浏览器代理服务编译的源码进行加载即可，降低了耦合性、提高了通用性，也便于之后的代码兼容和迁移。

实施例二

本实施例与实施例一的不同在于，提供了具体的代码编译实例：

1、用户根据地址‘/hello’进行访问，将返回页面框架装置’page.js’和‘CompilerService.js’两个文件。

2、‘CompilerService.js’自动注册为编译服务’CompilerWorker’。

3、用户访问页面地址‘/hello’，根据业务逻辑分析出应该加载‘/hello.js’，发起请求。

4、’CompilerWorker’识别到该请求，进行拦截，发现‘/hello.js’，按照约定应该请求‘/api/hello’，重新发起请求，得到源代码。

5、源码数据请求回来先到worker，由worker进行加工，经过解析和编译后，得到可以由浏览器直接执行的代码文件。

6、客户端应用方获取到由编译器处理过的‘/hello.js’文件后，渲染出页面；与原生浏览器方法调用并无不同，可以适应到其他的不同场景。

实施例三

请参照图2，一种基于浏览器代理服务的代码编译客户端1，包括存储器2、处理器3以及存储在所述存储器2上并可在处理器3上运行的计算机程序，所述处理器3执行所述计算机程序时实现实施例一或二的一种基于浏览器代理服务的代码编译方法的各个步骤。

综上所述，本发明提供的一种基于浏览器代理服务的代码编译方法及客户端，接收服务端由页面访问请求返回的编译服务源码和页面框架源码，根据编译服务源码创建浏览器代理服务；根据用户的访问页面地址动态确定对应的页面源码，并向服务端发送获取该页面源码的请求，在客户端中能够通过浏览器代理服务拦截向服务器发送的源码请求，并根据源码请求生成代理请求，使用浏览器代理服务从服务端获取源码并进行源码编译，编译得到浏览器可直接执行的源码文件，根据编译得到的文件进行页面渲染。因此，通过创建浏览器代理服务能够在客户端上进行源码编译的同时，不对浏览器的本身代码造成影响，降低了浏览器页面代码编译的耦合性，并且将源码编译的部分独立出来，能够提高编译代码的通用性。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种基于浏览器代理服务的代码编译方法，其特征在于，包括步骤：

向服务端发送页面访问请求，接收所述服务端返回的编译服务源码；

根据所述编译服务源码创建浏览器代理服务；

使用所述浏览器代理服务拦截向服务端发送的源码请求，根据所述源码请求从所述服务端获取源码并进行编译；

根据所述浏览器代理服务的编译结果进行页面渲染。

2.根据权利要求1所述的一种基于浏览器代理服务的代码编译方法，其特征在于，使用所述浏览器代理服务拦截向服务端发送的源码请求包括：

根据访问页面地址确定所需的页面源码，向服务端发送获取所述页面源码的请求；

使用所述浏览器代理服务进行源码请求的识别，若识别到源码请求，则拦截所述源码请求。

3.根据权利要求2所述的一种基于浏览器代理服务的代码编译方法，其特征在于，接收所述服务端返回的编译服务源码还包括：

接收所述服务端返回的页面框架原生代码；

所述根据访问页面地址确定所需的页面源码，向服务端发送获取所述页面源码的请求包括：

基于所述页面框架原生代码，根据访问页面地址确定所需的JavaScript文件，向服务端发送获取所述JavaScript文件的请求。

4.根据权利要求1所述的一种基于浏览器代理服务的代码编译方法，其特征在于，根据所述源码请求从所述服务端获取源码并进行编译包括：

根据所述源码请求生成代理请求；

向所述服务端发送所述代理请求，并根据所述代理请求获取到的源码数据进行编译。

5.根据权利要求4所述的一种基于浏览器代理服务的代码编译方法，其特征在于，根据所述代理请求获取到的源码数据进行编译包括：

在所述浏览器代理服务中根据所述代理请求获取到的源码数据的类型，调用对应的编译器进行编译，编译后得到可直接执行的源码文件。

6.一种基于浏览器代理服务的代码编译客户端，包括存储器、处理器以及存储在所述存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下步骤：

向服务端发送页面访问请求，接收所述服务端返回的编译服务源码；

根据所述编译服务源码创建浏览器代理服务；

使用所述浏览器代理服务拦截向服务端发送的源码请求，根据所述源码请求从所述服务端获取源码并进行编译；

根据所述浏览器代理服务的编译结果进行页面渲染。

7.根据权利要求6所述的一种基于浏览器代理服务的代码编译客户端，其特征在于，使用所述浏览器代理服务拦截向服务端发送的源码请求包括：

根据访问页面地址确定所需的页面源码，向服务端发送获取所述页面源码的请求；

使用所述浏览器代理服务进行源码请求的识别，若识别到源码请求，则拦截所述源码请求。

8.根据权利要求7所述的一种基于浏览器代理服务的代码编译客户端，其特征在于，接收所述服务端返回的编译服务源码还包括：

接收所述服务端返回的页面框架原生代码；

所述根据访问页面地址确定所需的页面源码，向服务端发送获取所述页面源码的请求包括：

基于所述页面框架原生代码，根据访问页面地址确定所需的JavaScript文件，向服务端发送获取所述JavaScript文件的请求。

9.根据权利要求6所述的一种基于浏览器代理服务的代码编译客户端，其特征在于，根据所述源码请求从所述服务端获取源码并进行编译包括：

根据所述源码请求生成代理请求；

向所述服务端发送所述代理请求，并根据所述代理请求获取到的源码数据进行编译。

10.根据权利要求9所述的一种基于浏览器代理服务的代码编译客户端，其特征在于，根据所述代理请求获取到的源码数据进行编译包括：

在所述浏览器代理服务中根据所述代理请求获取到的源码数据的类型，调用对应的编译器进行编译，编译后得到可直接执行的源码文件。

Images