CN114117276A

CN114117276A - 页面渲染方法、装置、设备及存储介质

Info

Publication number: CN114117276A
Application number: CN202111419848.4A
Authority: CN
Inventors: 甄玉磊
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Priority date: 2021-11-26
Filing date: 2021-11-26
Publication date: 2022-03-01

Abstract

本申请公开了一种页面渲染方法、装置、设备及存储介质。该方法应用于服务器，该服务器包括ES模块文件和对应的目标路径文件，ES模块文件和对应的目标路径文件基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件，该方法的一具体实施方式包括：响应于接收到浏览器发送的渲染请求，对渲染请求指示的业务文件代码进行解析，得到渲染路径；响应于目标路径文件中存在渲染路径，从ES模块文件中获取对应的渲染代码；向浏览器发送渲染代码，以使浏览器对渲染代码进行显示。

Description

页面渲染方法、装置、设备及存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及页面渲染方法、装置、设备及存储介质。

背景技术

在研发日常开发中，除了本地开发代码的方式，在线开发调试代码的优点也愈加突出，例如，在线开发调试代码可以不用繁琐的配置环境，实时预览开发的效果以及发布到线上供其他人浏览等便捷的功能。

目前，基于以下几种方式实现在线开发调试代码：(1)把用户输入的爪哇脚本(Javascript，JS)脚本文件和层叠样式表(Cascading Style Sheets，CSS)样式资源拼接到超文本标记语言(HyperText Markup Language，HTML)中，然后浏览器通过HTML中的<iframe>标签渲染拼接成的HTML文件。(2)通过在浏览器端开发一套Webpack核心工具，可以使代码在浏览器端进行打包编译，实时预览。

但，(1)只支持简单的HTML、Javascript和CSS渲染。(2)代码逻辑复杂，实现方式成本太大，为了实现浏览器预览，需要在浏览器端重新开发一套webpack打包框架，实现成本太大。

发明内容

本申请的实施例提出了页面渲染方法、装置、设备及存储介质。

第一方面，本申请的实施例提供了一种页面渲染方法，该方法应用于服务器，服务器包括ES模块文件和对应的目标路径文件，ES模块文件和对应的目标路径文件基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件，该方法包括：响应于接收到浏览器发送的渲染请求，对渲染请求指示的业务文件代码进行解析，得到渲染路径；响应于目标路径文件中存在渲染路径，从ES模块文件中获取对应的渲染代码；向浏览器发送渲染代码，以使浏览器对渲染代码进行显示。

在一些实施例中，在响应于接收到浏览器发送的渲染请求之前，方法还包括：响应于接收到浏览器发送的GET请求，获取GET请求指示的业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件；将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件，业务文件代码中的入口文件代码包括入口文件路径；向浏览器发送处理后的HTML文件。

在一些实施例中，方法还包括：响应于目标路径文件中不存在渲染路径，将业务文件代码中的组件文件代码和样式文件代码挂载在渲染路径上；向浏览器发送挂载在渲染路径上的组件文件代码和样式文件代码；响应于接收到浏览器发送的第一路径，将组件文件代码和样式文件代码挂载在第一路径上；向浏览器发送挂载在第一路径上的组件文件代码和样式文件代码；响应于接收到浏览器发送的解析请求，对挂载在第一路径上的组件文件代码进行解析，得到解析后的组件文件代码；以及对挂载在第一路径上的样式文件代码进行解析，得到解析后的样式文件代码；将解析后的组件文件代码和解析后的样式文件代码作为渲染代码。

在一些实施例中，业务文件代码中的组件文件代码的类型为Vue或React；对挂载第一路径上的组件文件代码进行解析，得到解析后的组件文件代码，包括：利用Vue或React对组件文件代码进行解析，得到解析后的组件文件代码。

在一些实施例中，对挂载第一路径上的样式文件代码进行解析，得到解析后的样式文件代码，包括：利用node-sass将样式文件代码编译为预设的样式文件代码。

第二方面，本申请的实施例提供了一种页面渲染方法，该方法应用于浏览器，该方法包括：向服务器发送渲染请求，其中，渲染请求用于指示服务器对渲染请求指示的业务文件代码进行解析，得到渲染路径，并在目标路径文件中存在渲染路径时，从ES模块文件中获取对应的渲染代码，其中，ES模块文件和目标路径文件基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件；接收服务器发送的渲染代码，并对渲染代码进行显示。

在一些实施例中，业务文件代码包括以下至少一项：入口文件代码、组件文件代码、样式文件代码。

在一些实施例中，方法还包括：响应于检测到浏览器在运行业务文件代码，向服务器发送GET请求，其中，GET请求用于指示服务器获取业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件，并将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件；响应于接收到服务器发送的处理后的HTML文件，对处理后的HTML文件进行解析；向服务器发送渲染请求，包括：响应于检测到浏览器对处理后的HTML文件中的入口文件代码进行解析，向服务器发送渲染请求。

在一些实施例中，方法还包括：响应于接收到服务器发送的挂载在渲染路径上的业务文件代码中的组件文件代码和样式文件代码，发送第一路径；响应于接收服务器发送的挂载在第一路径上的业务文件代码中的组件文件代码和样式文件代码，向服务器发送解析请求；接收服务器发送的解析后的组件文件代码和解析后的样式文件代码，其中，渲染代码包括解析后的组件文件代码和解析后的样式文件代码。

在一些实施例中，入口文件代码、组件文件代码和样式文件代码中的至少一项包括通过import函数导入的第二依赖库。

在一些实施例中，第二依赖库为通过import函数按照第二依赖库的名称导入的依赖库。

第三方面，本申请的实施例提供了一种页面渲染装置，该装置应用于服务器，服务器包括ES模块文件和对应的目标路径文件，ES模块文件和对应的目标路径文件基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件，装置包括：请求接收模块，被配置成接收浏览器发送的渲染请求；路径得到模块，被配置成响应于接收到浏览器发送的渲染请求，对渲染请求指示的业务文件代码进行解析，得到渲染路径；代码获取模块，被配置成响应于目标路径文件中存在渲染路径，从ES模块文件中获取对应的渲染代码；代码发送模块，被配置成向浏览器发送渲染代码，以使浏览器对渲染代码进行显示。

在一些实施例中，在响应于接收到浏览器发送的渲染请求之前，装置还包括：请求接收模块，被配置成接收浏览器发送的GET请求；文件获取模块，被配置成响应于接收到浏览器发送的GET请求，获取GET请求指示的业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件；文件处理模块，被配置成将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件，业务文件代码中的入口文件代码包括入口文件路径；文件发送模块，被配置成向浏览器发送处理后的HTML文件。

