一种静态网页的渲染方法、装置、设备及计算机存储介质与流程

本发明涉及计算机信息技术领域，尤其涉及一种静态网页的渲染方法、装置、设备及计算机存储介质。

背景技术：

在webapp或hybridapp项目中，经常出现需要开发功能相似，但是用户界面风格稍有不同的页面的场景。业内常用做法是将页面的功能模块划分为组件，根据需要将模板页面的配置信息存储到远端的数据库，模板页面在加载后请求服务器接口，读取与该模板页面对应的组件配置并渲染至页面中。

现有技术的这种做法依赖后端服务器和数据库，需要复杂的优化和较高的运维成本才能保证系统的可用性和性能，特别对于发布不频繁的页面，该方案性价比也比较低。

上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。

技术实现要素：

本发明的主要目的在于提供了一种静态网页的渲染方法、装置、设备及计算机存储介质，旨在解决目前静态网页在渲染过程中由于需要依赖后端服务器和数据库，造成运维成本较高的问题。

为实现上述目的，本发明提供了一种静态网页的渲染方法、装置、设备及计算机存储介质，所述方法包括以下步骤：

在接收到静态网页的访问请求时，加载所述静态网页对应的超文本标记语言文件；

对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址；

根据所述本地存储地址加载所述目标网页脚本；

从所述目标网页脚本中读取编码设计模式为模块模式的页面配置文件；

解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染。

优选地，所述对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址的步骤，包括：

对所述超文本标记语言文件进行编译，从编译结果中获取格式为javascript的目标网页脚本对应的本地存储地址；

所述从所述目标网页脚本中读取编码设计模式为模块模式的页面配置文件的步骤，包括：

从所述目标网页脚本中抽取与所述静态网页的渲染处理相关的目标源代码；

将所述目标源代码转化为的javascript对象数据；

判断所述javascript对象数据是否为模块模式；

在所述javascript对象数据为模块模式时，读取所述目标源代码对应的页面配置文件。

优选地，所述解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染的步骤，包括：

调用所述静态网页的层叠样式表文件；

解析所述页面配置文件，从解析结果中确定待渲染模块区域；

根据所述层叠样式表文件对所述待渲染模块区域进行渲染，以实现对所述静态网页进行页面渲染。

优选地，所述在接收到静态网页的访问请求时，加载所述静态网页对应的超文本标记语言文件的步骤之前，所述方法还包括：

在接收到对静态网页的预编译指令时，加载与所述静态网页对应的页面配置文件；

对所述页面配置文件进行模块化打包处理，得到对应的待处理javascript对象数据；

对所述待处理javascript对象数据进行封装，得到目标javascript模块模式文件；

将所述目标javascript模块模式文件作为目标页面配置文件保存到本地的预设存储区域。

优选地，所述在接收到对静态网页的预编译指令时，加载与所述静态网页对应的页面配置文件的步骤，包括：

在接收到对静态网页的预编译指令时，加载与所述静态网页对应的页面配置文件和页面资源；

所述将所述目标javascript模块模式文件作为目标页面配置文件保存到本地的预设存储区域的步骤之后，还包括：

将所述目标页面配置文件与所述页面资源进行打包，将打包后的结果作为目标网页脚本保存到所述预设存储区域。

优选地，所述将所述目标页面配置文件与所述页面资源进行打包，将打包后的结果作为网页脚本保存到所述预设存储区域的步骤之后，还包括：

在接收到所述目标页面配置文件的升级配置数据时，对所述目标网页脚本进行删除；

将所述升级配置数据进行模块化打包处理，得到对应的待升级javascript对象数据；

对所述待升级javascript对象数据进行封装，得到待升级javascript模块模式文件；

将所述待升级javascript模块模式文件与所述页面资源进行打包，将打包后的结果作为新的网页脚本保存到所述预设存储区域。

优选地，所述在接收到对静态网页的预编译指令时，加载与所述静态网页对应的页面配置文件的步骤之后，还包括：

提取所述页面配置文件中的字符串数据；

检查所述字符串数据是否为json格式，在所述字符串数据为json格式时，执行所述对所述页面配置文件进行模块化打包处理，得到对应的待处理javascript对象数据的步骤。

此外，为实现上述目的，本发明还提出一种静态网页的渲染装置，所述装置包括：

