CN110990731B - 一种静态网页的渲染方法、装置、设备及计算机存储介质 - Google Patents

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

Info

Publication number
CN110990731B
CN110990731B CN201910970892.0A CN201910970892A CN110990731B CN 110990731 B CN110990731 B CN 110990731B CN 201910970892 A CN201910970892 A CN 201910970892A CN 110990731 B CN110990731 B CN 110990731B
Authority
CN
China
Prior art keywords
page
static
webpage
target
rendering
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201910970892.0A
Other languages
English (en)
Other versions
CN110990731A (zh
Inventor
曾锐
高翊竣
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Saiante Technology Service Co Ltd
Original Assignee
Shenzhen Saiante Technology Service Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Saiante Technology Service Co Ltd filed Critical Shenzhen Saiante Technology Service Co Ltd
Priority to CN201910970892.0A priority Critical patent/CN110990731B/zh
Publication of CN110990731A publication Critical patent/CN110990731A/zh
Application granted granted Critical
Publication of CN110990731B publication Critical patent/CN110990731B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

一种静态网页的渲染方法、装置、设备及计算机存储介质
技术领域
本发明涉及计算机信息技术领域，尤其涉及一种静态网页的渲染方法、装置、设备及计算机存储介质。
背景技术
在Web APP或Hybrid APP项目中，经常出现需要开发功能相似，但是用户界面风格稍有不同的页面的场景。业内常用做法是将页面的功能模块划分为组件，根据需要将模板页面的配置信息存储到远端的数据库，模板页面在加载后请求服务器接口，读取与该模板页面对应的组件配置并渲染至页面中。
现有技术的这种做法依赖后端服务器和数据库，需要复杂的优化和较高的运维成本才能保证系统的可用性和性能，特别对于发布不频繁的页面，该方案性价比也比较低。
上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。
发明内容
本发明的主要目的在于提供了一种静态网页的渲染方法、装置、设备及计算机存储介质，旨在解决目前静态网页在渲染过程中由于需要依赖后端服务器和数据库，造成运维成本较高的问题。
为实现上述目的，本发明提供了一种静态网页的渲染方法、装置、设备及计算机存储介质，所述方法包括以下步骤：
在接收到静态网页的访问请求时，加载所述静态网页对应的超文本标记语言文件；
对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址；
根据所述本地存储地址加载所述目标网页脚本；
从所述目标网页脚本中读取编码设计模式为模块模式的页面配置文件；
解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染。
优选地，所述对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址的步骤，包括：
对所述超文本标记语言文件进行编译，从编译结果中获取格式为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-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
本领域技术人员可以理解，图1中示出的结构并不构成对所述设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接收模块、网页浏览器以及静态网页的渲染程序。所述网页浏览器可用是IE(Internet Explorer)浏览器。
在图1所示的设备中，处理器1001运行以启动浏览器，通过所述浏览器调用存储器1005中存储的静态网页的渲染程序，并执行静态网页的渲染方法的步骤。
参照图2，图2为本发明一种静态网页的渲染方法第一实施例的流程示意图。
本实施例中，所述静态网页的渲染方法包括以下步骤：
步骤S10：在接收到静态网页的访问请求时，加载所述静态网页对应的超文本标记语言文件。
需要说明的是，本实施例的执行主体为装载于上述网页渲染设备的浏览器。所述网页渲染设备可以是笔记本电脑、台式电脑、智能手机或者智能电视等终端设备。所述网页渲染设备上面装载有支持所述静态网页运行的源代码文件，例如HTML(Hyper Text MarkupLanguage，超文本标记语言)文件，JavaScript文件，CSS(Cascading Style Sheets，层叠样式表)文件以及XHTML(eXtensible HyperText Markup Language，可扩展超文本标记语言)等文件。
当其他终端向所述静态网页发送访问请求时，浏览器会加载保存在上述设备中的所述静态网页对应目录下的HTML文件。
步骤S20：对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址，根据所述本地存储地址加载所述目标网页脚本。
可理解的是，计算机系统会把超文本标记语言中的源代码程序的每一条语句都编译成机器语言，并保存成二进制文件，这样运行时计算机可以直接以机器语言来运行此程序，速度很快。
具体地，HTML的源代码中会嵌入有与所述静态网页对应的网页脚本，以及该网页脚本对应的本地存储地址；
本实施例以JavaScript脚本作为目标网页脚本为例进行说明，浏览器会从HTML的编译结果中获取格式为JavaScript的目标网页脚本，然后确定目标网页脚本对应的本地存储地址，然后加载位于本地存储地址的目标网页脚本，本实施例的本地存储地址为(本地的)上述设备上与所述静态网页相关的某个文件夹，所述目标网页脚本保存于该文件夹中。
步骤S30：从所述目标网页脚本中读取编码设计模式为模块模式的页面配置文件。
可理解的是，设计模式(Design Pattern)表征一套被反复使用和代码设计经验的总结。使用设计模式的目的在于为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。设计模式使代码编写真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。
模块模式是一种网页脚本(如JavaScript)编码模式，模块是任何强大的应用程序体系结构的组成部分，通常有助于保持项目的代码单元完全分离和组织。
具体地，本实施例中，所述静态网页相应的页面配置文件会通过预编译的方式集成到目标网页脚本中，而现有技术的页面配置文件是在后端的服务器和数据库的。即本实施例的静态网页在运行时，所述静态网页对应的页面组件配置不会像现有技术那样从服务器拉取，而是改为提前编译生成。
本实施例的预编译的方式可以为：采用JSON格式定义页面配置文件，并采用前端模块化编译工具(如webpack)，将JSON配置打包成JavaScript模块，直接装载在页面的静态JavaScript文件中，编译后生成不依赖任何后端服务和数据接口的静态页面资源包，可以方便地发布至web服务器。
本实施例的页面配置文件集成在目标网页脚本中的好处在于：计算机系统在运行纯静态页面时，可以不依赖后端逻辑及数据服务，可以减少了页面部署的成本，纯静态页面也更容易借助类似于CDN(Content Delivery Network，内容分发网络)系统等平台进行页面访问加速，提升网络加载速度。
在具体实现中，浏览器会从所述目标网页脚本中抽取与所述静态网页的渲染处理相关的目标源代码；然后将所述目标源代码转化为的JavaScript对象数据；进而判断所述JavaScript对象数据是否为模块模式；在所述JavaScript对象数据为模块模式时，读取所述目标源代码对应的页面配置文件。
步骤S40：解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染。
在具体实现中，浏览器会调用所述静态网页的层叠样式表文件；然后解析所述页面配置文件，从解析结果中确定待渲染模块区域；最后根据所述层叠样式表文件对所述待渲染模块区域进行渲染，以实现对所述静态网页进行页面渲染。
本实施例中的浏览器除了需要编译HTML文件，还会对SVG(Scalable VectorGraphics，图像文件格式)以及XHTML文件进行编译；本地存储地址中会预存有三个C++的类对应这三类(HTML/SVG/XHTML)文档。
具体地渲染方式为：在对HTML/SVG/XHTML进行编译后，解析这三种文件会产生一个DOM Tree(文档对象化模型)。
相应地，调用所述静态网页的层叠样式表CSS文件，解析CSS文件会产生CSS规则树。通过DOM API(Application Programming Interface，文档对象模型接口函数)和CSSOMAPI(CSS对象模型接口函数)来操作DOM Tree和CSS规则树。
解析完成后，浏览器引擎会通过DOM Tree和CSS规则树来构造Rendering Tree(渲染树)。
相应地，浏览器会解析本地的编码设计模式为模块模式的所述页面配置文件，以定位所述静态页面中的网页模块的坐标和大小，即从解析结果中确定待渲染模块区域；
最后通过Rendering Tree渲染树对待渲染模块区域进行渲染，以实现对所述静态网页进行页面渲染。
本实施例在接收到静态网页的访问请求时，加载静态网页对应的超文本标记语言文件；对超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址；根据本地存储地址加载目标网页脚本，从目标网页脚本中读取代码设计格式为模块模式的页面配置文件；最后解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染，进而浏览器在不依赖后端逻辑及数据服务的前提对静态网页实现较好地渲染处理，降低了页面部署以及运维的成本，使得静态网页更容易借助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(npm install类似的命令)和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、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (9)

1.一种静态网页的渲染方法，其特征在于，所述方法包括：
在接收到静态网页的访问请求时，加载所述静态网页对应的超文本标记语言文件；
对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址；
根据所述本地存储地址加载所述目标网页脚本；
从所述目标网页脚本中读取编码设计模式为模块模式的页面配置文件；
解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染；
其中，所述对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址的步骤，包括：
对所述超文本标记语言文件进行编译，从编译结果中获取格式为JavaScript的目标网页脚本对应的本地存储地址，并加载位于所述本地存储地址的所述目标网页脚本；
其中，所述本地存储地址为与所述静态网页相关的某个文件夹，所述目标网页脚本保存于所述文件夹中；
所述从所述目标网页脚本中读取编码设计模式为模块模式的页面配置文件的步骤，包括：
从所述目标网页脚本中抽取与所述静态网页的渲染处理相关的目标源代码；
将所述目标源代码转化为JavaScript的对象数据；
判断所述JavaScript对象数据是否为模块模式；
在所述JavaScript对象数据为模块模式时，读取所述目标源代码对应的页面配置文件，其中所述页面配置文件通过预编译的方式集成在目标网页脚本中。
2.如权利要求1所述的方法，其特征在于，所述解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染的步骤，包括：
调用所述静态网页的层叠样式表文件；
解析所述页面配置文件，从解析结果中确定待渲染模块区域；
根据所述层叠样式表文件对所述待渲染模块区域进行渲染，以实现对所述静态网页进行页面渲染。
3.如权利要求1或2任一项所述的方法，其特征在于，所述在接收到静态网页的访问请求时，加载所述静态网页对应的超文本标记语言文件的步骤之前，所述方法还包括：
在接收到对静态网页的预编译指令时，加载与所述静态网页对应的页面配置文件；
对所述页面配置文件进行模块化打包处理，得到对应的待处理JavaScript对象数据；
对所述待处理JavaScript对象数据进行封装，得到目标JavaScript模块模式文件；
将所述目标JavaScript模块模式文件作为目标页面配置文件保存到本地的预设存储区域。
4.如权利要求3所述的方法，其特征在于，所述在接收到对静态网页的预编译指令时，加载与所述静态网页对应的页面配置文件的步骤，包括：
在接收到对静态网页的预编译指令时，加载与所述静态网页对应的页面配置文件和页面资源；
所述将所述目标JavaScript模块模式文件作为目标页面配置文件保存到本地的预设存储区域的步骤之后，还包括：
将所述目标页面配置文件与所述页面资源进行打包，将打包后的结果作为目标网页脚本保存到所述预设存储区域。
5.如权利要求4所述的方法，其特征在于，所述将所述目标页面配置文件与所述页面资源进行打包，将打包后的结果作为网页脚本保存到所述预设存储区域的步骤之后，还包括：
在接收到所述目标页面配置文件的升级配置数据时，对所述目标网页脚本进行删除；
将所述升级配置数据进行模块化打包处理，得到对应的待升级JavaScript对象数据；
对所述待升级JavaScript对象数据进行封装，得到待升级JavaScript模块模式文件；
将所述待升级JavaScript模块模式文件与所述页面资源进行打包，将打包后的结果作为新的网页脚本保存到所述预设存储区域。
6.如权利要求3所述的方法，其特征在于，所述在接收到对静态网页的预编译指令时，加载与所述静态网页对应的页面配置文件的步骤之后，还包括：
提取所述页面配置文件中的字符串数据；
检查所述字符串数据是否为JSON格式，在所述字符串数据为JSON格式时，执行所述对所述页面配置文件进行模块化打包处理，得到对应的待处理JavaScript对象数据的步骤。
7.一种静态网页的渲染装置，其特征在于，所述装置包括：
加载模块，用于在接收到静态网页的访问请求时，加载所述静态网页对应的超文本标记语言文件；
编译模块，用于对所述超文本标记语言文件进行编译，从编译结果中获取目标网页脚本的本地存储地址；
加载模块，用于根据所述本地存储地址加载所述目标网页脚本；
读取模块，用于从所述目标网页脚本中读取编码设计模式为模块模式的页面配置文件；
渲染模块，用于解析所述页面配置文件，根据解析结果对所述静态网页进行页面渲染；
所述编译模块，还用于对所述超文本标记语言文件进行编译，从编译结果中获取格式为JavaScript的目标网页脚本对应的本地存储地址，并加载位于所述本地存储地址的所述目标网页脚本，其中，所述本地存储地址为与所述静态网页相关的某个文件夹，所述目标网页脚本保存于所述文件夹中；
所述读取模块，还用于从所述目标网页脚本中抽取与所述静态网页的渲染处理相关的目标源代码，将所述目标源代码转化为JavaScript的对象数据，判断所述JavaScript对象数据是否为模块模式，在所述JavaScript对象数据为模块模式时，读取所述目标源代码对应的页面配置文件，其中所述页面配置文件通过预编译的方式集成在目标网页脚本中。
8.一种网页渲染设备，其特征在于，所述网页渲染设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的静态网页的渲染程序，所述静态网页的渲染程序配置为实现如权利要求1至6中任一项所述的静态网页的渲染方法的步骤。
9.一种计算机存储介质，其特征在于，所述计算机存储介质存储有静态网页的渲染程序，所述静态网页的渲染程序配置为实现如权利要求1至6中任一项所述的静态网页的渲染方法的步骤。
CN201910970892.0A 2019-10-12 2019-10-12 一种静态网页的渲染方法、装置、设备及计算机存储介质 Active CN110990731B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910970892.0A CN110990731B (zh) 2019-10-12 2019-10-12 一种静态网页的渲染方法、装置、设备及计算机存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910970892.0A CN110990731B (zh) 2019-10-12 2019-10-12 一种静态网页的渲染方法、装置、设备及计算机存储介质

Publications (2)

Publication Number Publication Date
CN110990731A CN110990731A (zh) 2020-04-10
CN110990731B true CN110990731B (zh) 2023-05-26

Family

ID=70081882

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910970892.0A Active CN110990731B (zh) 2019-10-12 2019-10-12 一种静态网页的渲染方法、装置、设备及计算机存储介质

Country Status (1)

Country Link
CN (1) CN110990731B (zh)

Families Citing this family (23)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111740948B (zh) * 2020-05-12 2023-04-07 北京沃东天骏信息技术有限公司 数据包发布方法、动态更新方法、装置、设备及介质
CN111680253B (zh) * 2020-06-08 2022-06-28 南京领行科技股份有限公司 页面应用数据包生成方法、装置、计算机设备及存储介质
CN112015432A (zh) * 2020-08-24 2020-12-01 云账户技术(天津)有限公司 一种静态项目部署方法及装置
CN113778543B (zh) * 2020-09-03 2024-04-05 北京沃东天骏信息技术有限公司 一种应用于插件的页面内容更新方法和装置
CN112269739A (zh) * 2020-10-26 2021-01-26 广州华多网络科技有限公司 网页测试方法及其装置、设备、介质
CN112257135B (zh) * 2020-10-30 2023-09-05 久瓴(上海)智能科技有限公司 一种基于多线程的模型加载方法、装置、存储介质及终端
CN112433799A (zh) * 2020-11-25 2021-03-02 平安普惠企业管理有限公司 页面生成方法、装置、设备及介质
CN112800724A (zh) * 2020-12-29 2021-05-14 杭州涂鸦信息技术有限公司 可视化配置模板的可读文件导出方法及相关装置
CN112732328B (zh) * 2020-12-30 2021-11-12 望海康信(北京)科技股份公司 webpack打包系统、方法及相应设备和存储介质
CN113760253A (zh) * 2021-01-08 2021-12-07 北京沃东天骏信息技术有限公司 前端渲染方法、装置、设备、介质及程序产品
CN113051502A (zh) * 2021-03-11 2021-06-29 北京顶象技术有限公司 网页保存方法、装置、设备及存储介质
CN113064632A (zh) * 2021-04-07 2021-07-02 北京读我网络技术有限公司 前端项目发布方法及装置
CN113315822B (zh) * 2021-05-21 2023-06-20 福建天泉教育科技有限公司 一种前后端分离架构下的页面静态化方法与系统
CN113076504B (zh) * 2021-06-03 2021-10-01 北京达佳互联信息技术有限公司 骨架屏生成方法、装置、设备、存储介质
CN113536180A (zh) * 2021-06-28 2021-10-22 北京达佳互联信息技术有限公司 项目的处理方法、装置、电子设备、存储介质和程序产品
CN113626739B (zh) * 2021-06-30 2023-07-18 苏州浪潮智能科技有限公司 一种网站渲染路径加速优化方法及系统
CN113656728B (zh) * 2021-07-20 2024-01-19 广州虎牙科技有限公司 网页渲染方法、装置、电子设备及计算机可读存储介质
CN113760356B (zh) * 2021-09-10 2024-03-19 北京百度网讯科技有限公司 程序产品的差异化配置方法、装置、设备和介质
CN113868565B (zh) * 2021-09-23 2024-05-24 深圳市腾讯网域计算机网络有限公司 皮肤样式的文件编辑方法及装置
CN114444001A (zh) * 2022-01-29 2022-05-06 北京达佳互联信息技术有限公司 网站生成方法、装置、电子设备、存储介质、计算机产品
CN114579137B (zh) * 2022-03-02 2023-09-15 抖音视界有限公司 一种页面渲染方法、装置、计算机设备和存储介质
CN114357339B (zh) * 2022-03-17 2022-07-22 杭州互链互联网技术有限公司 一种页面加载方法、装置及存储介质
CN114781347B (zh) * 2022-06-21 2022-09-20 飞狐信息技术（天津）有限公司 一种文件处理方法及系统

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107229633A (zh) * 2016-03-24 2017-10-03 北京神州泰岳软件股份有限公司 静态页面生成方法、网页访问方法及装置

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109783752A (zh) * 2018-12-14 2019-05-21 深圳壹账通智能科技有限公司 页面加载方法及装置、电子设备和计算机可读存储介质
CN109902247B (zh) * 2019-02-14 2021-04-16 北京奇艺世纪科技有限公司 一种页面渲染的方法、装置及电子设备

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107229633A (zh) * 2016-03-24 2017-10-03 北京神州泰岳软件股份有限公司 静态页面生成方法、网页访问方法及装置

Also Published As

Publication number Publication date
CN110990731A (zh) 2020-04-10

Similar Documents

Publication Publication Date Title
CN110990731B (zh) 一种静态网页的渲染方法、装置、设备及计算机存储介质
CN111090437B (zh) 应用部署方法、装置及计算机可读存储介质
FI118311B (fi) Menetelmä, tietojenkäsittelylaite, tietokoneohjelmatuote ja järjestely elektronisen datan prosessointiin
CN105718289B (zh) 一种组件关系建立方法及其设备
US20090204883A1 (en) Method, Program and System for the Dynamic, Template-Based Generation of Internet Pages
CN105373615A (zh) 一种页面定制化的方法和装置
CN111680253B (zh) 页面应用数据包生成方法、装置、计算机设备及存储介质
CN111381852A (zh) 基于Flutter的应用动态更新方法、装置、存储介质及电子设备
US20140298318A1 (en) Computer-executable application packaging method, computer-executable device and storage media performing the same
CN109032917B (zh) 页面调试方法和系统、移动终端以及电脑端
CN108845839B (zh) 应用页面加载方法、装置及计算机可读存储介质
CN105718313A (zh) 应用操作方法和装置
CN116069325B (zh) 前端项目构建方法、装置、设备及计算机可读存储介质
CN111068328A (zh) 游戏广告配置表格的生成方法、终端设备及介质
US9571557B2 (en) Script caching method and information processing device utilizing the same
US8112500B2 (en) Technique of relaying communications between client apparatus and server apparatus
CN112947900B (zh) web应用开发方法、装置、服务器及开发终端
CN112416533A (zh) 在浏览器上运行应用程序的方法、装置及电子设备
CN111857881A (zh) 基于repo的manifest仓库加载方法、装置及存储介质
CN110990732A (zh) 基于网页的加载方法、装置、设备及存储介质
CN115576536A (zh) 一种通过分析字节码自动生成接口文档的方法及系统
CN111078631B (zh) 文件的处理方法、终端设备及存储介质
CN110247966B (zh) 内核创建方法、智能电视及计算机可读存储介质
CN111258586B (zh) 快应用运行、编译方法、装置、电子设备和存储介质
CN103092575A (zh) 生成小工具应用的方法和系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right

Effective date of registration: 20210128

Address after: 518000 Room 201, building A, No. 1, Qian Wan Road, Qianhai Shenzhen Hong Kong cooperation zone, Shenzhen, Guangdong (Shenzhen Qianhai business secretary Co., Ltd.)

Applicant after: Shenzhen saiante Technology Service Co.,Ltd.

Address before: 1-34 / F, Qianhai free trade building, 3048 Xinghai Avenue, Mawan, Qianhai Shenzhen Hong Kong cooperation zone, Shenzhen, Guangdong 518000

Applicant before: Ping An International Smart City Technology Co.,Ltd.

TA01 Transfer of patent application right
GR01 Patent grant
GR01 Patent grant