在一些实施例中，装置还包括：代码处理模块，被配置成响应于目标路径文件中不存在渲染路径，将业务文件代码中的组件文件代码和样式文件代码挂载在渲染路径上；代码发送模块，被配置成向浏览器发送挂载在渲染路径上的组件文件代码和样式文件代码；代码处理模块，被配置成响应于接收到浏览器发送的第一路径，将组件文件代码和样式文件代码挂载在第一路径上；代码发送模块，被配置成向浏览器发送挂载在第一路径上的组件文件代码和样式文件代码；代码解析模块，被配置成响应于接收到浏览器发送的解析请求，对挂载在第一路径上的组件文件代码进行解析，得到解析后的组件文件代码；以及对挂载在第一路径上的样式文件代码进行解析，得到解析后的样式文件代码；代码确定模块，被配置成将解析后的组件文件代码和解析后的样式文件代码作为渲染代码。

在一些实施例中，业务文件代码中的组件文件代码的类型为Vue或React；代码解析模块，进一步被配置成：利用Vue或React对组件文件代码进行解析，得到解析后的组件文件代码。

在一些实施例中，代码解析模块，进一步被配置成：利用node-sass将样式文件代码编译为预设的样式文件代码。

第四方面，本申请的实施例提供了一种页面渲染装置，该装置应用于浏览器，该装置包括：请求发送模块，被配置成向服务器发送渲染请求，其中，渲染请求用于指示服务器对渲染请求指示的业务文件代码进行解析，得到渲染路径，并在目标路径文件中存在渲染路径时，从ES模块文件中获取对应的渲染代码，其中，ES模块文件和目标路径文件基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件；代码接收模块，被配置成接收服务器发送的渲染代码；代码显示模块，被配置成对渲染代码进行显示。

在一些实施例中，装置还包括：请求发送模块，被配置成响应于检测到浏览器在运行业务文件代码，向服务器发送GET请求，其中，GET请求用于指示服务器获取业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件，并将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件；文件解析模块，被配置成响应于接收到服务器发送的处理后的HTML文件，对处理后的HTML文件进行解析；请求发送模块，进一步配置成：响应于检测到浏览器对处理后的HTML文件中的入口文件代码进行解析，向服务器发送渲染请求。

在一些实施例中，装置还包括：路径发送模块，被配置成响应于接收到服务器发送的挂载在渲染路径上的业务文件代码中的组件文件代码和样式文件代码，发送第一路径；请求发送模块，被配置成响应于接收服务器发送的挂载在第一路径上的业务文件代码中的组件文件代码和样式文件代码，向服务器发送解析请求；代码接收模块，被配置成接收服务器发送的解析后的组件文件代码和解析后的样式文件代码，其中，渲染代码包括解析后的组件文件代码和解析后的样式文件代码。

第五方面，本申请的实施例提供了一种页面渲染系统，该系统包括：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件；浏览器向服务器发送渲染请求；服务器接收到渲染请求，对渲染请求指示的业务文件代码进行解析，得到渲染路径；响应于目标路径文件中存在渲染路径，服务器从ES模块文件中获取对应的渲染代码；服务器向浏览器发送渲染代码；浏览器接收服务器发送的渲染代码，并对渲染代码进行显示。

第六方面，本申请的实施例提供了一种电子设备，包括至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行如第一方面或第二方面描述的方法。

第七方面，本申请的实施例提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，计算机指令用于使计算机执行如第一方面或第二方面描述的方法。

本申请的实施例提供的页面渲染方法、装置、设备及存储介质，首先在服务器接收到浏览器发送的渲染请求时，对渲染请求指示的业务文件代码进行解析，得到渲染路径；然后在目标路径文件中存在渲染路径时，从ES模块文件中获取对应的渲染代码；然后向浏览器发送渲染代码，以使浏览器对渲染代码进行显示。其中，ES模块文件和对应的目标路径文件基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件。能够通过服务器利用预设镜像源构建的第三方依赖库(即，第一依赖库)所生成的ES模块文件和对应的目标路径文件，以在服务器对渲染请求指示的业务文件代码进行解析，得到渲染路径，且在目标路径文件中存在渲染路径时，从ES模块文件中获取对应的渲染代码，最终得到浏览器可以识别解析的渲染代码，完成代码的实时预览效果。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1是本申请可以应用于其中的示例性系统架构图；

图2是本申请的页面渲染方法的一个实施例的流程图；

图3是本申请的页面渲染方法的一个实施例的流程图；

图4是本申请的页面渲染方法的一个实施例的流程图；

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

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

图7是本申请的页面渲染方法的一个实施例的流程图；

图8是本申请的页面渲染装置的一个实施例的结构示意图；

图9是本申请的页面渲染装置的一个实施例的结构示意图；

图10是适于用来实现本申请的实施例的电子设备的结构示意图。

具体实施方式

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

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

图1示出了可以应用本申请的页面渲染方法或页面渲染装置的实施例的示例性系统架构100。

如图1所示，系统架构100可以包括浏览器101，网络102和服务器103。网络102用以在浏览器101和服务器103之间提供通信链路的介质。网络102可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用浏览器101通过网络102与服务器103交互，例如发送渲染请求等。

浏览器101可以是硬件，也可以是软件。当浏览器101为硬件时，浏览器可以为与用户通过键盘、触摸板、触摸屏、遥控器、语音交互或手写设备等一种或多种方式进行人机交互的电子产品，例如PC(Personal Computer，个人计算机)、手机、智能手机、PDA(PersonalDigital Assistant，个人数字助手)、可穿戴设备、PPC(Pocket PC，掌上电脑)、平板电脑、智能车机、智能电视、智能音箱、平板电脑、膝上型便携计算机和台式计算机等等。当浏览器101为软件时，可以安装在上述电子设备中。其可以实现成多个软件或软件模块，也可以实现成单个软件或软件模块。在此不做具体限定。

服务器103可以提供各种服务。例如，服务器103响应于接收到浏览器发送的渲染请求，对渲染请求指示的业务文件代码进行解析，得到渲染路径；响应于目标路径文件中存在渲染路径，从ES模块文件中获取对应的渲染代码；向浏览器发送渲染代码，以使浏览器对渲染代码进行显示。

需要说明的是，服务器103可以是硬件，也可以是软件。当服务器103为硬件时，可以实现成多个服务器组成的分布式服务器集群，也可以实现成单个服务器。当服务器103为软件时，可以实现成多个软件或软件模块(例如用来提供分布式服务)，也可以实现成单个软件或软件模块。在此不做具体限定。

需要说明的是，本申请实施例所提供的更新业务处理处理模型的方法或业务处理方法一般由服务器103执行，相应地，更新业务处理处理模型的装置或业务处理装置一般设置于服务器103中。

应该理解，图1中的浏览器、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的浏览器、网络和服务器。

继续参考图2，其示出了根据本申请的页面渲染方法的一个实施例的流程图200，该页面渲染方法可以应用于服务器，该页面渲染方法可以包括以下步骤：

步骤201，响应于接收到浏览器发送的渲染请求，对渲染请求指示的业务文件代码进行解析，得到渲染路径。

在本实施例中，更新业务处理模型的方法的执行主体(例如图1所示的服务器103)在接收到浏览器发送的渲染请求时，对该渲染请求指示的业务代码文件进行解析，得到渲染路径。上述渲染请求用于指示服务器对浏览器发送的业务文件代码进行解析，以得到渲染路径。上述业务文件代码可以为与业务的类型相关的代码。