加载模块，用于在接收到静态网页的访问请求时，加载所述静态网页对应的超文本标记语言文件；

编译模块，用于对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址；

加载模块，用于根据所述本地存储地址加载所述目标网页脚本；

读取模块，用于从所述目标网页脚本中读取编码设计模式为模块模式的页面配置文件；

渲染模块，用于解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染。

此外，为实现上述目的，本发明还提出一种网页渲染设备，所述网页渲染设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的静态网页的渲染程序，所述静态网页的渲染程序配置为实现如上所述的静态网页的渲染方法的步骤。

此外，为实现上述目的，本发明还提出一种计算机存储介质，所述计算机存储介质存储有静态网页的渲染程序，所述静态网页的渲染程序配置为实现如上所述的静态网页的渲染方法的步骤。

本发明在接收到静态网页的访问请求时，加载静态网页对应的超文本标记语言文件；对超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址；根据本地存储地址加载目标网页脚本，从目标网页脚本中读取代码设计格式为模块模式的页面配置文件；最后解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染，进而浏览器在不依赖后端逻辑及数据服务的前提对静态网页实现较好地渲染处理，降低了页面部署以及运维的成本，使得静态网页更容易进行页面访问加速处理，提升网络加载速度。

附图说明

图1为本发明实施例方案涉及的硬件运行环境的网页渲染设备的结构示意图；

图2为本发明一种静态网页的渲染方法第一实施例的流程示意图；

图3为本发明一种静态网页的渲染方法第二实施例的流程示意图；

图4为本发明一种静态网页的渲染方法第三实施例的流程示意图；

图5为本发明一种静态网页的渲染装置的结构框图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

参照图1，图1为本发明实施例方案涉及的硬件运行环境的网页渲染设备的结构示意图。