在这里，对渲染请求指示的业务文件代码进行解析，可以包括：对渲染请求指示的业务文件代码进行解析，以得到业务文件代码包括的程序要素。例如，业务文件代码包括的业务文件代码的路径、业务文件代码包括的内容，例如，入口文件代码、组件文件代码和样式文件代码等。

需要说明的是，镜像源可以为在模块开发时，初始化或者添加依赖时获取依赖包的网址，将该网址作为镜像源。

步骤202，响应于目标路径文件中存在渲染路径，从ES模块文件中获取对应的渲染代码。

在本实施例中，上述执行主体在确定目标路径文件夹中包括渲染路径时，从ES模块文件中获取与渲染路径对应的渲染代码。

需要说明的是，在将渲染路径与目标路径文件进行匹配之前，该页面渲染方法还可以包括：预先利用预设的镜像源安装第一依赖库；之后，根据第一依赖库生成ES模块文件和目标路径文件。

对应地，在该实例中，根据第一依赖库生成ES模块文件和目标路径文件可以包括：对第一依赖库进行依赖预编译，将第一依赖库中的依赖项转换为可以使得浏览器识别的ES模块文件和目标路径文件，该目标路径文件可以为ES模块文件的路径和依赖包的对应关系。

在这里，可以使用esbuild或其他预编译方式对第一依赖库进行预编译；其中，esbuild是一个go语言写的javascript，typescript打包工具。

需要说明的是，第一依赖库中的依赖项可以由以下至少一项发布的：Commons、CMD(命令提示符)、AMD、UMD。

步骤203，向浏览器发送渲染代码，以使浏览器对渲染代码进行显示。

在本实施例中，上述执行主体可以向浏览器发送渲染代码，以使浏览器在接收到渲染代码时，对渲染代码进行显示，以在浏览器上呈现业务文件代码对应的渲染效果。

本申请的实施例提供的页面渲染方法，首先在服务器接收到浏览器发送的渲染请求时，对渲染请求指示的业务文件代码进行解析，得到渲染路径；然后在目标路径文件中存在渲染路径时，从ES模块文件中获取对应的渲染代码；然后向浏览器发送渲染代码，以使浏览器对渲染代码进行显示。其中，ES模块文件和对应的目标路径文件基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件。能够通过服务器利用预设镜像源构建的第三方依赖库(即，第一依赖库)所生成的ES模块文件和对应的目标路径文件，以在服务器对渲染请求指示的业务文件代码进行解析，得到渲染路径，且在目标路径文件中存在渲染路径时，从ES模块文件中获取对应的渲染代码，最终得到浏览器可以识别解析的渲染代码，完成代码的实时预览效果。

如图3，示出了根据本申请的页面渲染方法的一个实施例的流程图300，该页面渲染方法可以应用于服务器，该页面渲染方法可以包括以下步骤：

步骤301，响应于接收到浏览器发送的GET请求，获取GET请求指示的业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件。

在本实施例中，页面渲染方法的执行主体(例如图1所示的服务器103)可以在接收到浏览器发送的GET请求时，获取GET请求指示的业务文件代码，以存储在服务器(例如图1所示的服务器103)、与业务文件代码对应的超文本标记语言(HyperText MarkupLanguage，HTML)文件。

具体地，用户在浏览器运行业务文件代码时，需要对运行的业务文件代码进行以下操作：压缩、编码等。然后将处理后的业务文件代码挂载在统一资源定位符(UniformResource Locator，URL)参数上，向服务器发送GET请求；服务器在接收到GET请求之后，获取GET请求指示的业务文件代码和与业务文件代码对应的HTML文件，并将HTML文件和业务文件代码返回至浏览器。

需要说明的是，可以利用LZUTF8或其他压缩代码的方式对业务文件代码进行压缩，其中，LZUTF8为Javascript字符串压缩库。

步骤302，将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件，业务文件代码中的入口文件代码包括入口文件路径。

在本实施例中，上述执行主体可以在将HTML文件返回至浏览器之后，在HTML文件中所引用的入口文件路径上，得到处理后的HTML文件；其中，业务文件代码中的入口文件代码可以包括入口文件路径。

在一个示例中，以Vue技术栈为例，服务器在接收到GET请求之后，获取挂载到URL上的业务文件代码，返回在服务器存储的HTML文件，并在HTML文件中所引用的入口文件main.js路径上挂载收到的业务文件代码，得到处理后的HTML文件。

需要说明的是，main.js可以为Vue技术栈对应的入口文件类型。

步骤303，向浏览器发送处理后的HTML文件。

在本实施例中，上述执行主体可以将处理后的HTML文件发送至浏览器，以使浏览器对处理后的HTML文件进行解析，浏览器在对HTML文件解析的过程中，如果解析到入口文件代码时，向服务器发送渲染请求，以指示服务器对业务文件代码中的入口文件代码进行解析。

步骤304，响应于接收到浏览器发送的渲染请求，对渲染请求指示的业务文件代码进行解析，得到渲染路径。

在本实施例中，在检测到浏览器对处理后的HTML文件中的入口文件代码进行解析时，向服务器发送渲染请求，以请求服务器对业务文件代码进行解析，以得到业务文件代码的渲染路径。

步骤305，响应于目标路径文件中存在渲染路径，从ES模块文件中获取对应的渲染代码。

步骤306，向浏览器发送渲染代码，以使浏览器对渲染代码进行显示。

在本实施例中，步骤304、305和306的具体操作与图2所示的实施例中的步骤201、202和203的操作基本相同，在此不再赘述。

需要说明的是，在对HTML文件进行解析时，可以针对HTML文件中不同的入口文件代码(即，资源)进行解析时执行以上步骤201～步骤203。

从图3中可以看出，与图2对应的实施例相比，本实施例中的页面渲染方法300，服务器在接收到浏览器发送的GET请求，获取GET请求指示的业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件；之后，将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件，业务文件代码中的入口文件代码包括入口文件路径；之后，向浏览器发送处理后的HTML文件。能够实现对HTML文件的解析。

如图4，示出了根据本申请的页面渲染方法的一个实施例的流程图400，该页面渲染方法可以应用于服务器，该页面渲染方法可以包括以下步骤：

步骤401，响应于接收到浏览器发送的渲染请求，对渲染请求指示的业务文件代码进行解析，得到渲染路径。

在本实施例中，上述执行主体可以在接收到浏览器发送的渲染请求时，对渲染请求指示的业务文件代码进行解析，以得到渲染路径。

步骤402，响应于目标路径文件中存在渲染路径，从ES模块文件中获取对应的渲染代码。

步骤403，响应于目标路径文件中不存在渲染路径，将业务文件代码中的组件文件代码和样式文件代码挂载在渲染路径上。

在本实施例中，在步骤402执行之后，如果目标路径文件中不存在渲染路径，该页面渲染方法还可以包括：在目标路径文件中不存在渲染路径时，将业务文件代码中的组件文件代码和样式文件代码挂载渲染路径上，以返回至浏览器。

在本实施例中，由于在目标路径文件中无法查询到渲染路径，说明业务文件代码的渲染路径为相对路径，此时，服务器无法基于相对路径获取到对应的渲染代码，从而无法对该业务文件代码进行渲染解析。上述组件文件代码可以包括与业务文件代码所采用的技术栈的框架相关的代码。例如，app.vue、app.jsx等。上述样式文件代码可以包括与业务文件代码的样式相关的代码。例如，app.scss、app.scss。

步骤404，向浏览器发送挂载在渲染路径上的组件文件代码和样式文件代码。

在本实施例中，上述执行主体可以将组件文件代码和样式文件代码挂载渲染路径上，以发送至浏览器。

步骤405，响应于接收到浏览器发送的第一路径，将组件文件代码和样式文件代码挂载在第一路径上。

在本实施例中，上述执行主体可以在接收到挂载在渲染路径上的组件文件代码和样式文件代码时，向服务器发送第一路径，该第一路径可以为绝对路径，通过该绝对路径(即，存储渲染代码的真实路径)，可以得到对应的渲染代码。

步骤406，向浏览器发送挂载在第一路径上的组件文件代码和样式文件代码。

在本实施例中，上述执行主体可以向浏览器发送挂载在第一路径上的组件文件代码和样式文件代码。

步骤407，响应于接收到浏览器发送的解析请求，对挂载在第一路径上的组件文件代码进行解析，得到解析后的组件文件代码；以及对挂载在第一路径上的样式文件代码进行解析，得到解析后的样式文件代码。

在本实施例中，上述执行主体在接收到浏览器发送的解析请求时，对挂载在第一路径上的组件文件代码和样式文件代码分别进行解析，以得到解析后的组件文件代码和解析后的样式文件代码。

步骤408，将解析后的组件文件代码和解析后的样式文件代码作为渲染代码。

在本实施例中，上述执行主体在对组件文件代码和样式文件代码进行解析之后，在得到解析后的组件文件代码和解析后的样式文件代码之后，将解析后的组件文件代码和解析后的样式文件代码发送至浏览器以进行渲染显示。

步骤409，向浏览器发送渲染代码，以使浏览器对渲染代码进行显示。

需要说明的是，浏览器在编译时，如果遇到HTML文件中引用的资源后继续请求服务器，如果所引用的依赖库(即，第二依赖库)、框架代码(即组件文件代码)和样式文件代码在解析之后无法从目标路径文件中获取对应的渲染路径时，服务器还可以继续执行步骤401～409，将所引用的依赖库和框架代码解析成浏览器可以识别的代码返回给浏览器，就可以在浏览器实时渲染在线运行的代码。

在所引用的依赖库、框架代码(即组件文件代码)和样式文件代码中的任意一项可以从目标路径文件中获取到对应的渲染路径时，则可以执行步骤402，将渲染代码返回给浏览器，就可以在浏览器实时渲染在线运行的代码。

在一个示例中，在所引用的依赖库可以从目标路径文件中获取到对应的渲染路径时，则可以执行步骤402，将渲染代码返回给浏览器，就可以在浏览器实时渲染在线运行的代码。

在本实施例中，步骤401、402和403的具体操作与图2所示的实施例中的步骤201、202和203的操作基本相同，在此不再赘述。

从图4中可以看出，与图2对应的实施例相比，本实施例中的页面渲染方法400，在目标路径文件中不存在渲染路径时，服务器将业务文件代码中的组件文件代码和样式文件代码挂载在渲染路径上；之后，服务端向浏览器发送挂载在渲染路径上的组件文件代码和样式文件代码；之后，在服务器接收到浏览器发送的第一路径时，将组件文件代码和样式文件代码挂载在第一路径上；之后，服务器向浏览器发送挂载在第一路径上的组件文件代码和样式文件代码；之后，在服务器接收到浏览器发送的解析请求时，对挂载在第一路径上的组件文件代码进行解析，得到解析后的组件文件代码；以及对挂载在第一路径上的样式文件代码进行解析，得到解析后的样式文件代码；之后，服务器将解析后的组件文件代码和解析后的样式文件代码作为渲染代码。能够在从目标路径文件中无法查找到对应的文件路径时，将剩下的代码挂在路径上，以获取剩下的代码对应的绝对路径，从而可以实现对相对路径的代码的渲染，完成代码的实时预览效果。

在本实施例的一些可选的实现方式中，业务文件代码中的组件文件代码的类型为Vue或React；对挂载第一路径上的组件文件代码进行解析，得到解析后的组件文件代码，可以包括：利用Vue或React对组件文件代码进行解析，得到解析后的组件文件代码。

在本实现方式中，上述执行主体可以利组件文件代码的类型对应的解析方式对组件文件代码进行解析，以得到解析后的组件文件代码。上述组件文件代码的类型可以为Vue或React技术栈对应的类型。

在本实现方式中，可以通过与组件文件代码的类型对应的解析方式对组件文件代码进行解析，以得到解析后的组件文件代码。

在本实施例的一些可选的实现方式中，对挂载第一路径上的样式文件代码进行解析，得到解析后的样式文件代码，可以包括：利用node-sass将样式文件代码编译为预设的样式文件代码

在本实现方式中，可以利用node-sass将样式文件代码编译为预设的样式文件代码。

在这里，预设的样式文件代码可以为浏览器可支持显示的代码，例如，css文件代码。

在一个示例中，将Vue技术栈对应的样式文件代码解析为css文件代码。或，将React技术栈对应的样式文件代码解析为css文件。

在本实现方式中，可以利用node-sass将样式文件代码编译为预设的样式文件代码，以得到浏览器可识别的渲染代码。

继续参考图5，其示出了根据本申请的页面渲染方法的一个实施例的流程图500，该页面渲染方法可以应用于浏览器，该页面渲染方法可以包括以下步骤：

步骤501，向服务器发送渲染请求。

在本实施例中，更新业务处理模型的方法的执行主体(例如图1所示的浏览器101)向服务器发送渲染请求。

在这里，上述渲染请求用于指示服务器对渲染请求指示的业务文件代码进行解析，得到渲染路径，并在目标路径文件中存在该渲染路径时，从ES模块文件中获取对应的渲染代码；其中，ES模块文件和目标路径文件可以基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件。上述渲染请求用于指示服务器对浏览器发送的业务文件代码进行解析，以得到渲染路径。上述业务文件代码可以为与业务的类型相关的代码。

需要说明的是，在将渲染路径与目标路径文件进行匹配之前，由服务器预先利用预设的镜像源安装第一依赖库；之后，根据第一依赖库生成ES模块文件和目标路径文件。

步骤502，接收服务器发送的渲染代码，并对渲染代码进行显示。

在本实施例中，上述执行主体可以在发送渲染请求之后，接收服务器返回的渲染代码。上述渲染代码可以为对浏览器上的页面进行渲染显示的代码。