如图1所示，该网页渲染设备可以包括：处理器1001，例如cpu，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(display)、输入单元比如键盘(keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如wi-fi接口)。存储器1005可以是高速ram存储器，也可以是稳定的存储器(non-volatilememory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的结构并不构成对所述设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接收模块、网页浏览器以及静态网页的渲染程序。所述网页浏览器可用是ie(internetexplorer)浏览器。

在图1所示的设备中，处理器1001运行以启动浏览器，通过所述浏览器调用存储器1005中存储的静态网页的渲染程序，并执行静态网页的渲染方法的步骤。

参照图2，图2为本发明一种静态网页的渲染方法第一实施例的流程示意图。

本实施例中，所述静态网页的渲染方法包括以下步骤：

步骤s10：在接收到静态网页的访问请求时，加载所述静态网页对应的超文本标记语言文件。

需要说明的是，本实施例的执行主体为装载于上述网页渲染设备的浏览器。所述网页渲染设备可以是笔记本电脑、台式电脑、智能手机或者智能电视等终端设备。所述网页渲染设备上面装载有支持所述静态网页运行的源代码文件，例如html(hypertextmarkuplanguage，超文本标记语言)文件，javascript文件，css(cascadingstylesheets，层叠样式表)文件以及xhtml(extensiblehypertextmarkuplanguage，可扩展超文本标记语言)等文件。

当其他终端向所述静态网页发送访问请求时，浏览器会加载保存在上述设备中的所述静态网页对应目录下的html文件。

步骤s20：对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址，根据所述本地存储地址加载所述目标网页脚本。

可理解的是，计算机系统会把超文本标记语言中的源代码程序的每一条语句都编译成机器语言，并保存成二进制文件，这样运行时计算机可以直接以机器语言来运行此程序，速度很快。

具体地，html的源代码中会嵌入有与所述静态网页对应的网页脚本，以及该网页脚本对应的本地存储地址；

本实施例以javascript脚本作为目标网页脚本为例进行说明，浏览器会从html的编译结果中获取格式为javascript的目标网页脚本，然后确定目标网页脚本对应的本地存储地址，然后加载位于本地存储地址的目标网页脚本，本实施例的本地存储地址为(本地的)上述设备上与所述静态网页相关的某个文件夹，所述目标网页脚本保存于该文件夹中。

步骤s30：从所述目标网页脚本中读取编码设计模式为模块模式的页面配置文件。

可理解的是，设计模式(designpattern)表征一套被反复使用和代码设计经验的总结。使用设计模式的目的在于为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。设计模式使代码编写真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。

模块模式是一种网页脚本(如javascript)编码模式，模块是任何强大的应用程序体系结构的组成部分，通常有助于保持项目的代码单元完全分离和组织。

具体地，本实施例中，所述静态网页相应的页面配置文件会通过预编译的方式集成到目标网页脚本中，而现有技术的页面配置文件是在后端的服务器和数据库的。即本实施例的静态网页在运行时，所述静态网页对应的页面组件配置不会像现有技术那样从服务器拉取，而是改为提前编译生成。

本实施例的预编译的方式可以为：采用json格式定义页面配置文件，并采用前端模块化编译工具(如webpack)，将json配置打包成javascript模块，直接装载在页面的静态javascript文件中，编译后生成不依赖任何后端服务和数据接口的静态页面资源包，可以方便地发布至web服务器。

本实施例的页面配置文件集成在目标网页脚本中的好处在于：计算机系统在运行纯静态页面时，可以不依赖后端逻辑及数据服务，可以减少了页面部署的成本，纯静态页面也更容易借助类似于cdn(contentdeliverynetwork，内容分发网络)系统等平台进行页面访问加速，提升网络加载速度。

在具体实现中，浏览器会从所述目标网页脚本中抽取与所述静态网页的渲染处理相关的目标源代码；然后将所述目标源代码转化为的javascript对象数据；进而判断所述javascript对象数据是否为模块模式；在所述javascript对象数据为模块模式时，读取所述目标源代码对应的页面配置文件。

步骤s40：解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染。

在具体实现中，浏览器会调用所述静态网页的层叠样式表文件；然后解析所述页面配置文件，从解析结果中确定待渲染模块区域；最后根据所述层叠样式表文件对所述待渲染模块区域进行渲染，以实现对所述静态网页进行页面渲染。

本实施例中的浏览器除了需要编译html文件，还会对svg(scalablevectorgraphics，图像文件格式)以及xhtml文件进行编译；本地存储地址中会预存有三个c++的类对应这三类(html/svg/xhtml)文档。

具体地渲染方式为：在对html/svg/xhtml进行编译后，解析这三种文件会产生一个domtree(文档对象化模型)。

相应地，调用所述静态网页的层叠样式表css文件，解析css文件会产生css规则树。通过domapi(applicationprogramminginterface，文档对象模型接口函数)和cssomapi(css对象模型接口函数)来操作domtree和css规则树。

解析完成后，浏览器引擎会通过domtree和css规则树来构造renderingtree(渲染树)。

相应地，浏览器会解析本地的编码设计模式为模块模式的所述页面配置文件，以定位所述静态页面中的网页模块的坐标和大小，即从解析结果中确定待渲染模块区域；

最后通过renderingtree渲染树对待渲染模块区域进行渲染，以实现对所述静态网页进行页面渲染。

本实施例在接收到静态网页的访问请求时，加载静态网页对应的超文本标记语言文件；对超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址；根据本地存储地址加载目标网页脚本，从目标网页脚本中读取代码设计格式为模块模式的页面配置文件；最后解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染，进而浏览器在不依赖后端逻辑及数据服务的前提对静态网页实现较好地渲染处理，降低了页面部署以及运维的成本，使得静态网页更容易借助cdn系统等平台进行页面访问加速，提升网络加载速度。

参照图3，图3为本发明一种静态网页的渲染方法第二实施例的流程示意图，基于上述静态网页的渲染方法第一实施例，提出本发明一种静态网页的渲染方法第二实施例。

本实施例中，所述步骤s10之前，所述方法还包括：

步骤s01：在接收到对静态网页的预编译指令时，加载与所述静态网页对应的页面配置文件；

需要说明的是，本实施例是对所述静态网页相应的页面配置文件在通过预编译的方式集成到目标网页脚本中的具体实施方式的说明。

可理解的是，网页设计人员会向网页渲染设备的计算机系统输入对静态网页的预编译指令，计算机系统会加载与所述静态网页对应的页面配置文件和页面资源，其中页面配置文件和页面资源是部署在所述网页渲染设备中。

进一步地，本实施例中，计算机系统会提取所述页面配置文件中的字符串数据；检查所述字符串数据是否为json格式，在所述字符串数据为json格式时，执行步骤s02。

步骤s02：对所述页面配置文件进行模块化打包处理，得到对应的待处理javascript对象数据；对所述待处理javascript对象数据进行封装，得到目标javascript模块模式文件；将所述目标javascript模块模式文件作为目标页面配置文件保存到本地的预设存储区域。

具体地，本实施例采用json格式定义页面配置文件，并采用前端模块化编译工具(如webpack工具)将json配置打包成待处理javascript对象数据，并对所述待处理javascript对象数据进行封装，得到目标javascript模块模式文件，最后将所述目标javascript模块模式文件作为目标页面配置文件保存到本地的预设存储区域中。

在具体实现中，本实施例所采用的前端模块化编译为webpack工具，其原理是一切皆为模块，由于webpack只支持javascript文件，所以需要用加载器loader转换为webpack支持的模块。

webpack工作的流程为：

首先解析配置参数，合并从shell(npminstall类似的命令)和webpack.config.js文件的配置信息，输出最终的配置信息；

然后注册配置中的插件，好让插件监听webpack构建生命周期中的事件节点，做出对应的反应；

再解析配置文件中的entry入口文件，并找出每个文件依赖的文件，递归下去；

然后在递归每个文件的过程中，根据文件类型和配置文件中的loader找出对应的loader对文件进行转换；

最后递归结束后得到每个文件最终的结果，根据entry配置生成代码chunk(打包之后的名字)，从而输出chunk到文件系统。

步骤s03：将所述目标页面配置文件与所述页面资源进行打包，将打包后的结果作为目标网页脚本保存到所述预设存储区域。

具体地，计算机系统会对目标页面配置文件与所述页面资源进行打包，这样就能够使得目标页面配置文件直接集成在javascript网页脚本文件中，即编译后生成不依赖任何后端服务和数据接口的静态页面资源包(即目标网页脚本保存)，可以方便地发布至web服务器。

本实施例的静态网页相应的页面配置文件会通过预编译的方式集成到目标网页脚本中，是不同于现有技术的页面配置文件是由后端的服务器和数据库提供的方式。本实施例的静态网页在运行时，所述静态网页对应的页面组件配置不会像现有技术那样从服务器拉取，而是改为提前编译生成。进而使得浏览器在运行纯静态页面时，可以不依赖后端逻辑及数据服务，可以减少了页面部署的成本，纯静态页面也更容易借助类似于cdn系统等平台进行页面访问加速，提升网络加载速度。

参照图4，图4为本发明一种静态网页的渲染方法的第三实施例的流程示意图，基于上述静态网页的渲染方法的第一或第二实施例，提出本发明一种静态网页的渲染方法第三实施例。

本实施例中，所述步骤s03之后，还包括：

步骤s05：在接收到所述目标页面配置文件的升级配置数据时，对所述目标网页脚本进行删除；

步骤s06：将所述升级配置数据进行模块化打包处理，得到对应的待升级javascript对象数据；

步骤s07：对所述待升级javascript对象数据进行封装，得到待升级javascript模块模式文件；

步骤s08：将所述待升级javascript模块模式文件与所述页面资源进行打包，将打包后的结果作为新的网页脚本保存到所述预设存储区域。

可理解的是，本实施例是对所述静态网页相应的页面配置文件进行升级调整的实施方式的说明，本实施例的纯静态页面文件不依赖后端逻辑及数据服务，且页面部署及运维成本低，进而方便运维人员对所述静态网页相应的页面配置文件进行相关的升级调整。

此外，参照图5，本发明还提出一种静态网页的渲染装置，所述装置包括：

接收模块10，用于在接收到静态网页的访问请求时，加载所述静态网页对应的超文本标记语言文件；

编译模块20，用于对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址；

加载模块30，用于根据所述本地存储地址加载所述目标网页脚本；

读取模块40，用于从所述目标网页脚本中读取编码设计模式为模块模式的页面配置文件；

渲染模块50，用于解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染。

可理解的是，本实施的静态网页的渲染装置可以是一种计算机程序，该计算机程序装载在上述实施例的网页渲染设备中，本发明的静态网页的渲染装置的具体实现方式可参照上述静态网页的渲染方法实施例，此处不再赘述。

此外，本发明还提供一种计算机存储介质，所述计算机存储介质存储有静态网页的渲染程序，所述静态网页的渲染程序配置为实现如上所述的静态网页的渲染方法的步骤。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

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

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