本申请的实施例提供的页面渲染方法，首先向服务器发送渲染请求，该渲染请求用于指示服务器对渲染请求指示的业务文件代码进行解析，得到渲染路径，并在目标路径文件中存在该渲染路径时，从ES模块文件中获取对应的渲染代码；其中，ES模块文件和目标路径文件可以基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件；然后接收服务器发送的渲染代码，并对渲染代码进行显示。能够通过服务器利用预设镜像源构建的第三方依赖库(即，第一依赖库)生成ES模块文件和对应的目标路径文件，以在服务器对渲染请求指示的业务文件代码进行解析，以得到渲染路径，并且在目标路径文件中存在渲染路径时，从ES模块文件中获取对应的渲染代码，最终得到浏览器可以识别解析的渲染代码，完成代码的实时预览效果。

如图6，其示出了根据本申请的页面渲染方法的一个实施例的流程图600，该页面渲染方法可以应用于浏览器，该页面渲染方法可以包括以下步骤：

步骤601，响应于检测到浏览器在运行业务文件代码，向服务器发送GET请求，其中，GET请求用于指示服务器获取业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件，并将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件。

在本实施例中，页面渲染方法的执行主体(例如图1所示的浏览器101)在检测到浏览器上在运行业务文件代码时，向服务器发送GET请求，该GET请求用于指示服务器(例如图1所示的服务器103)获取业务文件代码和存储在服务器的HTML文件，并将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件。

具体地，用户在浏览器运行业务文件代码时，需要对运行的业务文件代码进行以下操作：压缩、编码等。然后将处理后的业务文件代码挂载在统一资源定位符(UniformResource Locator，URL)参数上，向服务器发送GET请求；服务器在接收到GET请求之后，获取GET请求指示的业务文件代码和与业务文件代码对应的HTML文件，并将HTML文件和业务文件代码返回至浏览器。上述HTML文件可以包括至少一个入口文件代码，在每次对一个入口文件代码进行解析时，可以通过将GET请求以对每一个入口文件代码进行解析。

步骤602，响应于接收到服务器发送的处理后的HTML文件，对处理后的HTML文件进行解析。

在本实施例中，上述执行主体在得到处理后的HTML文件时，对处理后的HTML文件进行解析。

步骤603，向服务器发送渲染请求，包括：响应于检测到浏览器对处理后的HTML文件中的入口文件代码进行解析，向服务器发送渲染请求。

在本实施例中，上述执行主体响应于检测到浏览器对处理后的HTML文件中的入口文件代码进行解析，可以向服务器发送渲染请求，以请求服务器对业务文件代码进行解析，以得到业务文件代码的渲染路径。

步骤604，接收服务器发送的渲染代码，并对渲染代码进行显示。

在本实施例中，上述执行主体接收服务器发送的渲染代码时，对渲染代码进行显示。

在本实施例中，步骤604的具体操作与图5所示的实施例中的步骤503的操作基本相同，在此不再赘述。

从图6中可以看出，与图5对应的实施例相比，本实施例中的页面渲染方法600，在检测到浏览器在运行业务文件代码，浏览器向服务器发送GET请求，其中，GET请求用于指示服务器获取业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件，并将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件；之后，在浏览器接收到服务器发送的处理后的HTML文件，对处理后的HTML文件进行解析；之后，在检测到浏览器对处理后的HTML文件中的入口文件代码进行解析，向服务器发送渲染请求；之后，接收服务器发送的渲染代码，并对渲染代码进行显示。能够通过服务器利用预设镜像源构建的第三方依赖库(即，第一依赖库)所生成的ES模块文件和对应的目标路径文件，在服务器对渲染请求指示的业务文件代码进行解析，得到渲染路径，且在目标路径文件中存在渲染路径时，从ES模块文件中获取对应的渲染代码，最终得到浏览器可以识别解析的渲染代码，完成代码的实时预览效果。

在本实施例的一些可选的实现方式中，业务文件代码包括以下至少一项：入口文件代码、组件文件代码、样式文件代码。

在本实现方式中，业务文件代码可以包括以下至少一项：入口文件代码、组件文件代码和样式文件代码。

在本实现方式中，通过对入口文件代码、组件文件代码和样式文件代码中的至少一项进行解析，从而得到浏览器可以识别解析的代码，完成代码的实时预览效果。

在本实施例的一些可选的实现方式中，该页面渲染方法还包括：响应于接收到服务器发送的挂载在渲染路径上的业务文件代码中的组件文件代码和样式文件代码，发送第一路径；响应于接收服务器发送的挂载在第一路径上的业务文件代码中的组件文件代码和样式文件代码，向服务器发送解析请求；接收服务器发送的解析后的组件文件代码和解析后的样式文件代码，其中，渲染代码包括解析后的组件文件代码和解析后的样式文件代码。

在本实现方式中，上述执行主体在接收到服务器发送的挂载在渲染路径上的业务文件代码中的组件文件代码和样式文件代码，发送第一路径；之后，在接收服务器发送的挂载在第一路径上的业务文件代码中的组件文件代码和样式文件代码时，向服务器发送解析请求；接收服务器发送的解析后的组件文件代码和解析后的样式文件代码，其中，渲染代码包括解析后的组件文件代码和解析后的样式文件代码。上述，第一路径可以为真实存储组件文件代码和样式文件代码对应的绝对路径。

在本实现方式中，能够在从目标路径文件中无法查找到对应的文件路径时，将剩下的代码挂在路径上，以获取剩下的代码对应的绝对路径，从而可以实现对相对路径的代码的渲染，完成代码的实时预览效果。

在本实施例的一些可选的实现方式中，入口文件代码、组件文件代码和样式文件代码中的至少一项包括通过import函数导入的第二依赖库。

在本实现方式中，入口文件代码、组件文件代码和样式文件代码中的至少一项包括通过import函数导入的第二依赖库。

在一个示例中，针对import引入的文件，在服务器启动时所生成的“目标路径文件”中查找编译后对应的文件路径，如果找到对应的文件路径，则返回所保存的编译后的依赖库路径；如果没有找到说明是相对路径不存在于依赖库中，则在该路径的参数上添加除了已经解析后剩余的压缩代码。

在本实现方式中，能够通过服务器利用预设镜像源构建的第三方依赖库(即，第一依赖库)所生成的ES模块文件和对应的目标路径文件，以在服务器对第二依赖库进行解析，得到渲染路径，且在目标路径文件中存在渲染路径时，从ES模块文件中获取对应的渲染代码，最终得到浏览器可以识别解析的渲染代码，完成代码的实时预览效果。

在本实施例的一些可选的实现方式中，第二依赖库为通过import函数按照第二依赖库的名称导入的依赖库。

在本实现方式中，第二依赖库为通过import函数按照第二依赖库的名称导入的依赖库。

在本实现方式中，将按需导出的文件挂载到按名导入，以避免按需导入的变量无法解析。

在本申请中，页面渲染系统可以包括浏览器(例如图1所示的浏览器101)和服务器(例如图1所示的服务器702)；下面结合图7对页面渲染系统进行说明。如图7，其示出了根据本申请的页面渲染方法的一个实施例的流程图。其中，

服务器702利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件。浏览器701向服务器702发送渲染请求；响应于服务器702接收到渲染请求，对渲染请求指示的业务文件代码进行解析，得到渲染路径；响应于目标路径文件中存在渲染路径，服务器702从ES模块文件中获取对应的渲染代码；服务器702向浏览器701发送渲染代码；浏览器701接收服务器702发送的渲染代码，并对渲染代码进行显示。

在本实施例中，服务器702使用预设的镜像源安装所需的第一依赖库，并且使用esbuild进行依赖预编译，将CommonJS或UMD发布的依赖项转换为可以使得浏览器识别的ES模块文件。该过程生成两类文件：一个是可供浏览器识别的“ES模块文件”，另一个是保存了“上面ES Module文件路径和依赖包的对应关系(即，目标路径文件)”。

在本实施例的一些可选的实现方式中，在响应于接收到浏览器发送的渲染请求之前，响应于检测到浏览器701在运行业务文件代码，浏览器701向服务器702发送GET请求；响应于服务器702接收到浏览器701发送的GET请求，获取GET请求指示的业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件；服务端702将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件，业务文件代码中的入口文件代码包括入口文件路径；服务端702向浏览器701发送处理后的HTML文件；响应于浏览器701接收到服务器702发送的处理后的HTML文件，对处理后的HTML文件进行解析；浏览器701向服务器702发送渲染请求，包括：响应于检测到浏览器701对处理后的HTML文件中的入口文件代码进行解析，向服务器702发送渲染请求。

具体地，在浏览器701访问代码在线运行平台，选择需要开发的技术栈Vue或React，Vue技术栈对应的生成入口main.js、框架组件app.vue、样式文件app.scss三个代码区域，React技术栈对应生成入口main.jsx、框架组件app.jsx、样式文件app.scss三个代码区域；在用户开发完代码之后，点击运行代码，使用LZUTF8[5]分别将包含的代码进行压缩，再通过encodeBase64编码，将其挂载到URL参数，这时URL上就包含了被压缩处理过的入口文件代码、组件文件代码、样式文件代码，通过GET请求HTML到服务器702。服务器702在接收到HTML请求之后，获取挂载到URL上的代码，返回在服务器702已经保存好的HTML文件，并在HTML文件中所引用的入口文件main.js路径(即，入口文件路径)上挂载收到的压缩代码，浏览器701在接收到处理后的HTML文件并解析，在遇见挂载了压缩代码的入口main.js资源(即，入口文件代码)之后继续请求服务器702端。

在本实施例的一些可选的实现方式中，响应于目标路径文件中不存在渲染路径，服务器702将业务文件代码中的组件文件代码和样式文件代码挂载在渲染路径上；服务器702向浏览器701发送挂载在渲染路径上的组件文件代码和样式文件代码；响应于浏览器701接收到服务器702发送的挂载在渲染路径上的业务文件代码中的组件文件代码和样式文件代码，发送第一路径；响应于服务器702接收到浏览器701发送的第一路径，将组件文件代码和样式文件代码挂载在第一路径上；向浏览器701发送挂载在第一路径上的组件文件代码和样式文件代码；响应于浏览器701接收服务器702发送的挂载在第一路径上的业务文件代码中的组件文件代码和样式文件代码，向服务器702发送解析请求；响应于服务器702接收到浏览器701发送的解析请求，对挂载在第一路径上的组件文件代码进行解析，得到解析后的组件文件代码；以及对挂载在第一路径上的样式文件代码进行解析，得到解析后的样式文件代码；服务器702将解析后的组件文件代码和解析后的样式文件代码作为渲染代码；浏览器701接收服务器702发送的解析后的组件文件代码和解析后的样式文件代码，其中，渲染代码包括解析后的组件文件代码和解析后的样式文件代码。

在本实施例的一些可选的实现方式中，业务文件代码中的组件文件代码的类型为Vue或React；服务器702利用Vue或React对组件文件代码进行解析，得到解析后的组件文件代码。

在本实施例的一些可选的实现方式中，服务器702利用node-sass将样式文件代码编译为预设的样式文件代码。

服务器702解析文件中引入的scss样式文件，服务器可以使用node-sass将其编译为css文件，然后在返回的js代码中，将样式文件通过生成<style>标签挂载到body上。

在本实施例中，经过上述处理后的将渲染代码文件返回给浏览器，就可以在浏览器实时渲染在线运行的代码。

进一步参考图8，作为对上述各图所示方法的实现，本申请公开了页面渲染装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图8所示，本申请的实施例提供了一种页面渲染装置800，该装置800包括：请求接收模块801、路径得到模块802、代码获取模块803和代码发送模块804。其中，该装置800应用于服务器，服务器包括ES模块文件和对应的目标路径文件，ES模块文件和对应的目标路径文件基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件，该页面渲染装置包括：请求接收模块801，被配置成接收浏览器发送的渲染请求；路径得到模块802，被配置成响应于接收到浏览器发送的渲染请求，对渲染请求指示的业务文件代码进行解析，得到渲染路径；代码获取模块803，被配置成响应于目标路径文件中存在渲染路径，从ES模块文件中获取对应的渲染代码；代码发送模块804，被配置成向浏览器发送渲染代码，以使浏览器对渲染代码进行显示。

在本实施例中，页面渲染装置800中，请求接收模块801、路径得到模块802、代码获取模块803和代码发送模块804的具体处理及其所带来的技术效果可分别参考图2对应实施例中的步骤201～步骤203。

在一些实施例中，在响应于接收到浏览器发送的渲染请求之前，该装置800还包括：请求接收模块801，被配置成接收浏览器发送的GET请求；文件获取模块，被配置成响应于接收到浏览器发送的GET请求，获取GET请求指示的业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件；文件处理模块，被配置成将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件，业务文件代码中的入口文件代码包括入口文件路径；文件发送模块，被配置成向浏览器发送处理后的HTML文件。

在一些实施例中，该装置800还包括：代码处理模块，被配置成响应于目标路径文件中不存在渲染路径，将业务文件代码中的组件文件代码和样式文件代码挂载在渲染路径上；代码发送模块804，被配置成向浏览器发送挂载在渲染路径上的组件文件代码和样式文件代码；代码处理模块，被配置成响应于接收到浏览器发送的第一路径，将组件文件代码和样式文件代码挂载在第一路径上；代码发送模块804，被配置成向浏览器发送挂载在第一路径上的组件文件代码和样式文件代码；代码解析模块，被配置成响应于接收到浏览器发送的解析请求，对挂载在第一路径上的组件文件代码进行解析，得到解析后的组件文件代码；以及对挂载在第一路径上的样式文件代码进行解析，得到解析后的样式文件代码；代码确定模块，被配置成将解析后的组件文件代码和解析后的样式文件代码作为渲染代码。

进一步参考图9，作为对上述各图所示方法的实现，本申请公开了页面渲染装置的一个实施例，该装置实施例与图5所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图9所示，本申请的实施例提供了一种页面渲染装置900，该装置900包括：请求发送模块901、代码接收模块902和代码显示模块903。其中，该装置900应用于浏览器，该页面渲染装置900包括：请求发送模块901，被配置成向服务器发送渲染请求，其中，渲染请求用于指示服务器对渲染请求指示的业务文件代码进行解析，得到渲染路径，并在目标路径文件中存在渲染路径时，从ES模块文件中获取对应的渲染代码，其中，ES模块文件和目标路径文件基于以下步骤确定：服务器利用预设的镜像源安装第一依赖库，并根据第一依赖库生成ES模块文件和目标路径文件；代码接收模块902，被配置成接收服务器发送的渲染代码；代码显示模块903，被配置成对渲染代码进行显示。

在本实施例中，页面渲染装置900中，请求发送模块901、代码接收模块902和代码显示模块903的具体处理及其所带来的技术效果可分别参考图5对应实施例中的步骤501～步骤502。

在一些实施例中，该装置900还包括：请求发送模块901，被配置成响应于检测到浏览器在运行业务文件代码，向服务器发送GET请求，其中，GET请求用于指示服务器获取业务文件代码，以及与业务文件代码对应的超文本标记语言HTML文件，并将业务文件代码挂载在HTML文件中的入口文件路径上，得到处理后的HTML文件；文件解析模块，被配置成响应于接收到服务器发送的处理后的HTML文件，对处理后的HTML文件进行解析；请求发送模块901，进一步配置成：响应于检测到浏览器对处理后的HTML文件中的入口文件代码进行解析，向服务器发送渲染请求。

在一些实施例中，该装置900还包括：路径发送模块，被配置成响应于接收到服务器发送的挂载在渲染路径上的业务文件代码中的组件文件代码和样式文件代码，发送第一路径；请求发送模块901，被配置成响应于接收服务器发送的挂载在第一路径上的业务文件代码中的组件文件代码和样式文件代码，向服务器发送解析请求；代码接收模块902，被配置成接收服务器发送的解析后的组件文件代码和解析后的样式文件代码，其中，渲染代码包括解析后的组件文件代码和解析后的样式文件代码。

如图10所示，是根据本申请实施例的页面渲染方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图10所示，该电子设备包括：一个或多个处理器1001、存储器1002，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图10中以一个处理器1001为例。

存储器1002即为本申请所提供的非瞬时计算机可读存储介质。其中，存储器存储有可由至少一个处理器执行的指令，以使至少一个处理器执行本申请所提供的页面渲染方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的页面渲染方法。

存储器1002作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的页面渲染方法对应的程序指令/模块(例如，附图8所示的请求接收模块801、路径得到模块802、代码获取模块803和代码发送模块804；或图9所示的请求发送模块901、代码接收模块902和代码显示模块903)。处理器1001通过运行存储在存储器1002中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的页面渲染方法。

存储器1002可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据基于区块链的信息处理电子设备的使用所创建的数据等。此外，存储器1002可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器1002可选包括相对于处理器1001远程设置的存储器，这些远程存储器可以通过网络连接至基于区块链的信息处理电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

页面渲染方法的电子设备还可以包括：输入装置1003和输出装置1004。处理器1001、存储器1002、输入装置1003和输出装置1004可以通过总线或者其他方式连接，图10中以通过总线连接为例。

输入装置1003可接收输入的数字或字符信息，以及产生与基于区块链的信息处理电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置1004可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims

1.一种页面渲染方法，应用于服务器，所述服务器包括ES模块文件和对应的目标路径文件，所述ES模块文件和对应的目标路径文件基于以下步骤确定：所述服务器利用预设的镜像源安装第一依赖库，并根据所述第一依赖库生成所述ES模块文件和所述目标路径文件，所述方法包括：

响应于接收到浏览器发送的渲染请求，对所述渲染请求指示的业务文件代码进行解析，得到渲染路径；

响应于所述目标路径文件中存在所述渲染路径，从所述ES模块文件中获取对应的渲染代码；

向所述浏览器发送所述渲染代码，以使所述浏览器对所述渲染代码进行显示。

2.根据权利要求1所述的方法，其中，在响应于接收到浏览器发送的渲染请求之前，所述方法还包括：

响应于接收到所述浏览器发送的GET请求，获取所述GET请求指示的业务文件代码，以及与所述业务文件代码对应的超文本标记语言HTML文件；

将所述业务文件代码挂载在所述HTML文件中的入口文件路径上，得到处理后的HTML文件，所述业务文件代码中的入口文件代码包括所述入口文件路径；

向所述浏览器发送处理后的HTML文件。

3.根据权利要求1或2所述的方法，所述方法还包括：

响应于所述目标路径文件中不存在所述渲染路径，将所述业务文件代码中的组件文件代码和样式文件代码挂载在所述渲染路径上；

向所述浏览器发送挂载在所述渲染路径上的组件文件代码和样式文件代码；

响应于接收到所述浏览器发送的第一路径，将组件文件代码和样式文件代码挂载在所述第一路径上；

向所述浏览器发送挂载在所述第一路径上的组件文件代码和样式文件代码；

响应于接收到所述浏览器发送的解析请求，对挂载在所述第一路径上的组件文件代码进行解析，得到解析后的组件文件代码；以及对挂载在所述第一路径上的样式文件代码进行解析，得到解析后的样式文件代码；

将解析后的组件文件代码和解析后的样式文件代码作为渲染代码。

4.根据权利要求3所述的方法，其中，所述业务文件代码中的组件文件代码的类型为Vue或React；所述对挂载所述第一路径上的组件文件代码进行解析，得到解析后的组件文件代码，包括：

利用Vue或React对所述组件文件代码进行解析，得到解析后的组件文件代码。

5.根据权利要求3所述的方法，其中，所述对挂载所述第一路径上的样式文件代码进行解析，得到解析后的样式文件代码，包括：

利用node-sass将所述样式文件代码编译为预设的样式文件代码。

6.一种页面渲染方法，应用于浏览器，所述方法包括：

向服务器发送渲染请求，其中，所述渲染请求用于指示所述服务器对所述渲染请求指示的业务文件代码进行解析，得到渲染路径，并在目标路径文件中存在所述渲染路径时，从ES模块文件中获取对应的渲染代码，其中，所述ES模块文件和所述目标路径文件基于以下步骤确定：所述服务器利用预设的镜像源安装第一依赖库，并根据所述第一依赖库生成所述ES模块文件和所述目标路径文件；

接收所述服务器发送的渲染代码，并对所述渲染代码进行显示。

7.根据权利要求6所述的方法，其中，所述业务文件代码包括以下至少一项：入口文件代码、组件文件代码、样式文件代码。

8.根据权利要求6或7所述的方法，所述方法还包括：

响应于检测到所述浏览器在运行业务文件代码，向所述服务器发送GET请求，其中，所述GET请求用于指示所述服务器获取业务文件代码，以及与所述业务文件代码对应的超文本标记语言HTML文件，并将所述业务文件代码挂载在所述HTML文件中的入口文件路径上，得到处理后的HTML文件；

响应于接收到所述服务器发送的处理后的HTML文件，对处理后的HTML文件进行解析；

向服务器发送渲染请求，包括：响应于检测到所述浏览器对处理后的HTML文件中的入口文件代码进行解析，向所述服务器发送所述渲染请求。

9.根据权利要求6或7所述的方法，所述方法还包括：

响应于接收到所述服务器发送的挂载在所述渲染路径上的所述业务文件代码中的组件文件代码和样式文件代码，发送第一路径；

响应于接收所述服务器发送的挂载在所述第一路径上的所述业务文件代码中的组件文件代码和样式文件代码，向所述服务器发送解析请求；

接收所述服务器发送的解析后的组件文件代码和解析后的样式文件代码，其中，所述渲染代码包括解析后的组件文件代码和解析后的样式文件代码。

10.根据权利要求7所述的方法，其中，入口文件代码、组件文件代码和样式文件代码中的至少一项包括通过import函数导入的第二依赖库。

11.根据权利要求10所述的方法，其中，所述第二依赖库为通过import函数按照所述第二依赖库的名称导入的依赖库。

12.一种页面渲染装置，应用于服务器，所述服务器包括ES模块文件和对应的目标路径文件，所述ES模块文件和对应的目标路径文件基于以下步骤确定：所述服务器利用预设的镜像源安装第一依赖库，并根据所述第一依赖库生成所述ES模块文件和所述目标路径文件，所述装置包括：

请求接收模块，被配置成接收浏览器发送的渲染请求；

路径得到模块，被配置成响应于接收到浏览器发送的渲染请求，对所述渲染请求指示的业务文件代码进行解析，得到渲染路径；

代码获取模块，被配置成响应于所述目标路径文件中存在所述渲染路径，从所述ES模块文件中获取对应的渲染代码；

代码发送模块，被配置成向所述浏览器发送所述渲染代码，以使所述浏览器对所述渲染代码进行显示。

13.根据权利要求12所述的装置，其中，在响应于接收到浏览器发送的渲染请求之前，所述装置还包括：

所述请求接收模块，被配置成接收所述浏览器发送的GET请求；

文件获取模块，被配置成响应于接收到所述浏览器发送的GET请求，获取所述GET请求指示的业务文件代码，以及与所述业务文件代码对应的超文本标记语言HTML文件；

文件处理模块，被配置成将所述业务文件代码挂载在所述HTML文件中的入口文件路径上，得到处理后的HTML文件，所述业务文件代码中的入口文件代码包括所述入口文件路径；

文件发送模块，被配置成向所述浏览器发送处理后的HTML文件。

14.根据权利要求12或13所述的装置，所述装置还包括：

代码处理模块，被配置成响应于所述目标路径文件中不存在所述渲染路径，将所述业务文件代码中的组件文件代码和样式文件代码挂载在所述渲染路径上；

所述代码发送模块，被配置成向所述浏览器发送挂载在所述渲染路径上的组件文件代码和样式文件代码；

所述代码处理模块，被配置成响应于接收到所述浏览器发送的第一路径，将组件文件代码和样式文件代码挂载在所述第一路径上；

所述代码发送模块，被配置成向所述浏览器发送挂载在所述第一路径上的组件文件代码和样式文件代码；

代码解析模块，被配置成响应于接收到所述浏览器发送的解析请求，对挂载在所述第一路径上的组件文件代码进行解析，得到解析后的组件文件代码；以及对挂载在所述第一路径上的样式文件代码进行解析，得到解析后的样式文件代码；

代码确定模块，被配置成将解析后的组件文件代码和解析后的样式文件代码作为渲染代码。

15.根据权利要求14所述的装置，其中，所述业务文件代码中的组件文件代码的类型为Vue或React；所述代码解析模块，进一步被配置成：

16.根据权利要求14所述的装置，其中，所述代码解析模块，进一步被配置成：

17.一种页面渲染装置，应用于浏览器，所述装置包括：

请求发送模块，被配置成向服务器发送渲染请求，其中，所述渲染请求用于指示所述服务器对所述渲染请求指示的业务文件代码进行解析，得到渲染路径，并在目标路径文件中存在所述渲染路径时，从ES模块文件中获取对应的渲染代码，其中，所述ES模块文件和所述目标路径文件基于以下步骤确定：所述服务器利用预设的镜像源安装第一依赖库，并根据所述第一依赖库生成所述ES模块文件和所述目标路径文件；

代码接收模块，被配置成接收所述服务器发送的渲染代码；

代码显示模块，被配置成对所述渲染代码进行显示。

18.根据权利要求17所述的装置，其中，所述业务文件代码包括以下至少一项：入口文件代码、组件文件代码、样式文件代码。

19.根据权利要求17或18所述的装置，所述装置还包括：

请求发送模块，被配置成响应于检测到所述浏览器在运行业务文件代码，向所述服务器发送GET请求，其中，所述GET请求用于指示所述服务器获取业务文件代码，以及与所述业务文件代码对应的超文本标记语言HTML文件，并将所述业务文件代码挂载在所述HTML文件中的入口文件路径上，得到处理后的HTML文件；

文件解析模块，被配置成响应于接收到所述服务器发送的处理后的HTML文件，对处理后的HTML文件进行解析；

所述请求发送模块，进一步配置成：响应于检测到所述浏览器对处理后的HTML文件中的入口文件代码进行解析，向所述服务器发送所述渲染请求。

20.根据权利要求17或18所述的装置，所述装置还包括：

路径发送模块，被配置成响应于接收到所述服务器发送的挂载在所述渲染路径上的所述业务文件代码中的组件文件代码和样式文件代码，发送第一路径；

所述请求发送模块，被配置成响应于接收所述服务器发送的挂载在所述第一路径上的所述业务文件代码中的组件文件代码和样式文件代码，向所述服务器发送解析请求；

所述代码接收模块，被配置成接收所述服务器发送的解析后的组件文件代码和解析后的样式文件代码，其中，所述渲染代码包括解析后的组件文件代码和解析后的样式文件代码。

21.根据权利要求18所述的装置，其中，入口文件代码、组件文件代码和样式文件代码中的至少一项包括通过import函数导入的第二依赖库。

22.根据权利要求21所述的装置，其中，所述第二依赖库为通过import函数按照所述第二依赖库的名称导入的依赖库。

23.一种页面渲染系统，包括：

服务器利用预设的镜像源安装第一依赖库，并根据所述第一依赖库生成ES模块文件和目标路径文件；

浏览器向服务器发送渲染请求；

所述服务器接收到所述渲染请求，对所述渲染请求指示的业务文件代码进行解析，得到渲染路径；响应于所述目标路径文件中存在所述渲染路径，所述服务器从所述ES模块文件中获取对应的渲染代码；所述服务器向所述浏览器发送所述渲染代码；

所述浏览器接收所述服务器发送的渲染代码，并对所述渲染代码进行显示。

24.一种电子设备，包括：

一个或多个处理器；

存储装置，其上存储有一个或多个程序；

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

25.一种存储有计算机指令的非瞬时计算机可读存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如权利要求1-5或6-11中任一所述的方法。